浏览器渲染流程及优化方案

渲染流程

第一大步骤：网络通讯

 用户输入网址（www.baidu.com) => DNS域名解析=> 发起TCP三次握手=> 浏览器发出http请求  => 服务器响应http请求，把文件中的内容/代码返回给浏览器

第二大步骤：页面渲染

 解析HTML文件，获得DOM树和CSS样式树 => 将DOM树和CSS样式树"整合"成渲染树=> 经过已知的HTML标签和他对应的样式去计算布局=> 将计算好的渲染树渲染到显示器上

其余步骤：页面重绘和页面重排

这两个步骤是很难避免的，只要涉及到dom的动态操做，都会致使页面重绘或者重排，页面重绘通常是由颜色变化致使的，而页面重排则是因为部分元素尺寸，定位变化致使的。所以对于须要操做定位或者大小的元素，尽可能使其脱离文档流，防止其关联元素的定位甚至致使全局的定位重排。

请不要以为浏览器是按照上面的步骤一步步的执行下来获得最终显示屏上的页面的，页面的渲染过程并非彻底独立的，因此你能够常常看到页面一点点出来的状况就是一边解析，一边加载，一边渲染的工做现象。

页面优化方案

1.防止css的过多嵌套，合理的css选择器能够避免这个问题。这里多提一句，如今新出的CSS解析器，如LESS,SASS,STYLES基本都是经过嵌套来写CSS，因此不知道他里面是怎么优化这个问题的。

2.减小http的请求次数，将资源文件如（图片）进行整合，将其余文件经过打包工具打包。（为何要这样作呢？由于加载两张50K的图片的速度没有加载一张100K的图片快，这是因为加载一张图片不须要切换工做，省下了部分切换工做时所须要的时间）

3.减小dom操做，让常常须要改动的节点脱离文档流

 

4.使用json格式进行数据交换，json格式是JavaScript的原生格式，所以使用的过程当中不须要借助额外的工具包

5.解决阻塞渲染，优先加载HTML再解析js