1. 浏览器辨别出是否是一个合理的URL，不是则用默认搜索引擎进行搜索。如果是合理的URL，则执行一次DNS的查询，DNS也可以从浏览器的缓存或者操作系统的hosts目录去查找，如果没有找到，则会往远程的DNS域名服务器上去查询，这个结果会被浏览器缓存下来，方便下次加速查询。
2. 如果是合理的URL，第一步看缓存，http1.1的cach-control 或者http1.0的expires，如果没有过期，则直接使用，流程结束。
3. TCP的三次握手，建立连接， 如果是Https协议，还会额外执行SSL/TLS的二次握手，通过非对称加密算法以及CA证书协商出对称加密密钥。
4. 握手结束后，就会发起真正的http数据请求，服务器收到请求后，可能访问数据库，redis等，经过业务层逻辑处理，最后生成页面返回Browse，如果是短连接，就会有4次挥手关闭连接，http1.1默认保持连接，方便其他请求复用这条链路。
5. 浏览器的网络进程收到响应html文件流后，JS主线程中的HtmlParse模块解析出Dom，CSSOM（内嵌，行内，link外置根据优先级合并，还有css尺寸单位标准化为px表示），最后把他们合并出布局树（Layout Tree），它指出了DOM元素的几何位置信息。
6. 分层，它会根据是否出现3D转换，Z-Index, Filger，Transform，Opacity，定位属性，是否出现裁剪，文字区域是否出现滚动条等进行分出多个图层，类似与PS制图软件的分层思路。
7. 绘制， 实际这一步没有真正的绘制，只是把每一个图层的绘制拆分成很多小的绘制指令，再顺序组成一个绘制列表。
8. 栅格化，先会分块成比较小的的块，如256 x 256，512 x 512，视口附件优先生成位图的原则，将图块转换为位图。栅格化这个过程会使用GPU来加速生成，这个过程叫做快速栅格化，生成的位图会放到GPU中。
9 合成显示，栅格化完成后，浏览器进程会合并这些位图，最后显示到浏览器中。
优化点
如果JS中会操作的动画，可以事先用Will-Change再css中指定，比如will-change：transform/Opacity等。这样就可以单独给这个元素分一层，变化是只会操作这一层，效率就会好很多。
一帧16ms（1s/60）内没有生成一张图片，就会出现卡顿。
重排重绘是这主线程中完成的，会直接影响其他JS的执行，栅格化分块，合成操作时渲染流程后续的合成线程中完成的，不会占用js主线程的时间片。