web前端性能完整版.doc

由于web前端性能测试包含的知识点很多：浏览器工作原理、浏览器缓存、相关的http头信息、http状态码、完整的一个http请求及响应过程、响应时间、web前端性能测试工具以及优化方法等等，所以决定分两篇文章来总结，这一篇主要介绍一些跟web前端性能有关的一些概念，最近也在收集阅读相关文档，一边学习一边理解消化一边总结，有什么不对的希望指出。

浏览器的主要构成：

1.用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

2.浏览器引擎－用来查询及操作渲染引擎的接口。

3.渲染引擎－用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

4.网络－用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

5.UI后端－用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

6.JS解释器－用来解释执行JS代码。

7.数据存储－属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了webdatabase技术，这是一种轻量级完整的客户端存储技术

虽然不同浏览器的工作方式不完全一样，但是基本上都包括以上各组件，浏览器的核心是浏览器引擎（BrowserEngine），目前市场占有率最高的几种浏览器几乎使用了不同的浏览器引擎：IE使用的是Trident，Firefox使用的是Gecko，Safari和Chrome使用的是Webkit。

一个完整的页面请求及响应过程：

1、浏览器的url请求

2、递归寻找DNS服务器

3、连接目标IP并建立TCP连接

4、向目标服务器发送http请求

5、web服务器接收请求后处理

6、web服务器返回相应的结果【无效、重定向、正确页面等】

7、浏览器接收返回的http内容

=========================================前端解析分割线==============================================

8、开始解析html文件，当然是自上而下，先是头部，后是body

9、当解析到头部css外部链接时，同步去下载，如果遇到外部js链接也是下载【不过js链接不建议放在头部，因为耽误页面第一展现时间】

10、接着解析body部分，边解析边开始生成对应的DOM树，同时等待css文件下载

11、一旦css文件下载完毕，那么就同步去用已经生成的DOM节点+CSS去生成渲染树

12、渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置

13、一旦计算出来渲染的坐标后，又同步去开始渲染

14、10-13步进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染原来图片的位置

15、同14步，如果渲染过程中出现js代码调整DOM树机构的情况，也会再次重新来过，从修改DOM那步开始

16、最终所有节点和资源都会渲染完成

=========================================分析结束分割线==============================================

17、渲染完成后开始page的onload事件

18、整个页面load完成

整个过程中会有很多的分别请求，所以TCP连接会很多，并且每一个用完都会自己关了，除非是keep-live类型的可以请求多次才关闭。对web应用前端性能的研究并不是为了准确的得到一个响应时间数据，实际上，web性能一部分取决于web服务器和应用服务器（建立连接、下载资源文件），另一部分取决于浏览器的实现机制、web页面上的js文件的执行等（分割线以内的步骤过程），我们并不仅仅关注页面资源的解析和展示响应时间，而是要关注总时间；我们进行web前端性能测试的目的是计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间等指标，对该页面性能进行评估分析，找出影响性能的主要因素和瓶颈，并在此结果的基础上，给出一定的优化建议和解决方案，从而提升用户体验。

????

Web前端响应时间与缓存有很大关联，而缓存也取决于http请求和响应头的某些信息。下面介绍下与前端性能相关的http头信息：

先来说说为什么要缓存：

1??减少网络带宽消耗

2??降低服务器压力

3??减少网络延迟，加快页面加载

Web缓存的工作原理是基于一套规则（http协议头定义或HTML页面的Meta标签中定义）来帮助他们决定什么时候使用缓存中的保存的副本提高服务。分别从新鲜度和校验值两个维度来决定是使用缓存中