国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

瀏覽器什么時候會發起網絡請求，去加載一張圖片?

robin / 1970人閱讀

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

寫在前面 
本文首發于公眾號：符合預期的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樹后再發起網絡請求，也是合乎邏輯的。

寫在后面

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54235.html

相關文章

  • 瀏覽器什么時候會發起網絡請求，去加載一張圖片?

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

    SwordFly 評論0 收藏0

  • 前端面試--性能優化

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

    XiNGRZ 評論0 收藏0

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

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

    eccozhou 評論0 收藏0

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

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

    AlphaGooo 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<