浏览器渲染过程

浏览器打开的流程

（上一个页面的的回收时间）

阻塞时间(主要指的是页面中的资源)

Dns

SSL握手时间（不一定都有）

重定向时间（不一定都有）

发出请求时间

首包时间

内容下载时间（剩余包时间及资源下载时间）

客户端时间（渲染时间（dom分析及绘制过程），脚本执行时间）

页面绘制过程

绘制DOM树（Parse Html,LayOut,Paint）

CSS+Dom树

Evaluae Script(Chrome绘制中  阻塞 绘制 会显示黄色感叹号)

工具（Chrome）

1.PageSpeed（google）及 Yslow（yahoo）

重新绘制reflow

chrome show paint rectangels

查看页面绘制过程：

chrome-->f12-->Timeline-->点击下部的一个圆点Record，灰色变红色，开始抓取绘制过程

通过Chrome-->f12-->settings-->rendering-->show paint rectangles TimeLine工具能够很方便的查看到reflow重绘的过程

show Fps meter，能够查看到页面刷新的频率：主要对游戏及动画，业务及电子商务系统用处不大

测试方法：

使得重绘范围尽量小，知名的鱼缸测试

微软浏览器测试FPS地址：（FPS达到60最好），刷新频率到60基本就没有闪烁的感觉了

http://ie.microsoft.com/testdrive/Performance

优化方法：

1.性能（CDN，减少重定向，服务端性能，提前Flush，多个网站并行下载）

3.压缩及减少数据量（图片优化，js压缩，css压缩，cdn，静态资源cookie）

4.减少数据请求次数（资源合并，客户端缓存,行内脚本，行内css）

5.优化请求顺序（延时加载，css头部，js尾部，分析工具查出阻塞位置，行内脚本，不用滤镜及css表达式）

两本必读书：（网上有pdf版本）

高性能网站建设指南（一只猎狗）

高性能网站建设进阶指南(一致羚羊)