页面的生产过程
HTML转化成DOM
CSS转化成CSSOM
结合DOM+CSSOM，生成渲染树
生成布局(layout)，即将渲染树的所有节点进行平面合成。
将布局绘制(paint)屏幕上

页面优化的方式

优化:
减少HTTP请求(合并CSS/JS，图片小于8KB的用base64编码转化)
减少DOM操作(可使用documentFragment)
避免不必要的重绘重排
优化css选择器(从右到左匹配)
css/js minify，混淆压缩，减少体积
开启GZIP压缩
将css放在顶部，js放在底部(javascript会阻塞浏览器的渲染)
压缩图片以及css sprite
使用CDN加速，适当进行文件缓存
合理控制cookie大小(每次渲染都会包含cookie)

主要是两种提高资源的获取速度与渲染效率，减少不必要的重排重绘

思想:
性能优化先优化性能瓶颈。
用户交互时也会出现性能瓶颈。大量的DOM更新(react的优势就在这里，虚拟dom可以减少不必要的dom更新)，频繁的页面重排重绘

移动端的性能优化

主要需要解决的问题就是首屏时间
1.减少请求数
2.减少传输体积
3.尽可能利用缓存
4.缩短关键路径
5.合理安排请求顺序