浏览器什么时候会发起网络请求，去加载一张图片?

robin 发布于2019-08-02 15:36 / 1873人阅读

摘要：写在前面本文首发于公众号符合预期的浏览器在什么时候会去加载一张图片呢当然是我们网页中有图片的时候。按照规范，浏览器必须立即发起网路请求，更新图片数据。可以理解为浏览器可以在设置元素的时候，自行考虑是否需要立即发起网络请求加载资源。

写在前面

本文首发于公众号：符合预期的CoyPan

浏览器在什么时候会去加载一张图片呢？当然是我们网页中有图片的时候。在平时的项目开发中，我们还常常会用图片进行日志上报，大概像下面这样：

var img = new Image();
img.src = "http://上报地址?a=1"

新建一个Image，将其src赋值，浏览器便会发出一个网络请求。

再来考虑一下下面的代码：

var scriptEl = document.createElement("script");
scriptEl.src = "http://xxxx.js";

上面的代码会发起网络请求么？

答案是：不会。只需要增加一行代码，将script插入到DOM树中，便会触发网络请求。

var scriptEl = document.createElement("script");
scriptEl.src = "http://xxxx.js";
document.body.appendChild(scriptEl); // 这行代码会触发请求

什么时候会触发一次图片请求？

再来看下面的代码：

var imgStr = "";
var divEl = document.createElement("div");
divEl.innerHTML = imgStr;

上面的代码会触发网络请求么？答案是：会的。虽然divEl并没有被插入到DOM树中，但是网络请求依然会触发。这种表现一开始是让我有点意外的。于是乎，我开始了探索。

翻了一下html规范，发现了下面这段话：

地址：https://html.spec.whatwg.org/...

大概的意思就是：

如果浏览器禁用了js脚本，那么浏览器可以立即请求图片，也可以根据需要加载图片。如果浏览器没有禁用js脚本，当img元素被创建，或者经历一些变化(src被赋值等) 时，浏览器必须立即进入一个update the image data的流程。在update the image data这个流程中，如果图片元素还没有内容，并且图片元素的src已被赋值，浏览器会立即发起请求去请求图片。

这样，就可以解释上述的现象了：

Case 1

var img = new Image();
img.src = "http://上报地址?a=1"

// Object.prototype.toString.call(img) === "[object HTMLImageElement]"

使用Image构造函数时，生成了一个HTMLImageElement实例，也就是一个img元素，然后给这个img元素的src赋了值。很显然，我们使用了javascript。按照规范，浏览器必须立即发起网路请求，更新图片数据。

Case 2

var imgStr = "";
var divEl = document.createElement("div");
divEl.innerHTML = imgStr;

// Object.prototype.toString.call(divEl.firstChild) === "[object HTMLImageElement]"

在使用了innerHTML后，其实我们也是生成了一个HTMLImageElement实例。按照规范，浏览器也必须立即发起网络请求，更新图片数据。

总结一下：只要我们在代码中创建了一个img元素(HTMLImageElement实例)，并且我们给这个img元素的src赋值了，那么浏览器就会发起网络请求，加载图片内容。

什么时候触发一次script请求？

我们再来规范里是怎么规定script标签的。

地址：https://html.spec.whatwg.org/...

在script标签的相关规范里，我没有找到明确的说明在什么情况下需要发起网络请求加载资源。另外，我看到了上面红框里的这段话。概括一下，就是：

浏览器可以在设置script元素的src时候，就发起网络请求加载资源。但是如果最后，这个script元素没有插入DOM的话，网络请求就完全被浪费了。

可以理解为：浏览器可以在设置script元素的时候，自行考虑是否需要立即发起网络请求加载资源。然后浏览器在实现的时候，为了节约资源，并没有立即发起请求，而是选择了在插入DOM树后，才发起请求。

(这里不是很确定，但是没有找到更进一步的说明)

跳出规范来思考

不考虑规范，在平时的业务中，我们新建图片后，不管图片是否最终插入DOM树，都需要立即拿到图片的信息，比如canvas，比如通过图片的宽高进行页面排版等。因此，新建img元素后立即发起请求拿到图片数据，是合乎逻辑的。

对于script元素来说，也不存在需要多带带操作的场景，为了节省资源，script插入DOM树后再发起网络请求，也是合乎逻辑的。

写在后面

在业务开发中，某些代码看起来很理所当然，便没有多想。偶尔会遇到让人意外的表现，这个时候探索一下，加深一下理解，也算是符合预期吧。

服务器托管专线服务服务器主动发起请求 c服务器主动发起请求第一张图片 html 一张图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54235.html

浏览器什么时候会发起网络请求，去加载一张图片?

摘要：写在前面本文首发于公众号符合预期的浏览器在什么时候会去加载一张图片呢当然是我们网页中有图片的时候。按照规范，浏览器必须立即发起网路请求，更新图片数据。可以理解为浏览器可以在设置元素的时候，自行考虑是否需要立即发起网络请求加载资源。写在前面本文首发于公众号：符合预期的CoyPan 浏览器在什么时候会去加载一张图片呢？当然是我们网页中有图片的时候。在平时的项目开发中，我们还常常会用图片...

SwordFly 2019-08-26 10:18 评论0 收藏0
前端面试--性能优化

1. 知识体系 1.1从输入 URL 到页面加载完成，发生了什么？首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了...

XiNGRZ 2019-08-26 13:47 评论0 收藏0
图片预加载，图片懒加载，和jsonp中的一个疑问

摘要：之前一直以为图片预加载，图片懒加载是差不多的。下面说一下区别和突然想到的一个问题。利用图片预加载将下一张图片提现缓存下来。如果用户滑动到下面，则下面的图片才会加载出来，否则不会加载该图片。之前一直以为图片预加载，图片懒加载是差不多的。其实差很多，出发点就不一样。。。。。下面说一下区别和突然想到的一个问题。图片预加载：事先把图片就下载下来，当下次页面中需要用到这个图片的时候，就直接去读...

eccozhou 2019-08-22 18:29 评论0 收藏0
图片预加载，图片懒加载，和jsonp中的一个疑问

摘要：之前一直以为图片预加载，图片懒加载是差不多的。下面说一下区别和突然想到的一个问题。利用图片预加载将下一张图片提现缓存下来。如果用户滑动到下面，则下面的图片才会加载出来，否则不会加载该图片。之前一直以为图片预加载，图片懒加载是差不多的。其实差很多，出发点就不一样。。。。。下面说一下区别和突然想到的一个问题。图片预加载：事先把图片就下载下来，当下次页面中需要用到这个图片的时候，就直接去读...

AlphaGooo 2019-08-02 10:49 评论0 收藏0