网站访问的过程从用户输入网站域名开始,通过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体积