css、js的相互阻塞
先决条件:脚本前面存在外部样式
以下试验虽然是在chrome下,但是对于IE8+以及其他浏览器也适用。
1、内联脚本(http://jsbin.com/mudab/1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>var start = +new Date;</script>
<link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">
<script>
var end = +new Date;
console.log(end-start);
</script>
</head> <body>
<span></span> </body>
</html>
控制台打印结果>2000,可以得出结论:外部样式会阻塞后面内联脚本的执行。
2、阻塞型外部脚本(http://jsbin.com/qeliri/1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>var start = +new Date;</script>
<link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet"> </head> <body>
test
<script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></script>
<div id="result"></div>
<script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script> </body>
</html>
瀑布流中可以看出脚本和css并行加载,但是从js执行结果(js执行结果和打印时间基本同时出现,时间上可以相当于js执行时间)大于2000,可以得出结论:外部样式不会阻止后面外部脚本的加载,但是外部脚本的执行必须等到css加载完毕。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。
3、异步执行型外部脚本(http://jsbin.com/velat/1)
注:IE6-9不支持async(IE支持defer)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>var start = +new Date;</script>
<link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet"> </head> <body>
test
<script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async></script>
<div id="result"></div>
<script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script> </body>
</html>
脚本执行结果>1000&&<2000,从瀑布流中可以看出脚本是和css并行加载的,说明此时并没有出现阻塞。对于具有async属性的脚本,外部css不会阻塞。
4、异步加载型外部脚本(http://jsbin.com/zuvuce/1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>var start = +new Date;</script>
<link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet"> </head> <body>
test
<script>
var script = document.createElement('script');
script.src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
<div id="result"></div>
<script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script> </body>
</html>
脚本执行结果大于3000,从瀑布流中可以看出,受内联脚本被阻塞(1)的影响,js开始加载时间在css加载完之后。结论如第一条。
建议:
1、脚本应该放在外部css的前面,不论脚本是内联还是外部(当然,最好是脚本放在body的最后面);
2、可以的话,外部css最好直接内联到页面。
PS:css并不会阻塞图片等资源的下载,但会影响body内容的呈现(http://jsbin.com/jokopa/1)。
参考文章:
Script-injected "async scripts" considered harmful
Properly including stylesheets and scripts
最新文章
- WPF显示Html
- Clipboard.js – 现代方式实现复制文本到剪贴板
- WP &; Win10开发:实现ListView下拉加载的两种方法
- Message,MessageQueue,Looper,Handler详解+实例
- cmd下运行PowerShell命令
- 怎样在win7下装ubuntu(硬盘版安装)
- redis 扩展下载
- TCP/IP 第二章
- LINUX 笔记-read命令
- 如何在vue-cli webpack中全局引入jquery
- 【Unity3D与23种设计模式】外观模式(Facade)
- Basic Linux Privilege Escalation
- Java 面向对象 知识点基础浅谈
- 部署openfaas
- MI200e电力线通讯
- 01:tcp/ip基本知识
- 20145308 《网络对抗》 逆向及BOF基础实践 学习总结
- BZOJ 4706: B君的多边形 找规律
- 与众不同 制作会唱歌的WinRAR - imsoft.cnblogs
- 【云安全与同态加密_调研分析(8)】同态加密技术及其应用分析——By Me
热门文章
- Visual Studio创建跨平台移动应用_03.AppBuilder Extension
- gtest官方文档浅析
- Exception testing
- asp.net using library ClosedXML to export excel
- UVA 140 (13.07.29)
- Python使用mechanize模拟浏览器
- CloudFoundry Service 使用
- POJ 3233 Matrix Power Series (矩阵+二分+二分)
- linux下mysql5.5的安装
- 怎样将关系型数据表转换至hbase数据表