从输入URL到网页显示的完整过程

是洋柿子啊

2022-06-22 110 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

从输入URL到网页显示的完整过程

这个题目在面试题圈子里面都已经被刷烂了，无论是视频教程、文章、还是分享都是多如牛毛。不管怎么样，本章都要好好的捋一捋这一题，我们分成三个步骤：

网络请求
解析
渲染

网络请求

DNS 查询(得到IP)，建立 TCP 连接(三次握手)
浏览器发起 HTTP 请求
收到请求响应，得到 HTML 源代码
- 这时候没有页面，只有源码
- 继续请求静态资源
  - 解析 HTML 过程中，遇到静态资源还会继续发起网络请求
  - JS CSS 图片视频等
  - 静态资源也可能是强缓存，此时不必请求

解析

在我们得到 js css 这些都是字符串吧，得到字符串之后要干嘛？结构化数据

html css 等源代码是字符串形式，需要解析为特定的数据结构，才能被后续使用。那么，其实解析是一个什么过程呢？就是一个非常重要的结构化dom树的过程

解析过程：

Html 构建 DOM 树
CSS 构建 CSSOM 树（style tree）
两者结合，形成 render tree

ps: 解析过程很复杂的，为什么复杂呢？举几个例子：

CSS 可能来自 <style>、<link>

JS 可能是内嵌、或外链的，甚至有的还有 defer、async 的逻辑

imag 可能是内嵌的，也可能是外链的

优化解析

综上，为了避免不必要的情况，要遵守以下规则

css 放在 <head>中，不要异步加载 css
js 放在 body 最下面，合理使用 defer、async，不要中途加载、执行 js
<img> 等媒体文件尽量限制尺寸，防止渲染时重绘页面

渲染

render tree 绘制到页面：render tree就是上一步的产物。

计算各个DOM的尺寸，定位，最后绘制到页面
遇到 js 可能会执行（参考defer、async）

绘制完成之后，还要继续执行异步加载的资源

异步的 css ，重新渲染页面
异步的 js ，执行（可能重新渲染页面）
异步加载的图片等，可能重新渲染页面（根据图片尺寸）

最后页面渲染完成。

总结

网络请求
- DNS 解析
- TCP 连接
- HTTP 请求和响应
解析
- DOM 树
- render tree
渲染页面
- 可能重绘页面

友情链接：