在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

//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請(qǐng)求。頁(yè)面刷新多次,90%的時(shí)候得到的結(jié)果都是script比img要快一些,個(gè)人估計(jì)用時(shí)要少20%左右。

如圖

clipboard.png

這是為啥?

回答
編輯回答
久舊酒

因?yàn)?code>img會(huì)被瀏覽器延后,并不是必不可少的內(nèi)容,但是js他并不知道。

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

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

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

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

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

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

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

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

2017年3月23日 01:47