您的位置：首页 > Web前端 > JavaScript

关于javascript的几个小实验

2015-06-12 22:25 453 查看

1，外部的js文件会不会阻塞html的解析和渲染？

猜想：不会的，现代的浏览器应该已经做了优化。

实验方法：在页面中放一段执行时间超过2秒的js代码。然后在阻塞代码的后面判断能不能去的后续的dom元素。

靠！没想到是这样的结果！   Script文件果真阻塞了dom的解析。浏览器真的是一个文件一个文件的解析的。

实验代码

外部js脚本

var begin = new Date();

var end = new Date();

while((end.valueOf() - begin.valueOf())<(1000*15)){

end = new Date();

}

var testDom = document.getElementById("test");

console.log(testDom.innerHTML);

   Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Test</title>

<script src="testHelloWorld.js"></script>

</head>

<body>

<div id="test">

这是一个测试dom

</div>

</body>

</html>

2，是不是dom元素加载，解析完后就会触发onload函数呢？

   猜想：不会！有一次，我在dom文档的最后加了一段时间标记。然后又在onload事件的开始加了一个时间标记。然后算的之间的时间间隔达一秒钟。我不知道浏览器在这个时间段中干嘛了。

   猜想：浏览器一定是先把dom文档解析完后，然后等待已经请求的资源，然后按续解析他们。



试验方法：在html的最后记下时间戳，然后在onload的最后记下时间戳。

   这次当页面加载完后  马上就执行onload中的时间了。而我们公司的项目却要1秒后才执行。不知道为什么

相关代码

Js代码

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Test</title>

</head>

<body>

</body>

<script>

   window.begin = new Date();

   window.onload = function(){

       var end = new Date();

       console.log(end.valueOf() - begin.valueOf());

   }

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 测试

相关文章推荐

新的分享

章节导航

关于javascript的几个小实验

1，外部的js文件会不会阻塞html的解析和渲染 ？

1，外部的js文件会不会阻塞html的解析和渲染？