探究网页资源究竟是如何阻塞浏览器加载的
2020年12月26日 09:49
一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。
阅读完这篇文章你将解开如下谜团：
- 如何用 Chrome 定制网络加载速度？
- 图片/视频/字体会阻塞页面加载嘛？
- CSS 是如何阻塞页面加载的？
- JS 又是如何阻塞页面加载的？
- JS 一定会阻塞 DOM 加载嘛？
- defer 和 async 是什么？又有何特点？
- 动态脚本会造成阻塞嘛？
- 阻塞是怎么和 DOMContentLoaded 与 onload 扯上关系的？
测试前环境准备
测试之前我们需要对浏览器下载资源的速度进行控制，将它重新设置为 50kb/s，操作方式：
- 打开
Chrome开发者工具； - 在
Network面板下找到Disable cache右侧的下拉列表，然后选择 Add 添加自定义节流配置； - 添加一个下载速度为 50kb/s 的配置；
- 最后在第二步骤中的下拉列表选择刚刚配置的选项即可；
- 注意：如果当前选择的自定义选项被修改了，则需要切换到别的选项再切回来才可生效。
为什么是这个速度？因为如下的一些资源，比如图片、样式或者脚本体积都是 50kb 的好几倍，方便测试。
图片会造成阻塞嘛
直接写个示例来看下结果：