|
外联js在css最后
- <!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
<script src="H5FullscreenPage.js" type ="text/javascript" ></script >
</head>
<body>
<img src="download-button.png" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">
</body>
</html>
1 影响了css的并行加载和body里面img的并行加载
内嵌js在css前面
- <!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type ="text/javascript" >
var f = 1;
f++;
</script >
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
</head>
<body>
<img src="download-button.png" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">
</body>
</html>
1 没有影响css的并行加载也没有影响body里面img的并行加载
内嵌js在css中间
- <!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<script type ="text/javascript" >
var f = 1;
f++;
</script >
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
</head>
<body>
<img src="download-button.png" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">
</body>
</html>
1 影响了css的并行加载没有英雄body里面img的并行加载
内嵌js在css最后
- <!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="page-animation.css" media="screen">
<script type ="text/javascript" >
var f = 1;
f++;
</script >
</head>
<body>
<img src="download-button.png" alt="HTML代码优化 网页性能 JavaScript技巧 Javascript">
</body>
</html>
1 影响了css和body里面img的并行加载。
综上所述：
当浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE，就会再发1个request去请求CSS或image,然后继续执行下面的转换，而不需要等待request的返回，当request返回 后，只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现.
这里的结论：
1 在head里面尽量不要引入javascript.
2 如果要引入js 尽量将js内嵌.
3 把内嵌js放在所有css的前面.
后记
1 本次的测试页面 http://1.lvming6816077.sinaapp.com/testaa/demo.html
2 测试所用浏览器 chrome
3 参考资料：http://www.zhihu.com/question/20357435/answer/14878543
http://www.haorooms.com/post/web_xnyh_jscss
4 如果有哪里说的不清楚或者错误的地方，欢迎留言反馈。 （编辑：网站开发网_安阳站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
