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
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.
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:
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