一、JS阻塞

所有的浏览器在下载JS文件的时候，会阻塞页面上的其他活动，包括其他资源的下载以及页面内容的呈现等等，只有当JS下载、解析、执行完，才会进行后面的 操作。在现代的浏览器中CSS资源和图片image资源是并行下载的，在IE6中默认的并行的加载数目是2个，在IE6以后以及其他的浏览器中的默认的并行加载数目是6个。

在浏览器从服务器接收到HTML文档后，并把HTML在内存中转换为DOM树，在转换节点的过程中如果引入了CSS文件以及添加了images，则会在文档加载的同时并行的加载CSS文件以及图片。但是JS不一样，因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现.在没有使用异步加载（async）或者是延迟加载(defer)的情况下,只有在一个JS文件加载解析完后才能加载后面的JS文件。利用延迟脚本和异步脚本可以实现脚本的并行加载。以下讨论都是在没有这两个属性的情况下。

（1）内嵌脚本的阻塞

直接写在HTML文档中的js代码就是内嵌JS，内嵌脚本无需加载，可以直接执行，所以当页面有内嵌的脚本时，可以直接执行，导致会阻塞所有资源的加载和页面的呈现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>内嵌JS会阻塞页面上的所有内容的呈现</title>

</head>

<body>

<div>

<ul>

    <li>blogjavaspan style="color: #800000;"</li>

    <li>CSDNspan style="color: #800000;"</li>

    <li>博客园span style="color: #800000;"</li>

    <li>ABCspan style="color: #800000;"</li>

    <li>AAAspan style="color: #800000;"</li>

</ul>

<span style="color: #800000;"></span>

</div>

<script type="text/javascript">

// 循环5秒钟

var n = Number(new Date());

var n2 = Number(new Date());

while((n2 - n) < (6*1000)){

n2 = Number(new Date());

}

</script>

<ul>

    <li>MSNspan style="color: #800000;"</li>

    <li>GOOGLEspan style="color: #800000;"</li>

    <li>YAHOOspan style="color: #800000;"</li>

</ul>

</body>

</html>

上面的内嵌脚不仅会阻塞第二个ul的展示，也会阻塞第一个ul的展示，页面在5秒前是一片空白，当延迟结束后才展现所有的内容

（2）外联脚本阻塞

外联脚本不一样，外联脚本只有当页面加载到该<script>之后才会加载外联脚本，所以外联脚本只会阻塞其后面的内容的呈现以及资源的下载，在下面的代码中，页面会先展示一部分内容，后面一部分内容在5秒后展现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>外联JS文件只会阻塞后面的资源的下载和呈现</title>

</head>

<body>

<ul>

    <li>blogjavaspan style="color: #800000;"</li>

    <li>CSDNspan style="color: #800000;"</li>

    <li>博客园span style="color: #800000;"</li>

    <li>ABCspan style="color: #800000;"</li>

    <li>AAAspan style="color: #800000;"</li>

</ul>

<script src="定时.js"></script><!--定时中的代码和上面的延迟函数的内容一样的-->

<ul>

    <li>MSNspan style="color: #800000;"</li>

    <li>GOOGLEspan style="color: #800000;"</li>

    <li>YAHOOspan style="color: #800000;"</li>

</ul>

</body>

</html>

二、嵌入JS导致CSS阻塞加载的问题

的

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />

</head>

<body>

<img src="http://www.blogjava.net/images/logo.gif" />

<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" />

</body>

</html>

fireBug中的时间栈：

谷歌中的事件栈：

在上图中CSS和图片是并行下载的，通过时间线可以看出，后面的图片并没有等到CSS文件完全加载完后在加载。

（2）内嵌脚本导致CSS阻塞页面

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />

    <script type="text/javascript">

        function a(){};

    </script>

</head>

<body>

<img src="http://www.blogjava.net/images/logo.gif" />

<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" />

</body>

</html>

fireBug中的时间栈：

谷歌中的时间栈：

通过上图在狐火中由于内嵌脚本的作用使得图片要等到css完全加载完后在加载，即CSS阻塞了图片的加载。其实质是因为浏览器会维持HTML中CSS和JS的顺序，即在JS前面出现的CSS文件需要加载、解析完后才会执行后面的内嵌JS，而内嵌JS又会阻塞后面的内容

（2）外联脚本

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" />

    <script type="text/javascript" src="fun.js"></script><!--这里fun中的内容就是a方法-->

</head>

<body>

<img src="http://www.blogjava.net/images/logo.gif" />

<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" />

</body>

</html>

外联脚本会阻塞后面资源的加载，但是在谷歌浏览器中不管是内联还是外联的脚本均不会阻塞

三、为了不阻塞页面脚本的放置位置

（1）尽量合并脚本减少<script>的出现

（2）尽量使用外联脚本并将脚本放置在<body>底部

（3）使用延迟脚本和异步脚本

（4）内嵌脚本放置在window.onload中执行

JS阻塞以及CSS阻塞的更多相关文章

  1. 行内脚本的位置放置----css阻塞行内脚本

    行内脚本:避免放置在css和其他资源之间. 若在head中,最好放在css样式表之前,如果放置在样式表之后,会引起css阻塞. css阻塞:由于浏览器要保证css和JavaScript的执行顺序,cs ...

  2. 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子

    一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...

  3. 哪些地方会出现css阻塞，哪些地方会出现js阻塞？

    Js的阻塞特性: 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.直到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.为了提高用户体验,新一代浏览器 ...

  4. 【对比分析五】CSS阻塞和JS阻塞

    js 的阻塞特性: 所有浏览器在下载 JS 的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.直到 JS 下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.为了提高用户体验,新 ...

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

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

  6. 哪些地方会出现css阻塞,哪些地方会出现js阻塞？

    js的阻塞特性: 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等. 直到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 为了提高用户体验,新一代浏 ...

  7. JS进阶之非阻塞

    回调函数,阻塞和非阻塞对于初学者来说总是一些不好理解的东西,最好的办法就是通过实际写代码去体会.笔者今天就通过一个例子来简单解释一下JS的非阻塞,分享分享我的理解. 首先回调函数:这是一个异步过程,简 ...

  8. node.js中对同步，异步，阻塞与非阻塞的理解

    我们都知道javascript是单线程的,node.js是一个基于Chrome V8 引擎的 javascript 运行时环境,注意 node.js 不是一门语言,别搞错了. javascript为什 ...

  9. JS异步解决方案之概念理解-----------阻塞和非阻塞，同步和异步，并发和并行，单线程和多线程

    首先记住一句话,JS是单线程的. 单线程意味着什么?单线程意味着 它不能依靠自己实现异步. JS实现的异步,往往都是靠 浏览器.Node 的机制(事件驱动.回调)实现的. 下面让我这个单身狗 以谈恋爱 ...

随机推荐

  1. Web常见约定规范（精选）

    常见的约定规范 (一)HTML约定规范 1,html属性顺序:id class name data-xxx (src for type href)(title alt)(aria-xxx role) ...

  2. 单源最短路Dijkstra算法——matlab实现

    迪杰斯特拉(Dijkstra)算法是典型最短路径算法,用于计算一个节点到其他节点的最短路径. 它的主要特点是以起始点为中心向外层层扩展(广度优先搜索思想),直到扩展到终点为止. 基本思想 通过Dijk ...

  3. TP5学习基础二：目录结构、URL路由、数据操作

    一.安装1.使用git或者composer(composer update)进行实时更新,区别在于git不会清空核心框架目录而composer会清空.2.使用官网打包好的TP压缩包(解压即可用)-&g ...

  4. js，jQuery和DOM操作的总结（一）

    废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...

  5. 根据优先关系矩阵使用逐次加一发构造优先函数（Java）

    若已知运算符之间的优先关系,可按如下步骤构造优先函数: 1.对每个运算符a(包括#在内)令f(a)=g(a)=1 2.如果a⋗b且f(a)<=g(b)令f(a)=g(b)+1 3.如果a⋖b且f ...

  6. Github开源：Sheng.RabbitMQ.CommandExecuter （RabbitMQ 的命令模式实现）

    [Github]:https://github.com/iccb1013/Sheng.RabbitMQ.CommandExecuter Sheng.RabbitMQ.CommandExecuter 是 ...

  7. WPF+MVVM学习总结 DataGrid简单案例

    一.WPF概要 WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分.它提供了统一的 ...

  8. hdu1541 Stars 树状数组

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1541 题目大意就是统计其左上位置的星星的个数 由于y已经按升序排列,因此只用按照x坐标生成一维树状数组 ...

  9. Linux上bash的部分基础特性:

    命令补全: tab shell程序在接收到用户执行命令的请求,分析完成后,最左侧的字符串会被当做命令 命令查找机制: 查找内部命令: 根据PATH环境变量中设定的目录,自左而右逐个搜索目录下的文件名 ...

  10. 适配器模式（Adpater Pattern）

    适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 适配器模式的用途 用电器做例子,笔记本电脑的插头一般都是三相的,即除了阳极.阴极 ...