前端的性能优化

解析 HTML 文件，构建 DOM 树，同时浏览器主进程负责下载 CSS 文件
CSS 文件下载完成，解析 CSS 文件成树形的数据结构，然后结合 DOM 树合并成 RenderObject 树
布局 RenderObject 树 （Layout/reflow），负责 RenderObject 树中的元素的尺寸，位置等计算
绘制 RenderObject 树 （paint），绘制页面的像素信息
浏览器主进程将默认的图层和复合图层交给 GPU 进程，GPU 进程再将各个图层合成（composite），最后显示出页面

一、 资源合并与压缩-http

1、html压缩
（1）、使用在线网站进行压缩，这种方式在现代化的前端工程中几乎不会再去使用
（2）、nodejs提供了html-minifier工具（构建层面的压缩）
（3）、后端模板引擎渲染压缩（服务端层面的压缩）
2、css压缩
（1）、使用在线网站进行压缩
（2）、使用html-minifier对html中的css进行压缩
（3）、使用clean-css对css进行压缩
3.Js压缩与混乱
（1）、使用在线网站进行压缩
（2）、使用html-minifier对html中的js进行压缩
（3）、使用uglifyjs2对js进行压缩
4、文件合并
（1）、使用在线网站进行文件合并
（2）、使用nodejs实现文件合并（基于常见的gulp或者webpack进行配置，如在webpack中，配置好entry和output，webpack自带的机制就会去自动根据文件之间的依赖关系进行打包）
5、把 js 脚本置底加载
js 脚本是很容易形成阻塞，导致资源加载停滞，为了避免这种情况，先加载其他资源，最后加载脚本
6、css 放在 head 中
页面渲染过程还要经历重绘重排，这样做是避免会出现 DOM 加载完之后却没有样式的情况。