如何渲染网络图片_探究网页资源究竟是如何阻塞浏览器加载的

最新推荐文章于 2023-09-26 16:20:41 发布
最新推荐文章于 2023-09-26 16:20:41 发布
阅读量188 收藏
点赞数
文章标签： 如何渲染网络图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39854867/article/details/112694726
版权

这是布兰的第 15 篇原创

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

阅读完这篇文章你将解开如下谜团：

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

测试前环境准备

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

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

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

图片会造成阻塞嘛

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

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 秒左右。

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="stylesheet" />
head>
<body>
    <h1>我是 h1 标签h1>
body>
html>

测试过程如下：

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

从而得出结论：

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

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

32780dd436cee57a7be2366ad50e3a59.png

可以说解析 DOM 和 解析 CSS 其实是并列进行的，既然是并列进行的，那 CSS 和 DOM 就不会互相影响了，这和结论一相符；另外渲染页面一定是在得到 CSSOM 树之后进行的，这和结论二相符。

CSS 一定会阻塞 DOM 的渲染嘛？答案是否定的，当把外链样式放到 最尾部去加载：

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

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

CSS 会阻塞后面 JS 的执行嘛

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

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="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 加载会对渲染过程造成什么影响呢？

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 放到 的最尾部去加载，减少页面加载白屏时间。

defer 和 async

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

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 加载的时候又会是如何呢？

808693be729349cf0abf37885a5fa750.png

defer 特点

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

asyn 特点

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

defer 和 async 都只能用于外部脚本，如果 script 没有 src 属性，则会忽略它们。

动态脚本会造成阻塞嘛

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


<script>function loadScript(src) {let script = document.createElement('script')
        script.src = srcdocument.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 文档，并在文档中遇到 标签时，就会在继续构建 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 应该不会等到外部样式的加载完成后才触发，这么分析是对的，让我们用下面代码进行测试一翻就知道了：

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="stylesheet"/>
head>
<body>
    <h1>我是 h1 标签h1>
body>
html>

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


<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script>script>
head>

参考文章

  • DOMContentLoaded
  • https://html.spec.whatwg.org/multipage/scripting.html

感谢阅读

  1. 如果你觉得这篇文章对你有所帮助的话，来个分享、点赞、在看三连吧，让更多的人看到。
  2. 关注公众号「大海我来了」，回复 666 领取前端进阶资料，定期为你推送前端干货文章。
  3. 添加本人微信「bulandent」，拉你进前端技术交流群和大厂同学一起交流学习。
9b20f76175cfd9c2fcf5d756a0f93b26.png
weixin_39854867
关注
浏览器渲染之阻塞渲染
EWJRQKJRQ的博客
09-21 564
浏览器渲染之阻塞渲染 ####1.关于css阻塞： 声明：只有link引入的外部css才能够产生阻塞。 1.style标签中的样式： (1). 由html解析器进行解析； (2). 不阻塞浏览器渲染（可能会产生“闪屏现象”）； (3). 不阻塞DOM解析； 2.link引入的外部css样式（推荐使用的方式）： (1). 由CSS解析器进行解析。 (2). 阻塞浏览器渲染(可以利用这种阻塞避免“闪屏现象”)。 (3). 阻塞其后面的js语句的执行： (4). 不阻
的图片加载会阻塞html码_厚溥资讯 | HTML页面的渲染过程
weixin_34581086的博客
01-14 365
学习前端的性能优化，有必要了解一下页面的渲染流程，以便对症下药，找出性能的瓶颈所在。以下是我看到的一些东西，分享给大家。页面的渲染有以下特点：单线程事件轮询定义明确、连续、操作有序(HTML5)分词和构建DOM树请求资源并预加载构建渲染树并绘制页面具体来说：当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时，DOM树的构建会被阻...
关于JavaScript是否会阻塞图片加载
weixin_30498921的博客
05-23 272
<?php //1.js.php sleep(5); file_put_contents("tmp.txt", __FILE__.'->'.__LINE__.' ->' .date("Ymd H:i:s")."\r\n", FILE_APPEND); ?> console.log("1.js"); <?php //2.js.php sleep(3); f...
CSS阻塞渲染、怎么防止css阻塞
weixin_33922672的博客
07-09 427
　　浏览器渲染流程： 　　1、浏览器开始解析目标HTML文件，执行流的顺序为自上而下。 　　2、HTML解析器将HTML结构转换为基础的DOM(文档对象模型)，构建DOM树完成后，触发DomContendLoaded事件。 　　3、CSS解析器将CSS解析为CSSOM(层叠样式表对象模型)，一棵仅含有样式信息的树。 　　4、CSSOM和DOM开始合并构成渲染树，每个节点开始包含具体的样式信息。 　...
完美解决bootstraptable父子表子表渲染问题
11-29
bootstraptable父子表，子表找不到bootstraptable初始化方法的解决方案
Vue框架中的服务端渲染(SSR)探究
# 1. 简介 ## 1.1 什么是服务端渲染(SSR) 在Web开发中，通常有两种渲染方式：客户端渲染和服务端渲染。服务端渲染是指在服务器...然而，随着搜索引擎对网页内容的要求越来越高，以及对首屏加载时间的关注，服务端渲染
使用WebKit实现异步加载与资源管理
在Web开发中，当浏览器请求一个页面时，页面中的资源（如图片、样式表、脚本等）需要从服务器加载并渲染在页面上。而异步加载则是指在页面加载过程中，资源的加载不会阻塞页面的渲染和交互，从而提升了用户的体验和...
从渲染原理谈前端性能优化
riddle1981的博客
06-03 2414
前言 合格的开发者知道怎么做，而优秀的开发者知道为什么这么做。 这句话来自《web性能权威指南》，我一直很喜欢，而本文尝试从浏览器渲染原理探讨如何进行性能提升。 全文将从网络通信以及页面渲染两个过程去探讨浏览器的行为及在此过程中我们可以针对那些点进行优化，有些的不足之处还请各位不吝雅正。 一、关于浏览器渲染的容易误解点总结 关于浏览器渲染机制已经是老生常谈，而且网上现有资料中有非常多的优秀资料对...
独辟蹊径：逆推Krpano切图算法，实现在浏览器切多层级瓦片图
liuqinrui520的博客
10-03 1576
1、内附DEMO和源码，带你了解krpano切图，一步一步推理出Krpano多分辨率切图算法； 2、了解瓦片地图金字塔模型； 3、这是一个有趣的过程；
理解WebKit的渲染管线：从绘制命令到GPU加速
在Web开发中，理解浏览器渲染管线的工作过程是非常重要的。渲染管线决定了网页内容的展示和用户交互的响应速度。对于开发者而言，深入理解渲染管线可以帮助我们更好地优化和调试网页性能，提高用户体验。 ### 1.2 ...
html延迟加载图片
03-08
html延迟加载图片 支持ie6和ie6以上任何浏览器
异步加载图片“阻塞”UI主线程问题的解决方案
lovehong0306的专栏
07-14 4175
http://blog.csdn.net/lovehong0306 继上一篇文章，做图片处理难免要用到异步加载，关于异步加载图片的方案我就不多说了，网上很多例子以及讲解，稍后我会贴出代码。 这里我要讲一下在做异步加载图片时遇到的一个很奇怪的问题，载入图片的线程“阻塞”了UI线程。 代码如下： public Bitmap loadDrawable(final Stri
图片太多加载过慢？学学图片懒加载吧
实验楼--动手做实验，轻松学IT！
10-16 325
实验介绍 我们在浏览图片较多的网页时，有没有想过这些图片是如何成功展示的呢？比如像这样的图片素材网站： 这样的网页拥有成千上万的图片资源，如何优化网页性能成为了开发人员不得不思考的技术问题。 不难发现，每当我们下拉网页的滚动条到底部时，可视部分的图片资源才开始解析，如此一来能够大大的减少服务器的压力，优化网页性能的同时也能提升用户体验。这样的技术也就是本实验想为大家介绍的——图片懒加载。 在开始学习图片懒加载之前，课程先会介绍图片预加载技术，通过这两种技术的学习做出对比，更能体现出懒加载是如何有效的提升页
前端性能优化问题汇总
最新发布
Yr123456_的博客
09-26 115
当 <link>标签的 href 属性为空，或 <script>、 <img>、 <iframe>标签的 src 属性为空时，浏览器在渲染的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免。顾名思义，并没有实际上的提升速度，而是优化了用户体验，我们可以采用骨架屏、懒加载、合理loading，防抖、节流（减少不必要的请求）等方式让用户的等待变得舒服。多次使用到的公共代码进行提取，打包成公共模块。
零基础web前端学习之JavaScript 和css 阻塞
jinmu520的博客
08-26 206
web前端学习之JavaScript 和css 阻塞，JavaScript 是客户端和服务器端的脚本语言，可以插入HTML 页函中， 并且是目前较热门的Web 开发语言。同时， JavaScript 也是面向对象的编程语言。JavaScript 是一个可以被引入HTML 页面的编程语言。这两种语言并不完全相互依赖，而是针对不同的意图而设计的。JavaScript是客户端脚本语言，它称为非结构化编程。 JavaScript 的阻塞特性是所有浏览器在下载JavaScript 代码的时候， 会阻止其他一切活动，比
DOM渲染与优化 - CSS、JS、DOM解析和渲染阻塞问题
好好学习天天向上
09-08 5296
知识点对于浏览器说，页面加载主要有两个事件浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。 HTML文件的解析就是生成DOM树的过程HTML中的三类script 渲染进程在解析 HTML 的时候，如果遇到一个没有任何属性的 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完成后再切换回渲染引擎继续渲染流程。 async、defer属性的js脚本，渲染引擎遇到这一行命令，
html图片加载不出来_CSS加载会阻塞页面显示？
weixin_39643679的博客
11-29 1024
可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。原理解析那么为什么会出现上面的现象呢？我们从浏览器的渲染过程来解析下。不同的浏览器使用的内核不同，所以他们的渲染过程也是不一样的。目前主要有两个：webkit渲染过程Gecko渲染过程从上面两个流程图我们可以看出来，浏览器渲染的流程如下：HTML解析文件，生成DOM Tre...
iOS图片加载优化与延迟加载技术探究
延迟加载是一种常见的性能优化手段，它允许开发者在图片即将显示到屏幕上时才进行加载，这样可以有效减少应用启动时的资源占用和网络流量，同时避免了不必要的数据加载，加快了用户界面的渲染速度。在移动设备上，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值