鍍金池/ 問答/HTML/ 用img和用script發(fā)送get請求,后者貌似要稍微快一點,這是為什么?

用img和用script發(fā)送get請求,后者貌似要稍微快一點,這是為什么?

//todo function base64Encode
let d = {};

setTimeout(function(){
                let count = 0;
                let time = 0;
                let loadedCount = 0;
                (function send() {
                    if (count > 10) {
                        return;
                    }
                    let img = document.createElement('img');
                    let t = +(new Date);
                    img.src = 'http://asdf.com/?d=' + base64Encode(JSON.stringify(d)) + '&t=1&r=' + Math
                        .random();
                    img.onload = img.onerror = () => {
                        let diff = +(new Date) - t;
                        time += diff;
                        console.log('img',time,count,time/count);
                    }
                    document.body.appendChild(img);
                    count++;
                    send();
                })();
            },0);

            

            setTimeout(function () {
                let count = 0;
                let time = 0;
                let loadedCount = 0;

                function send() {
                    if (count > 10) {
                        return;
                    }
                    let script = document.createElement('script');
                    let t = +(new Date);
                    script.type='text/javascript';
                    script.src = 'http://asdf.com/?d=' + base64Encode(JSON.stringify(d)) +
                        '&t=1&r=' +
                        Math.random();
                    script.onload = script.onerror = (e) => {
                        let diff = +(new Date) - t;
                        time += diff;
                        console.log('script',time,count,time/count);
                    }
                    document.body.appendChild(script);
                    count++;
                    send();

                };
                send();
            }, 200);

以上代碼分別用img和script向某地址發(fā)送get請求。頁面刷新多次,90%的時候得到的結(jié)果都是script比img要快一些,個人估計用時要少20%左右。

如圖

clipboard.png

這是為啥?

回答
編輯回答
久舊酒

因為img會被瀏覽器延后,并不是必不可少的內(nèi)容,但是js他并不知道。

Queuing
請求已被渲染引擎推遲,因為該請求的優(yōu)先級被視為低于關(guān)鍵資源(例如腳本/樣式)的優(yōu)先級。 圖像經(jīng)常發(fā)生這種情況。

https://developers.google.com...

2017年7月30日 10:25
編輯回答
寫榮

數(shù)據(jù)格式不同,導致大小不同,img下載的時間明顯比script下載的時間要長
network

2018年6月26日 20:09
編輯回答
毀了心

這個很正常啊,script類型是加載js文本文件,img是加載圖片,你說誰更快? 另外script的加載優(yōu)先級大于img

2017年5月6日 23:52
編輯回答
雨萌萌

這和瀏覽器的渲染機制有關(guān),并不是說script比img快 更準確的說法其實是script比img更加優(yōu)先請求
因為考慮到script 可能會改變dom內(nèi)容 因此script 標簽是作為關(guān)鍵渲染路徑來進行加載的
除非你給script加defer和asynac標簽 否則只有script加載之后才會渲染頁面,
而img則不是 只有如同css html script只類的資源請求完成才會去請求img資源
如果你有興趣了解瀏覽器的渲染機制和先后順序 可以看下:
https://blog.csdn.net/riddle1...

2017年3月23日 01:47