Send get requests with img and script, which seems to be a little faster. Why?

//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);
                    countPP;
                    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);
                    countPP;
                    send();

                };
                send();
            }, 200);

the above code sends an get request to an address using img and script, respectively. The page has been refreshed many times, and 90% of the time the result is that script is faster than img, and the personal estimate is that it takes about 20% less time.

as shown in figure

clipboard.png

Why is this?

Mar.24,2021

because img will be delayed by the browser, it is not necessary, but js he does not know.

The Queuing
request has been delayed by the rendering engine because the priority of the request is considered to be lower than that of critical resources, such as scripts / styles. This often happens in images.

https://developers.google.com.


this has something to do with the rendering mechanism of the browser. It's not that script is faster than img . In fact, script has more priority than img to request
because considering that script may change the dom content, the script tag is loaded as a key rendering path
unless you tag script with defer and asynac tags, the page will be rendered only after script loads.
on the other hand, img does not request img resources only after the resource request of the css html script class is completed.
if you are interested in understanding the rendering mechanism and sequence of the browser, you can take a look at
https://blog.csdn.net/riddle1.


this is very normal. Script type is to load js text files. Img is to load pictures, who do you think is faster? In addition, the loading priority of script is higher than that of img


data format, which leads to different sizes, and the download time of img is obviously longer than that of script.
network

Menu