乐趣区

关于前端:计算机网络-第二章-在浏览器输入URL回车之后发生了什么

jiezi

1、输出 URL

  • 在地址栏输出网址后回车，浏览器对输出内容进行判断：查看输出内容是否为非法的 URL 连贯。

    • 非法，判断输出的 URL 是否残缺。如果不残缺，浏览器智能补齐地址前缀或者后缀。
    • 不非法，将输出内容作为搜寻条件，应用搜索引擎进行搜寻。

2、DNS 解析

  • 把 URL 地址解析为 ip 地址这一过程就是 DNS 解析。
  • 操作系统查看浏览器缓存和本地 hosts 文件是否有这个网址所对应的 ip 地址。有则实现 DNS 解析，否则进行下一步。
  • 查看本地 DNS 服务器（路由器）是否缓存有该网址对应的 ip 地址，没有则进行下一步。
  • 本地 DNS 服务器发送查问报文到根 DNS 服务器进行查问，实现域名解析。

1）优化：dns-prefetch

  • 当浏览器从（第三方）服务器申请资源时，必须先将该跨域域名解析为 IP 地址，而后浏览器能力发出请求。

  • dns-prefetch(DNS 预获取 ) 是前端网络性能优化的一种措施。它依据浏览器定义的规定，提前解析 之后可能会用到的域名，使解析后果 缓存到零碎缓存 中，缩短 DNS 解析工夫，进而进步网站的访问速度。

    <link rel="dns-prefetch" href="https://fonts.googleapis.com/">

3、TCP 三次握手

  • 当浏览器失去服务器的 ip 地址后，浏览器通过随机端口号向服务器 80 端口发动 TCP 连贯申请。
  • 客户端发送 SYN 包，示意申请连贯；
  • 服务端收到 SYN 包，回复 SYN+ACK 包，表示同意连贯；
  • 客户端收到 SYN+ACK 包，回复 ACK 包，示意胜利连贯。

4、发送 HTTP/HTTPS 申请

（1）HTTP

  • 建设连贯后，浏览器向服务器发送一个初始的 HTTP GET 申请，申请指标通常是一个 HTML 文件。

（2）HTTPS

  • 如果应用 HTTPS，会在 TCP 与 HTTP 之间增加一层协定作为加密及认证的服务，该层协定个别为 SSL 和 TLS 协定
  • SSL 协定和 TLS 协定的作用是认证客户端和服务器，加密数据避免数据中途被窃取，并且保护数据的完整性，确保数据在传输过程中不被扭转。

5、响应申请

  • 服务器收到申请后，发送一个 HTTP 响应报文，内容蕴含响应头和 HTML 注释。

6、页面渲染

  • link 不会阻塞渲染
  • script 可能会阻塞渲染

1）构建 DOM 树

  1. 解决 HTML 标记并构建 DOM 树。

2）构建 CSSOM 树

  1. 解决 CSS 标记并构建 CSSOM 树。
  2. 在匹配一个节点对应的 CSS 规定时，是依照从右到左的程序的，例如：div p {font-size :14px}会先寻找所有的 p 标签而后判断它的父元素是否为div。
  3. 所以咱们写 CSS 时，尽量用 id 和 class，千万不要适度层叠。

3）合并渲染树

  1. 将 DOM 树和 CSSOM 树合并成一个渲染树。
  2. 渲染树会疏忽那些不须要渲染的节点，比方设置了 display:none 的节点。

4）布局与绘制

  1. 依据渲染树布局，计算每个节点的几何信息。

5）回流与重绘

  • display:none 会触发回流，而 visibility:hidden 只会触发重绘。

（1）回流

  1. 当浏览器发现某个局部发现变动影响了布局时，须要倒回去从新渲染，会从 html 标签开始递归往下，从新计算地位和大小。
  2. reflow 根本是无奈防止的，因为当你滑动一下鼠标、resize 窗口，页面就会产生变动。

（2）重绘

  • 扭转了某个元素的背景色、文字色彩等等不会影响四周元素的地位变动时，就会产生重绘。
  • 每次重绘后，浏览器还须要合并渲染层并输入到屏幕上。
  • 回流的老本要比重绘高很多，所以咱们应该尽量避免产生回流。

7）优化

（1）首屏渲染 FCP

  • 第一次渲染的工夫点，产生在 head 标签加载实现后。
  • 将要害款式放在 head 标签中。
  • 尽量把 script 标签放在 body 标签开端，因为 script 可能会阻塞渲染。

7、断开连接

  • 实现渲染后就能够断开 TCP 连贯了。
  • 然而当初浏览器为了缩小申请耗时，默认开启了长久连贯，只有标签页敞开的时候，TCP 连贯才敞开。
退出移动版