从输入url到页面呈现

[LumiereXyloto]

网络部分

网络请求

1. 构建请求（此处只构建了请求行）
2. 查找强缓存
3. DNS解析
   • DNS缓存
   • DNS解析
4. 建立TCP连接
   • 通过三次握手(即总共发送3个数据包确认已经建立连接)建立客户端和服务器之间的连接。
   • 进行数据传输。这里有一个重要的机制，就是接收方接收到数据包后必须要向发送方确认, 如果发送方没有接到这个确认的消息，就判定为数据包丢失，并重新发送该数据包。当然，发送的过程中还有一个优化策略，就是把大的数据包拆成一个个小包，依次传输到接收方，接收方按照这个小包的顺序把它们组装成完整数据包。
   • 断开连接的阶段。数据传输完成，现在要断开连接了，通过四次挥手来断开连接。
5. 发送HTTP请求
   • 携带请求行、请求头、请求体

网络响应

1. 得到响应结果
2. 判断是否断开TCP连接
   • 如果请求头或响应头中包含Connection: Keep-Alive，表示建立了持久连接，这样TCP连接会一直保持，之后请求统一站点的资源会复用这个连接。
   • 否则断开TCP连接, 请求-响应流程结束。

解析算法部分

完成了网络请求和响应，如果响应头中Content-Type的值是text/html，那么接下来就是浏览器的解析和渲染工作了。

构建DOM树

样式计算

1. 标准化样式表
2. 标准化样式属性
3. 计算每个节点的具体样式

   生成布局树

渲染过程部分

建图层树

浏览器在构建完布局树之后，还会对特定的节点进行分层，构建一棵图层树(Layer Tree)。去实现3D动画如何呈现出变换效果，当元素含有层叠上下文时如何控制显示和隐藏等等。

生成绘制列表

接下来渲染引擎会将图层的绘制拆分成一个个绘制指令，比如先画背景、再描绘边框......然后将这些指令按顺序组合成一个待绘制列表，相当于给后面的绘制操作做了一波计划。

生成图块和生成位图

显示器显示内容

[Reaper622]

接着HTML完成渲染说，假设此文件之后还存在一些JS文件： 因为JS的执行是单线程的，所以说在同一个时间内只能做一件事情，所有的任务都要排队，前一个任务结束了，后一个任务才能开始。JS的执行机制可以看做是一个主线程+任务队列，同步任务是放在主线程上的人物，异步任务就是放在任务队列中的任务。所有同步任务在主线程上执行，形成可一个执行栈。异步任务有了运行结果就会在任务队列中放置一个事件；运行时线运行执行栈里的任务，如果执行栈里的运行完了，就会从任务队列中提取事件，运行任务队列中的任务，任务队列中的任务可能还存在异步任务继续放在任务队列中，所以这个过程是不断重复的，称之为事件循环。

浏览器在解析过程中，如果遇到请求外部资源(img,iconfont)等，会重新从构建请求开始执行，这个请求过程是异步的，所以不会阻塞HTML的加载，但是如果加载过程中遇到了JS文件，HTML会挂起渲染过程（被阻塞），等到JS文件全部加载完并且解析执行完才会继续进行HTML的渲染。（因为JS内部可能会修改DOM结构，所以JS执行完毕前后续的渲染都没有必要。）这也是JS阻塞浏览器渲染的根本原因。CSS文件的加载不影响JS文件的记载，但影响JS文件的执行，在JS执行前浏览器必须保证CSS文件加载执行完毕。