前端优化

网站访问的过程从用户输入网站域名开始,通过DNS解析找到目标服务器,目标服务器收到请求后执行服务器及数据库等一系列操作,并将响应数据经过互联网发送到用户的浏览器中,最终由浏览器处理响应数据并完成网页的渲染

1.网页的资源请求和加载阶段

为了实现网站的快速响应,首先需要考虑的是减少资源的访问及加载阶段所消耗的时间。在使用http1.0/1.1时,chrom会将每个主机强制设置为最多6个TCP连接,因此可以通过划分子域的方式,将多个资源分布在不同子域用来减少请求队列的等待时间。通常把域名拆分为3到5个比较合适。

HTTP是一个无状态的面向连接的协议,即每个HTTP请求都是独立的,然而无状态并不代表HTTP不能保持TCP连接,Keep-Alive正是HTTP协议中保持TCP连接非常重要的一个属性。

2.网页渲染阶段

浏览器将ongoing服务器获取的HTML文档构建成文档对象模型DOM,与此同时浏览器会下载文档中引用的CSS与js文件。CSS经过解析构成层叠样式表模型CSSDOM,js会交给js引擎执行。紧接着,文档对象模型与层叠样式模型CSSOM将构建渲染树。

浏览器在加载到js节点后,会交由js殷勤执行,如果js对DOM树进行读写操作,则会影响DOM树的创建,从而阻塞浏览器的渲染过程。解决此问题通常是将js放在页面底部或者通过异步的方式加载js,另外,过于复杂的css嵌套规则,会影响CSSOM的生成,导致渲染时间延长。

Yahoo法则

1.减少HTTP请求

2.压缩css和js代码

3.去除重复引用的脚本

4.可缓存的ajax

5.延迟加载非必要脚本

6.预加载:浏览器空闲阶段预先加载将来用户可能会访问的内容,从而提高页面的即时响应能力,优化用户体验。

7.减少DOM元素数量

DOM元素过多以为这需要加载更多的数据,在使用js遍历DOM时更加低效,也意味着执行布局和绘制时产生更多的性能损耗。

8.减少DOM访问次数

9.避免使用iframe

10.优化图像

11优化CSS Sprites

12.不要在HTML中缩放图片

13.减少Cookie体积

发布了97 篇原创文章 · 获赞 16 · 访问量 8万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章