简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Obviously a time-consuming js is written at the end of the body, why does the page wait until the js is almost loaded before it is rendered?
学习ing
学习ing 2017-06-26 10:53:45
0
3
785

Recently, I have been thinking about the impact of the position of css and js in the page on page loading and performance. I have also written several demos and found some questions, such as placing some time-consuming js at the bottom of the body to prevent blocking the loading of the page. But the demo I typed doesn’t seem to be in line with what everyone has been saying. The specific code is as follows: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>我是第1行</p>
<p>我是第2行</p>
<p>我是第3行</p>
<p>我是第4行</p>
<p>我是第5行</p>
<p>我是第6行</p>
<script>
    console.time("t1");
    var str =0;
    for(var i = 0;i<500000000;i ++){
        str +=i;
    }
    console.timeEnd("t1");
    alert(str);
</script>
</body>
</html>

It stands to reason that 6 P elements should be presented first, and then wait a few seconds before alert (str). But the result is not like this. Here is how this code runs in several browsers:
1. In Chrome, you wait for the loading bar to turn, then alert, and then click OK to render the page;
2.ie and Firefox, you wait for the loading bar to turn, and then the page and alert appear almost at the same time (the page should be rendered first and then alert, because the p element has already appeared when alert);

Here's what I tried:

1. Add onload method to body: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload = "fn()">
<p>我是第1行</p>
<p>我是第2行</p>
<p>我是第3行</p>
<p>我是第4行</p>
<p>我是第5行</p>
<p>我是第6行</p>
<script>
function fn(){
    console.time("t1");
    var str =0;
    for(var i = 0;i<5000000000;i ++){
        str +=i;
    }
    console.timeEnd("t1");
    alert(str);
}
</script>
</body>
</html>

There is no change in the result;

2. Use window.onload method: 

<script>
    function fn(){
        console.time("t1");
        var str =0;
        for(var i = 0;i<500000000;i ++){
            str +=i;
        }
        console.timeEnd("t1");
        alert(str);
    }
    window.onload = fn;
</script>

The result is the same, there is no change;

3. Write the script as an external connection method, and the test result is still the same (I tried it at home last night. It seems that the page elements are rendered first and then the js is loaded. However, there is no way to verify it now. I don’t know if it is the browser. Version problem);
Attachment: Why do I feel that the computing speed of different browsers is different? 500 million loops in Google take 10 seconds, and Firefox only took 6 seconds. I don’t understand it very well

This is my first time to ask a question, I hope you guys will take it easy. 0.0~ Thank you in advance

学习ing
学习ing

reply all(3)
Ty80
Ty802017-06-26 10:55:45 3 floor

What you said above makes sense. It should be because the for loop takes up CPU resources, causing the first screen to load slowly.
Even the script tag at the bottom of the body will slow down the first screen, because the browser will request its corresponding js file at the very beginning, and this takes up the limited number of TCP links, bandwidth and even the time it takes to run it. Required CPU.

Like +0
Add Reply
迷茫
迷茫2017-06-26 10:55:45 2 floor

The script tag is placed at the bottom of the body to prevent the script tag from blocking the download of other page resource files and speed up the loading of page-related resources.
But the rendering of the entire page will still be terminated by the script tag, so in your example the page will remain blank until the script operation is completed and the page will not be displayed until it is rendered.

In the example you gave, if you want the page to be displayed first and then the script calculation is performed, you can use setTimeout to execute the script asynchronously, such as: 

setTimeout(function() {
  //需要执行将脚本...
}, 0);
Like +0
Add Reply
大家讲道理
大家讲道理2017-06-26 10:55:45 1 floor

I guess this is because it takes up too much CPU resources, and page rendering also requires CPU resources

If this time-consuming operation is replaced by IO, I think it will be in line with expectations

PS: Guess, try when empty

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！