关于浏览器:从输入URL到页面呈现超详细

浏览器监听用户输出的信息并尝试匹配你想要拜访的网址或关键词。以掘金为例，在浏览器地址栏中输出信息，而后回车，浏览器会进行以下判断：

判断是否是非法的 URL 链接；
是。持续判断 URL 是否残缺，如果不残缺，浏览器可能会对域进行猜想，对输出的内容增加前缀、后缀、或者前后缀来补全 URL，常见的 URL 通产包含：
- 协定：如 http https websocket
- 域名（主机名）：可能是 IP 地址，也可能是域名。域名可能由根域名、顶级域名、二级域名等组成，域名的叫法是依据域名从右向左以 . 分隔进行划分，比方：juejin.cn.，. 代表根域名，.cn 代表顶级域名，juejin.cn 代表二级域名（也就是主机名）
- 端口号：http 协定默认端口号为 80，https 协定默认端口号为 443。浏览器会自动隐藏默认端口号。
- 门路：以 / 划分每一层目录，比方：/web/user
- 查问：以 ? 开始，以 & 分隔键值对，如：?username="张三"&age=16
- 哈希：以 # 开始，利用它可实现定位到以后页面的具体位置
否。浏览器将输出的内容作为搜寻条件，应用用户设置的默认搜索引擎进行查问并返回后果

浏览器过程通过过程间通信（IPC）将 URL 申请发送给网络过程，网络过程接管到 URL 申请后，会发动真正的申请。但在申请之前，网络过程会查找本地是否缓存了该资源。如果有缓存资源，那么间接返回资源给浏览器过程。首选，查找强缓存资源，如果有则查看强缓存资源是否过期，没过期间接应用该资源，过期则从新向服务器申请资源。强缓存波及到两个字段：

Expires。即过期工夫 （Expires=Wed, 21 Oct 2015 07:28:00 GMT），HTTP/1.0 采纳此字段，它存在于服务器返回的响应头中，告知浏览器在过期工夫范畴内间接应用缓存资源。但它有个很大的毛病，当服务器和客户端的工夫不统一时，那么服务器返回的工夫是不精确的，因而，HTTP/1.1 摈弃了这个字段而采纳了 Cache-Control 字段

Cache-Control。即过期时长（Cache-Control:max-age=3600），HTTP/1.1 采纳此字段，它也存在于服务器返回的响应头中，告知浏览器在过期时长范畴内间接应用缓存资源。它还能够设置其余指令，上面列举一些要害指令：
- public。浏览器和代理服务器都能够缓存资源
- private。只能浏览器缓存资源，代理服务器不能缓存资源
- no-cache。跳过强缓存阶段。向服务器发送申请，进入协商缓存阶段
- no-store。不缓存
- s-maxage。代理服务器的缓存工夫
- must-revalidate。一旦缓存过期，就必须回到源服务器验证

扩大：

怎么设置强缓存？能够在服务端代码中设置 Cache-Control 字段以及他对应的值；
强缓存资源缓存在哪儿？memory cache 或 disk cache，也就是内存或硬盘中，个别会将图片、脚本文件、字体文件缓存在 memory cache 中；将款式文件缓存在 disk cache 中。
拜访缓存的优先级？遵循三级缓存原理：先在 memory cache 中找，有则间接应用；没有再去 disk cache 中找，有则指间接应用；没有就进行网络申请，将申请返回的资源依据响应头字段信息进行缓存。

如果在强缓存中没有找到所需资源，那么间接进入网络申请流程。通常状况下，咱们在浏览器的地址栏中输出的都是域名，而在网络通信中是以 IP 地址确定目标主机的，所以还得通过域名找到对应的 IP 地址。
DNS 又是什么？DNS 全名是 domain name system（域名零碎），它将域名和 IP 地址映射关系保留在一个分布式数据库中，所以咱们能够通过 DNS 找到对应的 IP，而这个查找的过程就是 DNS 域名解析。上面以 juejin.cn.来剖析域名的解析过程：

浏览器 DNS 缓存。浏览器从 URL 中提取出主机名，从浏览器 DNS 中查找是否有缓存记录，有则间接应用缓存 IP，实现解析；
hosts 文件。从本机的 hosts 文件中查找是否有缓存记录，有则返回对应 IP，实现解析；
本地 DNS 服务器。向本地 DNS 服务器发送查问申请，有则本地 DNS 服务器将记录作为响应返回给主机，实现解析；
ISP（互联网服务提供商）DNS 缓存。本地 DNS 服务器将查问申请转发给 ISP 提供的 DNS 服务器，有则将记录作为响应返回给本地 DNS 服务器，本地 DNS 服务器返回给主机，实现解析；
根域名服务器。依据本地 DNS 服务器的设置（是否设置转发器）进行查问，若是未用转发模式，本地 DNS 就把申请发至 13 台根域名服务器，根域名服务器收到申请后会判断这个域名（.cn）是谁来受权治理，并会返回一个负责该顶级域名服务器的一个 IP。若是转发模式，该 DNS 服务器就会把申请转发至上一级 DNS 服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根域名服务器或将申请转至上下级，以此循环；
顶级域名服务器。从根域名服务器失去顶级域名服务器地址后，本地 DNS 服务器向顶级域名服务器发送查问申请，收到本地域名服务器申请后会查看区域文件记录，有则将记录作为响应返回给本地 DNS 服务器，由本地 DNS 服务器返回给主机，实现解析。如果本人无奈解析，它就会找一个治理（.cn）域的二级域名服务器 IP 返回给本地 DNS 服务器；
二级域名服务器。从顶级域名服务器失去二级域名服务器地址后，本地 DNS 服务器向二级域名服务器发送查问申请，二级域名服务器收到本地域名服务器申请后会查看区域文件记录，若有则将记录返回给本地 DNS 服务器，实现解析。到这一步还是没能实现解析，那域名可能存在谬误而产生异样。
递归查问：
客户端向本地 DNS 服务器发动查问申请，期待本地域名服务器返回后果。本地 DNS 服务器若无奈解析，本人会以 DNS 客户机的身份向其余域名服务器发动查问申请，直到将查问后果返回给客户端为止。

迭代查问：本地 DNS 服务器首先向根域名服务器发动查问申请，若根域名没有找到对应记录就将下一个指标域名服务器的 IP 返回给本地 DNS 服务器（也称为根提醒），直到将查问后果返回给客户端为止。

建设连贯遵循三次握手准则。三次握手的次要目标就是确认单方的接管能力和发送能力是否失常、指定本人的初始化序列号为前面的可靠性传送做筹备。本质上就是连贯服务器指定端口，建设 TCP 连贯，并同步连贯单方的序列号和确认号，替换 TCP 窗口大小信息。当初，客户端处于 Closed 状态，服务端处于 Listen 状态

客户端给服务端收回一个连贯 SYN 报文，并指明 同步位 SYN=1，初始序号 seq=x，而后客户端处于 SYN_SEND 状态；
服务器收到客户端的 SYN 报文后，会以本人的 SYN 报文 （SYN=1，ACK=1） 作为应答，并且指定本人的初始化序列号 seq=y，同时会把客户端的 seq + 1 = x + 1 作为 ack 的值 （ack=x+1），示意本人曾经收到客户端的 SYN 报文，此时服务器处于 SYN_REVD 状态；
客户端收到 SYN 报文 后，会发送一个 ACK 报文 （ACK=1） 作为应答，并且之地当本人的序列号 seq=x+1，同时会把服务器的 seq + 1 = y + 1 作为 ack 的值 （ack=y+1），示意本人曾经收到服务器的 SYN 报文，此时客户端处于 ESTABLISHED 状态，服务器收到 ACK 报文之后，也处于 ESTABLISHED 状态，此时，单方已建设起了连贯。

客服端会将申请行、申请头，申请体的相应信息发送给服务器。

服务器收到申请后进行逻辑解决，并依据处理结果返回响应数据（响应行、响应头、响应体等）。

这里提一下 HTTP 数据传输过程中的优化策略。在 HTTP 数据传输的过程中会将报文进行拆包（将报文拆分成小的数据包），顺次传输给接管方，接管方每次接管到数据包后必须向发送方确认，如果发送方没有收到这个确认的音讯，就断定为数据包失落，并从新发送该数据包，接管方须要实现组包（将每次接管的数据包按程序组装为残缺的数据包）从而取得残缺的数据包。

数据传输结束后还要依据 Connection 字段判断是否须要断开连接，若申请头或响应头中蕴含 Connection: Keep-Alive 示意长久连贯，之后申请同一站点的资源会复用此连贯；不满足上述情况就须要断开连接，断开连接遵循四次挥手准则。断开连接这个动作能够由客户端或者服务器任一方发动，此时，客户端和服务器都处于 ESTABLISHED 状态，假如由客户端发动敞开申请，则流程如下：

客户端发动一个连贯开释 FIN 报文段 （FIN=1），报文中指定一个序列号 （seq=u），并进行发送数据，敞开 TCP 连贯。客户端进入 FIN_WAIT1（终止期待 1） 状态，期待服务器的确认；
服务器收到连贯开释的 FIN 报文段后，会收回 ACK 报文 （ACK=1），并指定本人的序列号 （seq=v），同时会把客户端的 seq + 1 = u + 1 作为 ack 的值 （ack=u+1），表明曾经收到客户端的报文了。服务端进入 CLOSE_WAIT（敞开期待） 状态，此时的 TCP 处于半敞开状态，客户端到服务端的连贯开释。客户端收到服务端的确认后，进入 FIN_WAIT2（终止期待 2） 状态，期待服务端收回的连贯开释报文段；
若此时服务器曾经没有数据须要发送给客户端了，服务器就会收回连贯开释报文段 （FIN=1, ACK=1, 序列号 seq=w, 确认号 ack=u+1），服务端进入 LAST_ACK（最初确认） 状态，期待客户端的确认；
客户端收到服务端的连贯开释报文后，对此收回确认报文段 （ACK=1, seq=u+1, ack=w+1），客户端进入 TIME_WAIT（工夫期待） 状态。此时 TCP 未开释掉，须要通过工夫期待计时器设置的工夫 2MSL 后，客户端才进入 CLOSED 状态。

网络过程接管到响应数据后开始解析响应头，解析到响应状态码会依据不同的码值进行解决，上面列举一下罕用的状态码：

200 OK。申请解决胜利，响应数据放在响应体中。
301 Moved Permanently。永恒重定向，如果以前的域名地址不再应用，须要更换新的域名地址来拜访资源，能够将响应状态码置为 301，浏览器默认会做缓存优化，再次拜访原地址时会主动拜访重定向的那个地址
302 Found。长期重定向，若只是临时不应用原地址能够返回 302 状态码。如：网站正在保护，那么能够在以后域给出一个解释页面来告诉访问者
304 Not Modified。协商缓存。浏览器首次申请资源时，服务器会将 Last-Modified 和 ETag 两个字段放在响应头中返回给浏览器。
- Last-Modified。即资源的最初批改工夫，当浏览器第二次向服务器发动申请时，会在申请头中携带 If-Modified-Since 字段，服务器拿到申请头中的 If-Modified-Since 字段后会将字段值与以后服务器中该资源的Last-Modified 字段值比拟。若 If-Modified-Since 的值小于服务器中 Last-Modified 的值，表明服务器上的资源更新过，服务器会更新 Last-Modified 的值并将新的资源返回给浏览器，响应状态码为 200；否则返回 304 状态码，通知浏览器间接应用缓存资源；
- Etag。即资源最初批改的内容，依据文件内容生成 hash 值。当浏览器第二次向服务器发动申请时，会在申请头中携带 If-None-Match 字段，服务器拿到申请头中的 If-None-Match 字段后会将字段值与以后服务器中该资源的 Etag 相比拟，若两值不相等，服务器将更新 Etag 的值并返回新的资源给浏览器，响应状态码为 200；否则返回 304 状态码，通知浏览器间接应用缓存资源。当 Etag 与 Last-Modified 同时存在时，先依据 Etag 判断，再依据 Last-Modified 判断返回什么状态码。
400 Bad Request。申请参数有误
401。身份认证
403 Forbidden。服务器禁止拜访
404 Not Found。服务器未找到相应资源
500 Internal Server Error。服务器出错了
503 Service Unavailable。服务器忙碌，临时无奈解决响应服务
解析到响应数据类型会判断 Content-Type 字段，它会通知浏览器服务器返回的响应体数据是什么类型，而后浏览器会依据它的值来决定如何显示响应体的内容。如果值是 application/octet-stream 字节流类型，通常会按下载类型来解决；如果值是 text/html 类型则筹备渲染过程。

通常状况下关上一个 Tab 页就要启动一个渲染过程，但这里有个 同一站点（same-site）的特例，属于同一站点的 Tab 页应用同一个渲染过程。同一站点的个性包含：

根域名加上协定雷同

属于同一个根域名下的所有子域名加上不同的端口号

// 同一站点
https://time.geekbang.org
https://www.geekbang.org
https://www.geekbang.org:8080

渲染过程筹备好后进入提交文档阶段。流程如下：

首先当浏览器过程接管到网络过程的响应头数据之后，便向渲染过程发动“提交文档”的音讯。
渲染过程接管到“提交文档”的音讯后，会和网络过程建设传输数据的“管道”。
等文档数据传输实现之后，渲染过程会返回“确认提交”的音讯给浏览器过程。
浏览器过程在收到“确认提交”的音讯后，会更新浏览器界面状态，包含了平安状态、地址栏的 URL、后退后退的历史状态，并更新 Web 页面。

浏览器无奈间接了解和应用 HTML，所以须要将 HTML 转换为浏览器可能了解的 DOM 树结构。可在浏览器的控制台输出 document 进行查看。具体转换过程如下：

转换（字节 -> 字符）：浏览器从磁盘或网络读取 HTML 的原始字节，并依据文件的指定编码（如：UTF-8）把它们转换成各个字符
令牌化（字符 -> 令牌）：浏览器将字符转换为合乎 W3C 规范的令牌（如：<html> <body>），以及其余尖括号内的字符串。每个令牌都具备非凡含意和一组规定
词法剖析（令牌 -> 节点）：收回的令牌转换成定义其属性和规定的“对象”
DOM 构建（节点 ->DOM）：因为 html 标记定义不同标记之间的关系，创立的对象链接在一个树数据结构内，此构造也会捕捉原始标记中定义的父项 - 子项关系：HTML 对象是 body 对象的父项，body是 paragraph 对象的父项，依此类推。

在解析 HTML 文件的过程中，可能中途须要网络过程去下载脚本文件以及款式文件，那么就有一个阻塞 DOM 解析以及渲染的问题，具体可参考原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的这篇文章，把论断贴一下：

CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。
JS 阻塞 DOM 解析，但浏览器会 ” 偷看 ”DOM，事后下载相干资源。
浏览器遇到 <script> 且没有 defer 或 async 属性的标签时，会触发页面渲染，如果后面 CSS 资源尚未加载结束，浏览器就会期待它加载结束再执行脚本。

款式计算

把 CSS 转换为浏览器可能了解的构造：浏览器无奈间接了解 CSS 款式，所以当渲染引擎接管到 CSS 文本时，会执行转换操作，将 CSS 文本转换为 styleSheets。可在浏览器的控制台输出 document.styleSheets 进行查看。具体转换过程如下：
转换样式表中的属性值，使其标准化：比方，在编写代码时应用的是十六进制的色彩，须要转换成 rgb 的格局，李兵老师的课程有说把 em 单位转为 px 单位，bold 转为 700，我关上 Chrome 的开发者工具看并没有转，这里跟老师的形容有点出入。
计算出 DOM 树中节点的款式：次要通过继承规定和层叠规定来进行计算。计算实现之后输入每个 DOM 节点的款式，并保留到 ComputedStyle 的构造内。
继承规定：子节点如果没有设置 font-size、color、font-family 几个属性的款式，那么能够继承父节点的款式，如果父节点也没有设置其款式，那么默认应用 UserAgent 款式。留神：只有可继承属性能力继承。
层叠规定：它是一个定义了如何合并来自多个源的属性值的算法。

计算出 DOM 树中可见元素的几何地位。具体过程如下：

创立布局树：遍历 DOM 树中所有可见节点，生成一棵只蕴含可见节点的布局树。不可见的节点会被疏忽，不会呈现在布局树上，不可见节点包含：1. 不会渲染输入的节点（script/link/meta/head），2. 通过 CSS 暗藏的节点（display: none）会被疏忽掉；
布局计算：计算布局树节点的几何地位，并将计算出的信息保留到布局树中。

因为页面中有很多简单的成果，如一些简单的 3D 变换、页面滚动，或者应用 z-index 做 z 轴排序等，为了更加不便地实现这些成果，渲染引擎还须要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。通常状况下，并不是布局树中每个节点都蕴含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。这些图层通过合成变为最终的页面。渲染引擎为特定节点创立独自的图层的条件包含：

领有层叠上下文属性的元素会被晋升为独自的一层。以下是层叠上下文属性示意图：
须要剪裁（clip）的中央也会被创立为图层。当一个元素设置了固定宽高而外面的内容超出了这个元素，那么超出的局部会被剪裁，渲染引擎会创立一个独自的图层来寄存被剪裁的内容。

构建完图层树之后，渲染引擎会对图层树中的每个图层进行绘制。渲染引擎会把一个图层的绘制拆分成很多小的绘制指令，而后再把这些指令依照程序组成一个待绘制列表。

绘制列表筹备好之后，主线程会把绘制列表提交给合成线程，由合成线程来实现具体的绘制操作。先理解一下什么是视口（viewport）？视口就是屏幕上页面的可见区域。随着业务的复杂性，某些状况下图层可能会很长，而用户通过视口只能看见页面的一小部分，如果一次性绘制图层会产生很大的开销，所以合成线程会将图层划分为图块（tile），图块大小通常是 256x256 或者 512x512。

合成线程会依照视口左近的图块来优先生成位图，理论生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。栅格化过程都会应用 GPU 来减速生成，应用 GPU 生成位图的过程叫疾速栅格化，生成的位图被保留在 GPU 内存中。

所有的图层进行光栅化之后，合成线程就会生成一个绘制图块的 DrawQuad 命令，合成线程将这个命令发给浏览器过程，由浏览器过程中的 viz 组件接管 DrawQuad 命令，它会依据命令将页面内容绘制到内存中，最初将内存中的内容显示到屏幕上。

浏览器工作原理与实际
实际这一次, 彻底搞懂浏览器缓存机制

关于浏览器:从输入URL到页面呈现超详细

解析地址栏中的信息

查找强缓存

DNS 域名解析

建设 TCP 连贯

客户端发动申请，服务器解决申请

敞开 TCP 连贯

解决响应信息

筹备渲染过程

提交文档阶段

构建 DOM 树

款式计算

布局阶段

分层

图层绘制

栅格化（raster）

合成与显示

参考文章