掌握页面的加载过程

原创于 2022-08-13 22:39:07 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

WEB 专栏收录该内容

63 篇文章

订阅专栏

本文详细介绍了网页加载的过程，包括浏览器如何解析HTML元素、加载外部资源（如图片、CSS和JavaScript脚本）。文章还讨论了不同位置放置JavaScript脚本对页面渲染的影响，并提供了优化建议。

网页加载流程

当我们打开网址的时候，浏览器会从服务器中获取到 HTML 内容
浏览器获取到 HTML 内容后，就开始从上到下解析 HTML 的元素
<head>元素内容会先被解析，此时浏览器还没开始渲染页面
- 我们看到<head>元素里有用于描述页面元数据的<meta>元素，还有一些<link>元素涉及外部资源（如图片、CSS 样式等），此时浏览器会去获取这些外部资源。除此之外，我们还能看到<head>元素中还包含着不少的<script>元素，这些<script>元素通过src属性指向外部资源
当浏览器解析到这里时（步骤 3），会暂停解析并下载 JavaScript 脚本
当 JavaScript 脚本下载完成后，浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后，控制权会交回给渲染引擎，渲染引擎继续往下解析 HTML 页面
此时<body>元素内容开始被解析，浏览器开始渲染页面

在这个过程中，我们看到<head>中放置的<script>元素会阻塞页面的渲染过程：把 JavaScript 放在<head>里，意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面。
如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，用户体验会变得很糟糕
因此，对于对性能要求较高、需要快速将内容呈现给用户的网页，常常会将 JavaScript 脚本放在<body>的最后面。这样可以避免资源阻塞，页面得以迅速展示。我们还可以使用defer/async/preload等属性来标记<script>标签，来控制 JavaScript 的加载顺序

延迟加载的方式有哪些

js 的加载、解析和执行会阻塞页面的渲染过程，因此我们希望 js 脚本能够尽可能的延迟加载，提高页面的渲染速度。

几种方式是：

将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行
给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样
给 js 脚本添加 async属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行
动态创建 DOM 标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本