javascript - 明明一个费时js写在body结尾,为什么页面要等到差不多js加载完才呈现?
学习ing
学习ing 2017-06-26 10:53:45
0
3
784

最近在思考有关css和js在页面中位置对页面加载以及性能的影响,也写了几个demo,发现了一些疑问,如把一些费时的js放在body底部防止阻塞页面的加载。而我敲的demo却好像不符合大家一直所说的。具体代码如下:

<!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>

按理说应该是先呈现6个P元素,然后等若干秒再alert (str).可是结果却不是这样,下面是这段代码在几个浏览器中运行的情况:
1.chrome中是等加载条转啊转,然后alert,点击确定后呈现页面;
2.ie 和 火狐中是等加载条转啊转,然后页面和alert几乎同时出现(应该是先呈现页面再alert,因为alert时候p元素已经出现了);

下面是我尝试的方法:

1.给body加onload方法:

<!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>

结果没有任何变化;

2.用window.onload方法:

<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>

结果也是一样,没有任何变化;

3.将script写成外联方式,测试的结果还是一样(昨晚在家里试了一下,好像是先呈现页面元素再加载js,不过现在也无从考证,不知道会不会是浏览器版本问题);
附:怎么感觉不同浏览器运算速度不一样啊,5亿次循环在谷歌中10秒钟,火狐只花了6秒,也不是很理解

第一次来提问,望各位大牛轻虐 0.0~ 在这里先谢谢了

学习ing
学习ing

全部回复(3)
Ty80

楼上说的有道理,应该是由于for循环占用了CPU资源导致首屏加载变慢。
即使在body底部的script标签也会拖慢首屏出来的速度,因为浏览器在最一开始就会请求它对应的js文件,而这,占用了有限的TCP链接数、带宽甚至运行它所需要的CPU。

迷茫

script标签放在body的底部,是防止script标签阻塞其他页面资源文件的下载,加快页面相关资源的加载。
但整个页面渲染,仍会被script标签终止,因此在你的例子中看到页面一直是空白,直到script脚本运算完成后,页面渲染完才能显示出来。

在你给的例子中,如果想让页面先显示出来,然后再进行script脚本计算,可以使用setTimeout让脚本异步执行,如:

setTimeout(function() {
  //需要执行将脚本...
}, 0);
大家讲道理

我猜这是因为这占用了太多 CPU 资源导致的,页面渲染也需要 CPU 资源

如果把这个费时操作换成 IO 的,我觉得就会符合预期了

PS:猜测,待空了试试

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!