输入URL后发生了什么

type

status

date

slug

summary

DNS解析

由于我们输入的是一个域名，这时候如果需要数据通信的话实际上是客户端和服务端的通信而服务端就是服务器所以我们需要一个服务器的 ip 地址。 DNS(Domain Name System) 就是一个将域名和ip地址一一对应的系统将域名解析成 ip 的过程就是 DNS 解析

浏览器是怎么知道DNS解析服务器的？

本机的网络设置可以看到当前的DNS服务器IP 浏览器能获取系统的DNS服务器具体不探究

一般宽带服务商都会提供DNS服务器那么入网设备是这么获取到DNS服务器地址呢？

通过动态主机配置协议(DHCP)，当一台设备连到路由器之后，路由器通过DHCP给它分配一个IP地址，并告诉它DNS服务器，如下路由器的DHCP设置：

DNS 有缓存吗？

有浏览器会会记住已经解析过的域名 cache，下次直接走缓存，不需要经过 DNS解析。

TCP连接

TCP传输控制协议 (Transmission Control Protocol) 连接的目的是为了保证信息有序不丢包建立可靠的数据传输

其中经历的过程又分为：

三次握手

数据传输

四次挥手

详细见TCP三次握手和四次挥手

HTTP请求和响应

HTTP请求

TCP 链接建立完毕后浏览器和服务器就可以开始通信了

HTTP请求过程就是浏览器会设置好请求报文并通过TCP协议发送到服务器指定端口过程

请求报文 = 请求行 + 请求头 + 空行 + 请求体 下面一个个看

空行: 协议中规定请求头和请求主体间必须用一个空行隔开

请求行 = 请求方法 + 请求路径 + 协议版本

请求头 则是一些附加的信息一般以键值对形式存在

以访问 https://www.baidu.com/ 为例请求头中常见字段是

请求体

对于POST请求，所需要的参数都不会放在url中，这时候就需要一个载体了，这个载体就是请求主体

GET 一般没有请求体

HTTP响应

服务端收到这个请求后，会根据url匹配到的路径做相应的处理，最后返回浏览器需要的页面资源。处理后，浏览器会收到一个响应报文

响应报文 = 响应行 + 响应头 + 空行 + 响应体

状态行 = 协议版本 + 状态码 + 状态描述

响应头和请求头类似也会有服务器返回的一些信息

以访问 https://www.baidu.com/ 为例响应头中常见字段是

HTML词法、语法解析

拿到了HTML 后由于浏览器不知道HTML是什么这只是一堆"字符流"

于是浏览器需要将字符流解析程可悲浏览器识别的结构这种数据结构就是DOM树 需要做的事情分两步

词法分析：把字符流初步解析成我们可理解的"词"，学名叫token。 (像是HTML从一片白到高亮？)

语法分析：把开始结束标签配对、属性赋值好、父子关系连接好、构成DOM树。

以Chrome 为例

构成DOM树后也需要确定元素的布局才行于是就是开始解析CSS 生成一颗 CCSOM树然后将其合成为渲染树

google官方文档

渲染

有了渲染树，我们就可以进入“布局”阶段。（layout）

这个阶段浏览器会计算它们在设备视口内的确切位置和大小---这就是“布局”阶段，也称为“自动重排”。

布局流程的输出是一个“盒模型”，它会精确地捕获每个元素在视口内的确切位置和尺寸: 所有相对测量值都转换为屏幕上的绝对像素。

然后，可以将这些信息传递给最后一个阶段，将渲染树中的每个节点转换成屏幕上的实际像素。这一步通常称为“绘制”或“栅格化”。它涉及绘出文本、颜色、图像、边框和阴影。(Paint)

然后就是我们看到的网页了

重绘与重排

重绘replaint，屏幕的一部分重新绘制，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

重排reflow：意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化

其中在官方关于渲染性能的文档中提到:

不管用JavaScript 、 CSS或是网络动画，在实现视觉变化时，通常会改变浏览器的这几个阶段

JS / CSS > 样式 > 布局 > 绘制 > 合成

如果修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。

JS / CSS > 样式 > 绘制 > 合成

如果修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。

JS / CSS > 样式 > 合成

如果更改一个既不要布局也不要绘制的属性，则浏览器将跳到只执行合成。

这个最后的版本开销最小，最适合于应用生命周期中的高压力点，例如动画或滚动。

实践意义

避免频繁使用style 而是采用修改class方式（减少style步骤的时间）

用 transform 和 opacity 属性更改来实现动画因为这能直接跳过 Layout 和 Paint 步骤由合成器来单独处理目前只有两个属性符合条件这有一个前提需要在动画所在的元素上加一个合成器层也就是will-change: transform

至于其能优化原因是因为合成器会调用GPU加速具体见官方文档

对于 resize、scroll 等进行防抖/节流处理。

参考

输入url到页面发生了什么？

一份面试答案