关于前端:浏览器输入一个URL到最终展示到页面上所经历的全过程

17次阅读

共计 929 个字符,预计需要花费 3 分钟才能阅读完成。

1、先判断强缓存是否命中。
如果之前申请过这个资源,先依据 HTTP 头部的 expires 或者 cache-control 字段判断是否命中,如果命名则间接获取缓存的资源,如果没命中就进行第二步。
2、DNS 查问
当浏览器输出一个 URL 时,先会去浏览器的 DNS 缓存,操作系统的 DNS 缓存和本地的 hosts 文件中查看是否有这个域名对应的 IP 地址。如果没有的话就须要进行 DNS 查问,分成迭代查问和递归查问两种。(迭代查问:向一个 DNS 服务器进行查问,它这边如果有这个域名的 IP 就间接返回,如果没有就返回另一个 DNS 服务器的 IP,让咱们去向另一个 DNS 服务器查问。递归查问:向一个 DNS 服务器进行查问,如果这个服务器没有对应的 ID,它会去向其余 DNS 服务器查问,直到查问到后果再进行返回。)
3、与服务器三次握手,建设 TCP 连贯。
第一次:客户端向服务器发送一个 SYN,示意申请建设连贯。
第二次:服务器向客户端发送一个 SYN 和一个 ACK,表示同意建设连贯。
第三次:客户端向服务端发送一个 ACK,示意确认建设连贯。
(如果是 HTTPS 协定,除了建设 TCP 连贯外还须要建设 SSL 连贯:服务器先将公钥和证书发送给客户端,客户端将本身的密钥通过公钥加密而后返回给服务器,服务器获取到后用本身的私钥进行解密,就获取到了客户端的密钥)
4、判断协商缓存是否命中。
如果是之前申请过的资源,并且强缓存没有命中的话,就进行协商缓存。通过 last-modefied 字段或者 e -tag 字段来判断资源是否批改过,如果服务器这边判断资源没有批改过就返回 304,如果批改过就返回新资源以及 200。
5、如果是 HTML 资源,就须要进行解析。
浏览器通过渲染引擎和 JS 引擎开始解析 HTML 网页, 结构 DOM 树。如果解析过程中遇到内部连贯的 CSS 文件就异步去下载。当 CSS 文件下载结束后,就拿来渲染 DOM 树,形成渲染树。渲染树实现后就进行两步:布局和绘制,布局就是给出每个 DOM 节点在浏览器窗口的精确地位,绘制就是遍历渲染树,将布局好的 DOM 节点绘制在页面上。如果在解析过程中遇到 <script> 标签,就阻塞 HTML 的加载解析,立即加载和执行 JS 代码。(次要为了避免 JS 批改 DOM 造成回流)。如果解析过程遇到图片,就异步去下载

正文完
 0