先决条件：脚本前面存在外部样式

以下试验虽然是在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

JS 和 CSS 的位置对其他资源加载顺序的影响

js和css的顺序关系

Properly including stylesheets and scripts

移除阻止呈现的JavaScript

Thinking Async

css、js的相互阻塞的更多相关文章

  1. JS以及CSS对页面的阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  2. 原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的

    hello~各位亲爱的看官老爷们大家好.估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能.然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付 ...

  3. 定时器详解和应用、js加载阻塞、css加载阻塞

    1.setTimeout().setInterval()详解和应用 1.1 详解: setTimeout.setInterval执行时机 1.2 存在问题: setInterval重复定时器可能存在的 ...

  4. 【JS】JS以及CSS对页面的阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  5. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  6. 开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面

    NanUI是什么 NanUI基于ChromiumFX项目进行开发,它能让你在你的Winform应用程序中使用HTML5/CSS3/Javascript等网页技术来呈现用户界面(类似Electron). ...

  7. NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  8. 关于css,js放置位置的问题

    一天,小明正在网上查找资料,项目中遇到的问题需要通过查阅资料来解决,他看到一个标题很有意思,觉得这应该是他要找的答案,于是他就点了进去,结果进入网站后几秒钟的时间,网页还是一片空白,过了好久才加载完成 ...

  9. 【Python全栈】HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释

    HTML <!--...--> 注释 .CSS/JS //注释 和 /*.....*/ 注释 <!-- -->是HTML的注释标签,使用 < 和 > 是符合HTML ...

随机推荐

  1. C语言---递归反向输出任意长度的字符串

    (该字符串可以包含空格和回车!) [题目要求] 编写一个递归函数,实现将输入的任意长度的字符串反向输出的功能. 例如输入字符串:ABCD,输出字符串:DCBA. [题目分析] 应用递归的思想有时可以很 ...

  2. C#日历上显示节气、阴阳历节假日信息

    近期在做一个工作日历,想在日历上设置工作日,显示请假.加班等相关信息,显示农历日期信息(包括农历日期.节日 .节气).公历信息(节假期). 不能不说,http://www.cnblogs.com/ho ...

  3. [Javascript] Intro to Recursion

    Recursion is a technique well suited to certain types of tasks. In this first lesson we’ll look at s ...

  4. unity3d 版本问题

    version: 4.2.1f4 1. 安装以后,不要启动,把exe拷贝覆盖. 2. 断网(重点,不断的话你试试就知道了) 3. 打开unity3d, 点击load License 4. 把ulf导入 ...

  5. Android的图片压缩类ThumbnailUtils

    从Android 2.2开始系统新增了一个缩略图ThumbnailUtils类,位于framework包下的android.media.ThumbnailUtils位置,可以帮助我们从mediapro ...

  6. POJ 2976 Dropping tests 01分数规划

    给出n(n<=1000)个考试的成绩ai和满分bi,要求去掉k个考试成绩,使得剩下的∑ai/∑bi*100最大并输出. 典型的01分数规划 要使∑ai/∑bi最大,不妨设ans=∑ai/∑bi, ...

  7. Linux crontab命令

    --常用参数:crontab -l               //查看当前用户下的cron任务crontab -e               //编辑当前用户的定时任务crontab -u  jo ...

  8. Apache和Nginx平滑重启

    之前修改了服务器配置都是简单粗暴的用restart重启apache/nginx,据说这样不好.需要平滑重启服务器,避免重启时打断用户行为.然后就根据官方文档了解了一下平滑重启的命令.本文根据Apach ...

  9. poj 3660 Cow Contest （传递闭包）

    /* floyd 传递闭包 开始Floyd 之后统计每个点能到的或能到这个点的 也就是他能和几个人确定胜负关系 第一批要有n-1个 然后每次减掉上一批的人数 麻烦的很 复杂度上天了.... 正难则反 ...

  10. 【转】node-webkit：开发桌面+WEB混合型应用的神器

    顾名思义,node-webkit就是nodejs+webkit. 这样做的好处显而易见,核心奥义在于,用nodejs来进行本地化调用,用webkit来解析和执行HTML+JS. 快速上手 下载node ...