导航流程：从输入URL到页面展示，这中间发生了什么？

地址栏输入，然后回车

1. 确认输入是否为地址，如果不是地址，则使用浏览器默认搜索引擎，如果是地址，则开始导航

2. 浏览器进程把url信息发送给网络进程，网络进程收到url后，查看本地是否有该url的缓存，如果有缓存，则返回缓存，如果没有缓存，则进行DNS域名解析，解析出IP和端口之后，建立TCP链接

3. 网络进程向服务器发送url请求，服务器收到url请求之后，生成对应的response，网络进程接收到响应头之后，根据响应头状态，决定是否重定向，根据content-type决定，如果处理返回结果，或下载，或浏览器解析

4. 如果网络进程收到的是HTML，则要告诉浏览器主进程，开始准备渲染进程，渲染进程准备完毕后，把网络进程的response发送给渲染进程，渲染进程收到文档之后，要告诉主进程，自己收到了HTML代码，浏览器主进程作出相应的状态变更，比如，返回前进按钮状态变更，地址栏内容变更，页面变更

5. 网络进程收到响应体之后，把数据发送给渲染进程，渲染进程进行页面渲染和子资源加载

浏览器无法识别html代码，所以要把html解析成dom树

在 HTML 页面内容被提交给渲染引擎之后，渲染引擎首先将 HTML 解析为浏览器可以理解的 DOM；然后根据 CSS 样式表，计算出 DOM 树所有节点的样式；接着又计算每个元素的几何坐标位置，并将这些信息保存在布局树中 

6. 生成布局layout之后，还没有好，还需要生成layer tree，每个layer生成一个绘制列表，渲染进程的主线程把绘制列表提交给合成进程，合成进程把每个图层分成图块，并在光栅化线程池（该线程会利用GPU进程讲图块转换成位图）中将图块转换成位图

一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。

浏览器进程里面有一个叫 viz 的组件，用来接收合成线程发过来的 DrawQuad 命令，然后根据 DrawQuad 命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。

HTML  + JS + CSS的执行顺序：

1. CSS不影响HTML的dom构建

2. CSS阻塞js的执行

3. js阻塞dom的构建

4. css和js都阻塞页面的渲染

5. script有defer和async；async在渲染dom的同时，下载js，所以如果js下载完成之后，开始执行js还是会阻塞dom渲染，defer，下载资源是和dom构建同步，但是执行是在dom + computedStyle构建完成之后