# 整个过程
- 首先，在浏览器地址栏中输入URL；
- 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中渲染页面内容。若没有，则跳到第三步操作；
- 在发送HTTP请求前，需要域名解析（DNS解析），解析获取相应的IP地址；
- 浏览器向服务器发起TCP连接，与浏览器建立TCP三次握手；
- 握手成功后，浏览器向服务器发送HTTP请求，请求数据包；
- 服务器处理收到的请求，将数据返回至浏览器；
- 浏览器收到HTTP响应；
- 读取页面内容，浏览器渲染页面；
- 客户端和服务器交互。
# HTML解析与渲染详解
当浏览器的网络线程接收到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。整个渲染流程分为多个阶段，分别是：HTML解析、样式计算、布局、分层、绘制、分块、光栅化、画。每个阶段都有明确的输入输出，上一阶段的输出会成为下一个阶段的输入。
HTML解析
解析过程中遇到CSS解析CSS，遇到JS执行JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载HTML中的外部CSS文件和外部JS文件。
如果主线程解析到
link位置，此时外部的CSS文件还没有下载解析好，主线程不会等待，继续解析后续的HTML。这是因为下载和解析CSS的工作是在预解析线程中进行的。这就是CSS不会阻塞HTML解析的根本原因。如果主线程解析到
script位置，会暂停解析HTML，转而等待JS文件下载好，并将全局代码解析执行完成后，才能继续解析HTML。这是因为JS代码的执行过程可能会修改当前的DOM树，所以DOM树的生成必须暂停。这就是JS会阻塞HTML解析的原因。第一步完成之后，会得到DOM树和CSSOM树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在CSSOM树中。
样式计算
渲染主线程会遍历得到的DOM树，依次为树中的每个节点计算出它的最终样式，成为Computed Style。在这一过程中，很多预设值会变成绝对值，比如
red会变成rgb(255, 0, 0)；相对单位会变成绝对单位，比如em会变成px。这一步完成后，会得到一棵带有样式的DOM树。
布局
布局阶段会依次遍历DOM树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。
大部分时候，DOM树和布局树并非一一对应。比如
display: none的节点没有几何信息，因此不会生成到布局树；又比如使用了伪元素选择器，虽然DOM树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树种。还有匿名行盒、匿名块盒等等都会导致DOM树和布局树无法一一对应。这一步完成后，会得到布局树。
分层
主线程会使用一套复杂的策略对整个布局树进行分层。分层的好处在于，将来某一层改变后，仅会对该层进行后续处理，从而提升效率。滚动条、堆叠上下文（
z-index）、transform、opacity等样式都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果。（分层信息可以通过Chrome控制台的Layers栏查看）绘制
主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。
分块
合成线程（属于渲染进程）首先对每个图层进行分块，将其划分为更多的小区域。它会从线程池中拿取多个线程来完成分块工作。
光栅化
合成线程会将块信息交给GPU进程，以极高的速度完成光栅化。GPU进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。光栅化的结果就是一块一块的位图。
画
合成线程拿到每个层、每个块的位图后，生成一个个指引quad信息。指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。变形发生在合成线程，与渲染主线程无关，这就是
transform效率高的本质原因。合成线程会把quad提交给GPU进程，由GPU进程产生系统调用（渲染进程无法直接调用GPU硬件），提交给GPU硬件，完成最终的屏幕成像。
# 页面渲染优化
- HTML文档结构层次尽量少，最好不深于六层。
- 脚本尽量后放，放在
</body>前即可。 - 少量首屏样式内联放在
<head>标签内。 - 样式结构层次尽量简单。
- 在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流。
- 减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画。
- 动画尽量使用在绝对定位或固定定位的元素上。
- 隐藏在屏幕外，或在页面滚动时，尽量停止动画。
- 尽量缓存DOM查找，查找器尽量简洁。
- 涉及多域名的网站，可以开启域名预解析。
- 使用雪碧图。
# 扩展问题
- HTTP / 前端缓存相关
- HTTP / 为什么需要URL编码
- HTTP / DNS解析流程以及前端优化
- HTTP / OSI七层模型与TCPIP五层模型
- HTTP / TCP的三次握手与四次挥手