网页资源阻塞浏览器加载的原理示例解析

2024-09-27 04:11:10

正文

一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天来一探究竟。

如何用 Chrome 定制网络加载速度？
图片/视频/字体会阻塞页面加载吗？
CSS 是如何阻塞页面加载的？
JS 又是如何阻塞页面加载的？
JS 一定会阻塞 DOM 加载吗？
defer 和 async 是什么？又有何特点？
动态脚本会造成阻塞吗？
阻塞是怎么和 DOMContentLoaded 与 onload 扯上关系的？

测试前环境准备

测试之前需要对浏览器下载资源的速度进行控制，将它重新设置为 50kb/s，操作方式：

打开 Chrome 开发者工具；
在 Network 面板下找到 Disable cache 右侧的下拉列表，然后选择 Add 添加自定义节流配置；
添加一个下载速度为 50kb/s 的配置；
最后在第二步骤中的下拉列表选择刚刚配置的选项即可；
注意：如果当前选择的自定义选项被修改了，则需要切换到别的选项再切回来才可生效。

为什么是这个速度？因为如下的一些资源，比如图片、样式或者脚本体积都是 50kb 的好几倍，方便测试。

图片会造成阻塞吗？

直接写个示例来看下结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            console.log('DOMContentLoaded')
        })
        window.onload = function() {
            console.log('onload')
        }
    </script>
</head>
<body>
    <h1>我是 h1 标签</h1>
    <img src="https://xxx.oss-cn-shenzhen.aliyuncs.com/images/flow.png" />
    <h2>我是 h2 标签</h2>
</body>
</html>

上面这张图片的大小大概是 200kb，当把网络下载速度限制成 50kb/s，打开该页面，可以看到如下结果：当 h1 和 h2 标签渲染出来且打印了 DOMContentLoaded 的时候，此时图片还在加载中，这就说明了图片并不会阻塞 DOM 的加载，更加不会阻塞页面渲染；当图片加载完成的时候，会打印 onload，说明图片延迟了 onload 事件的触发。
视频、字体和图片其实是一样的，也不会阻塞 DOM 的加载和渲染。

CSS 加载阻塞

同样的，还是直接用代码来测试 CSS 加载对页面阻塞的情况，因为下面代码加载的 bootstrap.css 是 192kb 的，所以理论上下载它应该需要花费 3 到 4 秒左右。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
</head>
<body>
    <h1>我是 h1 标签</h1>
</body>
</html>

测试过程如下：

在 Elements 面板下，选中 h1 这个标签，然后按 delete 键将它从 DOM 中删掉，从而模拟首次加载；
刷新浏览器，马上 Elements 面板下就加载出 h1 标签，继续加载 3 到 4 秒后（此时正在加载 bootstrap.css），页面出现 我是 h1 标签 字样，此时页面已经渲染完成。

从而得出结论：

bootstrap.css 还没加载完成，而 DOM 中就已经出现 h1 标签，说明 CSS 不会阻塞 DOM 的解析；
页面直到 bootstrap.css 加载完成才出现 h1 里的文案，说明 CSS 会阻塞 DOM 的渲染。

为什么是这个结论呢？试想一下页面渲染的流程就知道了。浏览器首先解析 HTML 生成 DOM 树，解析 CSS 生成 CSSOM 树，然后 DOM 树和 CSSOM 树进行合成生成渲染树，通过渲染树进行布局并且计算每个节点信息，绘制页面。

可以说解析 DOM 和解析 CSS 其实是并列进行的，既然是并列进行的，那 CSS 和 DOM 就不会互相影响了，这和结论一相符；另外渲染页面一定是在得到 CSSOM 树之后进行的，这和结论二相符。
CSS 一定会阻塞 DOM 的渲染嘛？答案是否定的，当把外链样式放到 <body> 最尾部去加载：

<body>
    <h1>我是 h1 标签</h1>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
</body>

此时刷新浏览器，页面上会马上显示出 我是 h1 标签 字样，当 3 到 4 秒过后样式加载完成的时会造成二次渲染，页面重新渲染出该字样，这就说明 CSS 阻塞 DOM 的渲染只阻塞定义在 CSS 后面的 DOM。二次渲染会对用户造成不好的体验且加重了浏览器的负担，所以这也就是为什么需要把外链样式提前到 <head> 里加载的原因。

CSS 会阻塞后面 JS 的执行吗？

CSS 阻塞了后面 DOM 的渲染，那它会阻塞 JS 的执行嘛？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
</head>
<body>
    <h1>我是 h1 标签</h1>
    <script>
        console.log('888')
    </script>
</body>
</html>

刷新浏览器的时候可以看到，浏览器 Console 面板下没有打印内容，而当样式加载完成的时候打印了 888，这就说明 CSS 会阻塞定义在其之后 JS 的执行。

为什么会这样呢？试想一下，如果 JS 里执行的操作需要获取当前 h1 标签的样式，而由于样式没加载完成，所以就无法得到想要的结果，从而证明了 CSS 需要阻塞定义在其之后 JS 的执行。

JS 加载阻塞

CSS 会阻塞 DOM 的渲染和阻塞定义在其之后的 JS 的执行，那 JS 加载会对渲染过程造成什么影响呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <h1>我是 h1 标签</h1>
</body>
</html>

首先删除页面中已经存在的 h1 标签（如果存在的话），仔细观察 Elements 面板，当刷新浏览器的时候，一直未加载出 h1 标签（期间页面一直白屏），直到 JS 加载完成后，DOM 中才出现，这足以说明了 JS 会阻塞定义在其之后的 DOM 的加载，所以应该将外部 JS 放到 <body> 的最尾部去加载，减少页面加载白屏时间。

defer 和 async

JS 一定会阻塞定义在其之后的 DOM 的加载吗？来测试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <script async src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <h1>我是 h1 标签</h1>
</body>
</html>

上面这段代码的测试结果是当页面中显示出 h1 标签的时候，脚本还没有加载完成，这就说明了 async 脚本不会阻塞 DOM 的加载；同理可以用同样的方式测试 defer，也会得到这个结论。

现在知道了通过 defer 或者 async 方式加载 JS 的时候，它是不会阻塞 DOM 加载的。知道 defer 和 async 是什么吗？它们两者有什么区别呢？

回答这些疑问之前，先来看下当浏览器解析 HTML 遇到 script 标签的时候会发生什么？

暂停解析 DOM；
执行 script 里的脚本，如果该 script 是外链，则会先下载它，下载完成后立刻执行；
执行完成后继续解析剩余 DOM。

上面这是解析时遇到一个正常的外链的情况，正常外链的下载和执行都会阻塞页面解析；而如果外链是通过 defer 或者 async 加载的时候又会是如何呢？

defer 特点

对于 defer 的 script，浏览器会继续解析 html，且同时并行下载脚本，等 DOM 构建完成后，才会开始执行脚本，所以它不会造成阻塞；
defer 脚本下载完成后，执行时间一定是 DOMContentLoaded 事件触发之前执行；
多个 defer 的脚本执行顺序严格按照定义顺序进行，而不是先下载好的先执行；

async 特点

对于 async 的 script，浏览器会继续解析 html，且同时并行下载脚本，一旦脚本下载完成会立刻执行；和 defer 一样，它在下载的时候也不会造成阻塞，但是如果它下载完成后 DOM 还没解析完成，则执行脚本的时候是会阻塞解析的；
async 脚本的执行和 DOMContentLoaded 的触发顺序无法明确谁先谁后，因为脚本可能在 DOM 构建完成时还没下载完，也可能早就下载好了；
多个 async，按照谁先下载完成谁先执行的原则进行，所以当它们之间有顺序依赖的时候特别容易出错。 :::info defer 和 async 都只能用于外部脚本，如果 script 没有 src 属性，则会忽略它们。 :::

动态脚本会造成阻塞吗？

对于如下这段代码，当刷新浏览器的时候会发现页面上马上显示出 我是 h1 标签，而过几秒后才加载完动态插入的脚本，所以可以得出结论：动态插入的脚本不会阻塞页面解析。

<!-- 省略了部分内容 -->
<script>
    function loadScript(src) {
        let script = document.createElement('script')
        script.src = src
        document.body.append(script)
    }
    loadScript('https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js')
</script>
<h1>我是 h1 标签</h1>

动态插入的脚本在加载完成后会立即执行，这和 async 一致，所以如果需要保证多个插入的动态脚本的执行顺序，则可以设置 script.async = false，此时动态脚本的执行顺序将按照插入顺序执行和 defer 一样。

DOMContentLoaded 和 onload

在浏览器中加载资源涉及到 2 个事件，分别是 DOMContentLoaded 和 onload，那么它们之间有什么区别呢？

onload：当页面所有资源（包括 CSS、JS、图片、字体、视频等）都加载完成才触发，而且它是绑定到 window 对象上；
DOMContentLoaded：当 HTML 已经完成解析，并且构建出了 DOM，但此时外部资源比如样式和脚本可能还没加载完成，并且该事件需要绑定到 document 对象上；

一定看到了上面的可能二字，为什么当 DOMContentLoaded 触发的时候样式和脚本是可能还没加载完成呢？

DOMContentLoaded 遇到脚本

当浏览器处理一个 HTML 文档，并在文档中遇到 <script> 标签时，就会在继续构建 DOM 之前运行它。这是一种防范措施，因为脚本可能想要修改 DOM，甚至对其执行 document.write 操作，所以 DOMContentLoaded 必须等待脚本执行结束后才触发。以下这段代码验证了这个结论：当脚本加载完成的时候，Console 面板下才会打印出 DOMContentLoaded。

<script>
    document.addEventListener('DOMContentLoaded', () => {
        console.log('DOMContentLoaded')
    })
</script>
<h1>我是 h1 标签</h1>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

那么一定是脚本执行完成后才会触发 DOMContentLoaded 嘛？答案也是否定的，有两个例外，对于 async 脚本和动态脚本是不会阻塞 DOMContentLoaded 触发的。

DOMContentLoaded 遇到样式

前面已经介绍到 CSS 是不会阻塞 DOM 的解析的，所以理论上 DOMContentLoaded 应该不会等到外部样式的加载完成后才触发，这么分析是对的，用下面代码进行测试一翻就知道了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
        console.log('DOMContentLoaded')
    })
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet"/>
</head>
<body>
    <h1>我是 h1 标签</h1>
</body>
</html>

测试结果：当样式还没加载完成的时候，就已经打印出 DOMContentLoaded，这和分析的结果是一致的。但是一定是这样嘛？显然不一定，这里有个小坑，（基于上面代码）在样式后面再加上 <script> 标签的时候，会发现只有等样式加载完成了才会打印出 DOMContentLoaded，为什么会这样呢？正是因为 <script> 会阻塞 DOMContentLoaded 的触发，所以当外部样式后面有脚本（**async**** 脚本和动态脚本除外）的时候，外部样式就会阻塞 **DOMContentLoaded** 的触发**。

<head>
<!-- 只显示了部分内容 -->
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet"/>
<script></script>
</head>

以上就是网页资源阻塞浏览器加载的原理示例解析的详细内容，更多关于网页资源阻塞浏览器加载的资料请关注我们其它相关文章！

让浏览器非阻塞加载javascript的几种方法小结

浏览器为了确保正确执行脚本和呈现布局在浏览器加载和执行完成它之前会完全阻塞页面后续内容的呈现和其他资源的加载. 在页面的加载过程中如果可以做到内容的逐步呈现,对于良好的用户体验来说是非常重要的.通常我们也会在wondow对象的onload事件处理函数中做一些事情,但由于脚本阻塞加载和呈现的特性这一方面增加了页面载入时间推迟了onload事件的触发,另一方面也延迟了用户所期待的反馈.这就需要我们使用一些方法来让浏览器以非阻塞的方式加载外部脚本. 一使用XMLHttpRequest对象异步方式
超级实用的几款浏览器插件,打开丰富资源大门

目录一.CSDN浏览器助手二.ADB(拦广告) 三.Simple Allow Copy(无障碍复制网页文字) 四.DARK READER(夜间模式) 五.Screen Recorder(视频录制) 六.global speed(视频倍速播放) 补充:插件的下载和安装一.CSDN浏览器助手你们的谷歌浏览器打开是不是这个样子的? 而我的谷歌浏览器打开的界面是这样的: 这是因为我安装了CSDN浏览器助手这个插件,然后修改了壁纸,这个壁纸是我自己弄的,如果喜欢的话私信我拿原图,当然你也可以去网上
Selenium 模拟浏览器动态加载页面的实现方法

相信爬取大公司的数据时,常常会遇到页面信息动态加载的问题, 如果仅仅使用content = urllib2.urlopen(URL).read(),估计信息是获取不全的,这时候就需要模拟浏览器加载页面的过程, selenium提供了方便的方法,我也是菜鸟,试了很多种方式,下面提供觉得最靠谱的(已经证明对于爬取新浪微博的topic.twitter under topic完全没问题). 至于下面的browser变量是什么,看前面的几篇文章. 首先是请求对应的URL: right_URL = URL.
JS中使用gulp实现压缩文件及浏览器热加载功能

gulp类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 一.安装gulp 首先,你要安装过nodejs,如果没有安装过的同学请自行下载. 先再命令行里输入 npm install gulp -g 下载gulp 二.创建gulp项目创建一个你需要项目文件夹,然后在根目录输入 npm init (npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息.比如你用到的各种依赖) 三.使用npm install 安
网页资源阻塞浏览器加载的原理示例解析

目录正文测试前环境准备图片会造成阻塞吗? CSS 加载阻塞 CSS 会阻塞后面 JS 的执行吗? JS 加载阻塞 defer 和 async 动态脚本会造成阻塞吗? DOMContentLoaded 和 onload DOMContentLoaded 遇到脚本 DOMContentLoaded 遇到样式正文一个页面允许加载的外部资源有很多,常见的有脚本.样式.字体.图片和视频等,对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢?今天来一探究竟. 如何用 Chrome 定制网络加载
浏览器加载、渲染和解析过程黑箱简析

用 Fiddler 监控,在 IE6 下,资源下载顺序为: 很明显,下载顺序从上到下,文档流中先出现的资源先下载.在 IE8, Safari, Chrome 等浏览器下也类似. Firefox 对下载顺序做了优化:Firefox 会将 js, css 提前下载,而将图片等资源延迟到后面下载. 对于渲染,利用 Fiddler 将网速调慢,可以看到 css 下载后会马上渲染到页面,渲染和下载同步进行.js 的解析和运行,也类似. 对于 js 运行,以及页面加载相关事件的触发,特别做了测试.在 Fir
React懒加载实现原理深入分析

目录 1.代码分割 2.React的懒加载 import() 原理 React.lazy 原理 Suspense 原理小结 1.代码分割 (1)为什么要进行代码分割? 现在前端项目基本都采用打包技术,比如 Webpack,JS逻辑代码打包后会产生一个 bundle.js 文件,而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂,相应打包好的 bundle.js 文件体积就会越来越大,因为需要先请求加载资源之后,才会渲染页面,这就会严重影响到页面的首屏加载. 而为了解决这样的问题,避免大体
深入解析Android中的setContentView加载布局原理

前言对于Android的开发者来说,setContentView大家再熟悉不过了,在我们的Activity中首先就是要用它加载我们的布局,但是应该有一部分人是不知道加载布局的原理,也包括我,今天就从源码的角度分析setContentView加载布局原理. 准备工作由于我们使用的Android API部分源码是隐藏的,当我们在AndroidStudio中是不能找到源码的,我们可以去官网下载相应源码去查看,当然在GitHub下载相应版本的API替换我们sdk下platforms相应api的and
使用Browserify来实现CommonJS的浏览器加载方法

Nodejs的模块是基于CommonJS规范实现的,可不可以应用在浏览器环境中呢? var math = require('math'); math.add(2, 3); 第二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成.也就是说,如果加载时间很长,整个应用就会停在那里等.这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间.但是,对于浏览器,这却是一个大问题,因为模块都放在服务
Vue中使用import进行路由懒加载的原理分析

目录使用import进行路由懒加载的原理 (1)遵循规范 (2)调用时间 (3)本质 vue路由懒加载,使用import无法处理解决使用import进行路由懒加载的原理首先我们来说说,import 和 require 的区别 node 编程中最重要的思想就是模块化,import 和 require 都是被模块化所使用. (1)遵循规范 require是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法 (2)调用时间 require是运行
Docker容器的加载分层原理及commit镜像

目录 Docker容器的加载原理.分层原理.commit镜像一.什么是镜像二.docker镜像加载原理 1. 联合文件系统UnionFS 2. 镜像加载原理三.分层原理四.commit镜像 Docker容器的加载原理.分层原理.commit镜像一.什么是镜像镜像是一种轻量级.可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件. 它包含运行某个软件所需的所有内容,包括代码.运行时环境.库.环境变量和配置文件. 所有的应用,直接打包成docker镜像,就可以直接跑起来. 如
spring boot启动加载数据原理分析

实际应用中,我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求. 为了解决这样的问题,spring Boot 为我们提供了一个方法,通过实现接口 CommandLineRunner 来实现. 创建实现接口 CommandLineRunner 的类,通过@Component注解,就可以实现启动时加载数据项.使用@Order 注解来定义执行顺序. IndexStartupRunner.Java类: import org.springframework.boot.CommandLine
PHP面向对象自动加载机制原理与用法分析

本文实例讲述了PHP面向对象自动加载机制原理与用法.分享给大家供大家参考,具体如下: 在学习PHP的面向对象的时候,会知道很多"语法糖",也就是魔术方法.有一个加自动加载的魔术方法,叫:__autoload(); 先看一段代码 <?php function __autoload($classname) { $filename = "./". $classname .".php"; include_once($filename); } new
Java代码块与代码加载顺序原理详解

这篇文章主要介绍了Java代码块与代码加载顺序原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下本文首先介绍几个基本的名次,然后介绍了三种代码块的特性和使用方法. 在面试大型公司时,如果遇到大型国企或者大的互联网私企,笔试中经常遇到代码块和代码加载顺序的笔试题.这里做一个总结,也方便各位小伙伴飙车不会飘. 名词解释代码块由 { } 包起来的代码,称为代码块静态代码块由 static { } 包起来的代码,称为静态代码块. 不同类型