渲染流程
第一大步骤：网络通信
用户输入网址（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