阅读 255

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

写在前面

本文首发于公众号:符合预期的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 = '<img src="xxx.png">';
var divEl = document.createElement('div');
divEl.innerHTML = imgStr;
复制代码

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

翻了一下html规范,发现了下面这段话:

地址:html.spec.whatwg.org/multipage/i…

大概的意思就是:

如果浏览器禁用了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 = '<img src="xxx.png">';
var divEl = document.createElement('div');
divEl.innerHTML = imgStr;

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

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

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

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

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

地址:html.spec.whatwg.org/multipage/s…

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

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

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

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

跳出规范来思考

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

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

写在后面

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

关注下面的标签,发现更多相似文章
评论