成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

瀏覽器什么時候會發(fā)起網(wǎng)絡請求，去加載一張圖片?

robin / 1997人閱讀

摘要：寫在前面本文首發(fā)于公眾號符合預期的瀏覽器在什么時候會去加載一張圖片呢當然是我們網(wǎng)頁中有圖片的時候。按照規(guī)范，瀏覽器必須立即發(fā)起網(wǎng)路請求，更新圖片數(shù)據(jù)?？梢岳斫鉃闉g覽器可以在設置元素的時候，自行考慮是否需要立即發(fā)起網(wǎng)絡請求加載資源。

寫在前面 
本文首發(fā)于公眾號：符合預期的CoyPan

瀏覽器在什么時候會去加載一張圖片呢？當然是我們網(wǎng)頁中有圖片的時候。在平時的項目開發(fā)中，我們還常常會用圖片進行日志上報，大概像下面這樣：

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

新建一個Image，將其src賦值，瀏覽器便會發(fā)出一個網(wǎng)絡請求。

再來考慮一下下面的代碼：

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

上面的代碼會發(fā)起網(wǎng)絡請求么？

答案是：不會。只需要增加一行代碼，將script插入到DOM樹中，便會觸發(fā)網(wǎng)絡請求。

var scriptEl = document.createElement("script");
scriptEl.src = "http://xxxx.js";
document.body.appendChild(scriptEl); // 這行代碼會觸發(fā)請求
什么時候會觸發(fā)一次圖片請求？

再來看下面的代碼：

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

上面的代碼會觸發(fā)網(wǎng)絡請求么？答案是：會的。雖然divEl并沒有被插入到DOM樹中，但是網(wǎng)絡請求依然會觸發(fā)。這種表現(xiàn)一開始是讓我有點意外的。于是乎，我開始了探索。

翻了一下html規(guī)范，發(fā)現(xiàn)了下面這段話：

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

大概的意思就是：

如果瀏覽器禁用了js腳本，那么瀏覽器可以立即請求圖片，也可以根據(jù)需要加載圖片。如果瀏覽器沒有禁用js腳本，當img元素被創(chuàng)建，或者經(jīng)歷一些變化(src被賦值等) 時，瀏覽器必須立即進入一個update the image data的流程。在update the image data這個流程中，如果圖片元素還沒有內(nèi)容，并且圖片元素的src已被賦值，瀏覽器會立即發(fā)起請求去請求圖片。

這樣，就可以解釋上述的現(xiàn)象了：

Case 1

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

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

使用Image構(gòu)造函數(shù)時，生成了一個HTMLImageElement實例，也就是一個img元素，然后給這個img元素的src賦了值。很顯然，我們使用了javascript。按照規(guī)范，瀏覽器必須立即發(fā)起網(wǎng)路請求，更新圖片數(shù)據(jù)。

Case 2

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

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

在使用了innerHTML后，其實我們也是生成了一個HTMLImageElement實例。按照規(guī)范，瀏覽器也必須立即發(fā)起網(wǎng)絡請求，更新圖片數(shù)據(jù)。

總結(jié)一下：只要我們在代碼中創(chuàng)建了一個img元素(HTMLImageElement實例)，并且我們給這個img元素的src賦值了，那么瀏覽器就會發(fā)起網(wǎng)絡請求，加載圖片內(nèi)容。

什么時候觸發(fā)一次script請求？

我們再來規(guī)范里是怎么規(guī)定script標簽的。

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

在script標簽的相關規(guī)范里，我沒有找到明確的說明在什么情況下需要發(fā)起網(wǎng)絡請求加載資源。另外，我看到了上面紅框里的這段話。概括一下，就是：

瀏覽器可以在設置script元素的src時候，就發(fā)起網(wǎng)絡請求加載資源。但是如果最后，這個script元素沒有插入DOM的話，網(wǎng)絡請求就完全被浪費了。

可以理解為：瀏覽器可以在設置script元素的時候，自行考慮是否需要立即發(fā)起網(wǎng)絡請求加載資源。然后瀏覽器在實現(xiàn)的時候，為了節(jié)約資源，并沒有立即發(fā)起請求，而是選擇了在插入DOM樹后，才發(fā)起請求。

(這里不是很確定，但是沒有找到更進一步的說明)

跳出規(guī)范來思考

不考慮規(guī)范，在平時的業(yè)務中，我們新建圖片后，不管圖片是否最終插入DOM樹，都需要立即拿到圖片的信息，比如canvas，比如通過圖片的寬高進行頁面排版等。因此，新建img元素后立即發(fā)起請求拿到圖片數(shù)據(jù)，是合乎邏輯的。

對于script元素來說，也不存在需要多帶帶操作的場景，為了節(jié)省資源，script插入DOM樹后再發(fā)起網(wǎng)絡請求，也是合乎邏輯的。

寫在后面

在業(yè)務開發(fā)中，某些代碼看起來很理所當然，便沒有多想。偶爾會遇到讓人意外的表現(xiàn)，這個時候探索一下，加深一下理解，也算是符合預期吧。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54235.html

相關文章

  • 瀏覽器什么時候會發(fā)起網(wǎng)絡請求，去加載一張圖片?

    摘要：寫在前面本文首發(fā)于公眾號符合預期的瀏覽器在什么時候會去加載一張圖片呢當然是我們網(wǎng)頁中有圖片的時候。按照規(guī)范，瀏覽器必須立即發(fā)起網(wǎng)路請求，更新圖片數(shù)據(jù)。可以理解為瀏覽器可以在設置元素的時候，自行考慮是否需要立即發(fā)起網(wǎng)絡請求加載資源。 寫在前面 本文首發(fā)于公眾號：符合預期的CoyPan 瀏覽器在什么時候會去加載一張圖片呢？當然是我們網(wǎng)頁中有圖片的時候。在平時的項目開發(fā)中，我們還常常會用圖片...

    SwordFly 評論0 收藏0

  • 前端面試--性能優(yōu)化

    1. 知識體系 1.1從輸入 URL 到頁面加載完成，發(fā)生了什么？ 首先我們需要通過 DNS（域名解析系統(tǒng)）將 URL 解析為對應的 IP 地址，然后與這個 IP 地址確定的那臺服務器建立起 TCP 網(wǎng)絡連接，隨后我們向服務端拋出我們的 HTTP 請求，服務端處理完我們的請求之后，把目標數(shù)據(jù)放在 HTTP 響應里返回給客戶端，拿到響應數(shù)據(jù)的瀏覽器就可以開始走一個渲染的流程。渲染完畢，頁面便呈現(xiàn)給了...

    XiNGRZ 評論0 收藏0

  • 圖片預加載，圖片懶加載，和jsonp中的一個疑問

    摘要：之前一直以為圖片預加載，圖片懶加載是差不多的。下面說一下區(qū)別和突然想到的一個問題。利用圖片預加載將下一張圖片提現(xiàn)緩存下來。如果用戶滑動到下面，則下面的圖片才會加載出來，否則不會加載該圖片。 之前一直以為圖片預加載，圖片懶加載是差不多的。其實差很多，出發(fā)點就不一樣。。。。。下面說一下區(qū)別和突然想到的一個問題。圖片預加載：事先把圖片就下載下來，當下次頁面中需要用到這個圖片的時候，就直接去讀...

    eccozhou 評論0 收藏0

  • 圖片預加載，圖片懶加載，和jsonp中的一個疑問

    摘要：之前一直以為圖片預加載，圖片懶加載是差不多的。下面說一下區(qū)別和突然想到的一個問題。利用圖片預加載將下一張圖片提現(xiàn)緩存下來。如果用戶滑動到下面，則下面的圖片才會加載出來，否則不會加載該圖片。 之前一直以為圖片預加載，圖片懶加載是差不多的。其實差很多，出發(fā)點就不一樣。。。。。下面說一下區(qū)別和突然想到的一個問題。圖片預加載：事先把圖片就下載下來，當下次頁面中需要用到這個圖片的時候，就直接去讀...

    AlphaGooo 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<