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
css、js的相互阻塞的更多相关文章
- JS以及CSS对页面的阻塞
一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...
- 原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
hello~各位亲爱的看官老爷们大家好.估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能.然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付 ...
- 定时器详解和应用、js加载阻塞、css加载阻塞
1.setTimeout().setInterval()详解和应用 1.1 详解: setTimeout.setInterval执行时机 1.2 存在问题: setInterval重复定时器可能存在的 ...
- 【JS】JS以及CSS对页面的阻塞
一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- 开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面
NanUI是什么 NanUI基于ChromiumFX项目进行开发,它能让你在你的Winform应用程序中使用HTML5/CSS3/Javascript等网页技术来呈现用户界面(类似Electron). ...
- NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源
NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...
- 关于css,js放置位置的问题
一天,小明正在网上查找资料,项目中遇到的问题需要通过查阅资料来解决,他看到一个标题很有意思,觉得这应该是他要找的答案,于是他就点了进去,结果进入网站后几秒钟的时间,网页还是一片空白,过了好久才加载完成 ...
- 【Python全栈】HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
HTML <!--...--> 注释 .CSS/JS //注释 和 /*.....*/ 注释 <!-- -->是HTML的注释标签,使用 < 和 > 是符合HTML ...
随机推荐
- bitree
#include "stdio.h" #include "stdlib.h" #define OVERFLOW -1 #define ERROR -1 #def ...
- Java学习日记-12 集合(2)
一.List<E>接口(超级接口Collection,List比Collection多重载了一些索引作为形参的方法)1.实现类ArrayList\LinkedListArrayList顺序 ...
- Object -C @property -- 笔记
避免函数名和字段重复: 代码:
- 学习之路十四:客户端调用WCF服务的几种方法小议
最近项目中接触了一点WCF的知识,也就是怎么调用WCF服务,上网查了一些资料,很快就搞出来,可是不符合头的要求,主要有以下几个方面: ①WCF的地址会变动,地址虽变,但是里面的逻辑不变! ②不要引用W ...
- 一个int类型究竟占多少个字节
一个int占多少个字节? 这个问题我们往往得到的答案是4. 可是int究竟占多少个字节,却跟你的机器环境有关. As you can see, the typical data type sizes ...
- [转] Makefile的条件执行
条件语句可以根据一个变量的值来控制make执行或者忽略Makefile的特定部分.条件语句可以是两个不同变量.或者变量和常量值的比较.要注意的是:条件语句只能用于控制make实际执行的makefile ...
- B/S架构的几种形式
1. 什么是B/S架构 B/S架构的全称为Browser/Server,即浏览器/服务器结构.Browser指的是Web浏览器,极少数事务逻辑在前端实现,但主要事务逻辑在服务器端实现.B/S架构的系统 ...
- oracle的concat的用法
select concat( concat( concat( ( select area_name from ec_area where area_id ), ( select area_name f ...
- 对static静态成员的理解
疑惑: 数据成员可以分静态变量.非静态变量两种. 静态成员:静态类中的成员加入static修饰符,即是静态成员.可以直接使用类名+静态成员名访问此静态成员,因为静态成员存在于内存,非静态成员需要实例 ...
- 《node.js开发指南》读书笔记(一)
在开发时如果修改了js内容,不能通过刷新浏览器直接看到效果,必须通过重启nodejs程序才能看到,这样显然不利于开发调试,supervisor可以实现这个功能,监视对代码的改动,并自动重启nodejs ...