【浏览器 URL】发生什么，有什么用

参考

• 细说浏览器输入URL后发生了什么 — 掘金
• What happens when you type a URL in the browser and press enter? — medium.com
• Behind the Screens: What happens when you type a URL in a browser — educative.io
• What happens when you type a URL in your browser and press ENTER? — codeburst.io
• skyline75489/what-happens-when-zh_CN — github
• 你不知道的浏览器页面渲染机制 — 掘金
• 前端开发的你应该知道的浏览器知识 — 掘金
• 《计算机网络》
• 《计算机网络：自顶向下》
• How the browser renders a web page? — DOM, CSSOM, and Rendering — medium.com
• 在浏览器输入 URL 回车之后发生了什么（超详细版）–知乎
• 彻底理解浏览器的缓存机制

1. URL输入

1.1 ctrl + e(或 ctrl + k) Chrome浏览器进入搜索

更多快捷键，如ctrl + enter可以自动补齐www.和.com

1.2 自动补全与候选栏

• 匹配到网址就会自动补全（不可关闭，除非删除历史与关闭同步）
• 匹配到搜索引擎地址就可以tab切换搜索引擎（出现tab切换提示时，输完整但没显示也不行）
• ctrl e会进入搜索模式，输入是完整网址也会搜索
• 候选栏中会匹配已经打开的窗口

1.3 判断搜索还是地址

输入时就已经判断，地址会有蓝色标记

2. DNS解析

输入地址（URL，Uniform Resource Locator）会进行DNS解析成IP，地址给人看，IP给机械看。

2.1 浏览器缓存

chrome chrome://net-internals/#dns，从这里可以清除浏览器dns缓存

2.2 系统hosts

• windows位置: C:\Windows\System32\drivers\etc （系统把文件放这，就是让你去改的）
• 不只是浏览器，其它软件使用这个
• 以前DNS服务器反应慢，自己把服务器地址存进去，就可以直接访问了。现在已经用不着了，倒是用来搞其它的事情了。

2.3 路由器缓存

• 都说有路由器缓存，但搜遍网络，并没有细说路由器关于dns缓存的。
• 《计算机网络：自顶向下方法 7th》只提到本地服务器有DNS缓存。
• 《计算机网络 谢希仁》提到域名服务器有高速缓存
• 而路由器缓存更相近的是MAC表缓存，其余的就是写硬件信息了

2.4 本地服务器缓存

ISP cache 即是本地信息服务提供商的DNS缓存，缓存时间一般是1个小时

2.5 ISP发起查询：根、顶级、权威

一般只提供到二级域名，三级域名就在域名购买平台那配置

前端开发的你应该知道的浏览器知识提到，还需要获取端口号。但默认访问80、443端口号，可能有特殊环境吧。

3. TCP连接

3.1 服务端通过socket，bind和listen准备好接受外来的连接，此时服务端状态为Listen

3.2 TCP三次握手

• SYN(synchronize)同步、ACK(acknowledge)告知已收到 、seq(sequence)序列号

3.3 SSL握手

1. 客户发送它支持的密码算法的列表，连 一个客户的不重数。
2. 从该列表中，服务器选择一种对称算法（例如 AES)、一种公钥算法（例如具有特定密钥长度的 RSA)和一种MAC算法 它把它的选择以及证书和一个服务器不重数返回给客户。
3. 客户验证该证书，提取服务器的公钥，生成一个前主密钥 (Pre-Master Secret，PMS), 用服务器的公钥加密该 PMS, 并将加密的 PMS 发送给服务器。
4. 使用相同的密钥导出函数（就像 SSL 标准定义的那样），客户和服务器独立地从 PMS 和不重数中计算出主密钥 (Master Secret, MS) 然后该 MS 被切片以生成两个密码和两个 MAC 密钥 此外，当选择的对称密码应用于 CBC (例如 3DES 或 AES), 则两个初始化向量（Initialization Vector, IV) 也从该 MS 获得，这两个 IV 分别用于该连接的两端。自此以后，客户和服务器之间发送的所有报文均被加密和鉴别（使用 MAC）。

4. HTTP请求

如果浏览器是 Google 出品的，它不会使用 HTTP 协议来获取页面信息，而是会与服务器端发送请求，商讨使用 SPDY 协议。

2015年9月，Google 宣布了计划，移除对SPDY的支持。HTTP/2标准于2015年5月以RFC 7540正式发表，HTTP/2的关键功能主要来自SPDY技术。多数主流浏览器已经在2015年底支持了该协议。

4.1 tcp建立后，立马就会发送一个get请求。

（TTFP，Time To First Byte 耗时最长）

4.2 后续请求是根据第一个请求返回的html文件

大多数资源直接返回浏览器缓存。

5. 页面渲染

5.0 预加载扫描器

浏览器构建DOM树过程占用了主线程，预加载扫描仪将解析可用的内容并请求高优先级资源，如CSS、JavaScript和web字体，而不必等解析到资源时去请求。

• JavaScript解析和执行顺序不重要时，可以添加async属性或defer属性

5.1 HTML渲染（DOM）

根据Content-Type: text/html; charset=UTF-8指定文本格式解析为DOM（Document Object Model）树（node组成的树状结构 tree-like structure of node objects），

• 当遇到一个CSS文件时，解析也可以继续进行
• <script>标签（特别是没有 async 或者 defer 属性）会阻塞渲染并停止HTML的解析

5.2 CSS渲染（CSSOM）

DOM构建完之后，浏览器读取所有css代码（外链、内嵌、行内、用户代理（浏览器）等），构建类似DOM的CSSOM（CSS Object Model）树。

• CSSOM不包括DOM中的元信息等不显示的节点
• CSS选择器的读取顺序是从右向左

5.3 渲染树（Render Tree）

DOM + CSSOM 再过滤一些不渲染的节点（display: none，或者 width: 0; height: 0;等等），就得到了渲染树。

• visibility:hidden 或 opacity:0 依旧会出现在渲染树中

5.4 渲染图像序列（Rendering Sequence）

布局（Layout operation）

计算每个元素大小与位置。

回流（reflow or browser reflow）

当页面滚动、浏览器窗口调整、或是操作DOM就会触发回流，导致重新计算布局。

绘制（Paint operation）

元素布局的多样性，绘制会分层进行。每一层元素的填色称为光栅化（rasterization），每层分别使用一个线程（thread）。

• Chrome开发工具中更多工具有个图层工具

• 将内容提升到GPU上的层（而不是CPU上的主线程）可以提高绘制和重新绘制性能。
• 有一些特定的属性和元素可以实例化一个层，包括和，任何CSS属性为opacity、3D转换、will-change的元素，还有一些其他元素。
• 层确实可以提高性能，但是它以内存管理为代价，因此不应作为web性能优化策略的一部分过度使用。

合成（Compositing operation）

将不同的层合成。

• 不是所有都会重新绘制与合成

浏览器还构建辅助设备用于分析和解释内容的辅助功能可访问性树（AOM Accessibility Object Model），类似于DOM的语义版本。屏幕阅读器（screen readers）无法访问内容。