作者:mobiledu2502910077 | 来源:互联网 | 2020-08-23 18:43
本篇文章给大家带来的内容是关于页面性能优化的方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
互联网有一项著名的8秒原则。用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。事实上,加载时间每多1秒,你就会流失7%的用户。8秒并不是准确的8秒钟,只是向网站开发者表明了加载时间的重要性。那我们如何优化页面性能,提高页面加载速度呢?这是本文主要要探讨的问题,然而性能优化是个综合性问题,没有标准答案,想要面面俱到罗列出来,并非易事。本文只关注一些核心要点,以下是我总结性能优化常见的办法:
一、资源压缩与合并
主要包括这些方面:html压缩、css 压缩、js的压缩和混乱和文件合并。
资源压缩可以从文件中去掉多余的字符,比如回车、空格。你在编辑器中写代码的时候,会使用缩进和注释,这些方法无疑会让你的代码简洁而且易读,但它们也会在文档中添加多余的字节。
1.html压缩
html代码压缩就是压缩这些在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如HTML注释也可以被压缩。
如何进行html压缩:
使用在线网站进行压缩(开发过程中一般不用)
nodejs 提供了html-minifier工具
后端模板引擎渲染压缩
2.css代码压缩:
css代码压缩简单来说就是无效代码删除和css语义合并
如何进行css压缩:
使用在线网站进行压缩(开发过程中一般不用)
使用html-minifier工具
使用clean-css对css压缩
在还没定义defer和async前,异步加载的方式是动态创建script,通过window.onload方法确保页面加载完毕再将script标签插入到DOM中,具体代码如下:
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/Javascript");
script.src = src;
document.body.appendChild(script);
}
window.Onload= function(){
addScriptTag("js/index.js");
}
2、异步加载的区别
1)defer是在HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执行
2)async是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关
另外需要注意的是,浏览器会对a标签的href自动启用DNS Prefetching,所以a标签里包含的域名不需要在head中手动设置link。但是在HTTPS下不起作用,需要meta来强制开启功能。这个限制的原因是防止窃听者根据DNS Prefetching推断显示在HTTPS页面中超链接的主机名。下面这句话作用是强制打开a标签域名解析
以上就是页面性能优化的方法总结的详细内容,更多请关注 第一PHP社区 其它相关文章!