一、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中执行

转自：https://www.cnblogs.com/heshan1992/p/7029431.html

【JS】JS以及CSS对页面的阻塞的更多相关文章

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

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

  2. WOW.js和animate.css让页面滚动时显示动画

    官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画 ...

  3. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  4. 关于controller返回的页面js文件和css文件404问题的正式解决

    谨用此博客记录一下这条卡了两个星期的bug…… 还是之前的问题,通过get方法,后台@Controller返回页面然后弹窗.但是不知道为什么一直所有js文件和css文件都报404…… (之前的博客记录 ...

  5. CSS加载会阻塞页面显示？

    可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下. 原理解析 那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下. ...

  6. js文件 与 css文件 异步加载

    使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...

  7. js实现一个砖头在页面拖拉效果

    用js实现一个砖头在页面,但鼠标点击拖动时,砖头在页面上形成拖拉效果: 刚开始时: 鼠标点击拖动后: 实现代码: <html>   <head>       <meta ...

  8. JS的组成部分、引入页面的方法以及命名规范

    JS的组成部分.引入页面的方法以及命名规范   一.页面是由三部分组成 1)html标签(超文本标记语言) 2)css样式(层叠样式表) 3)javascript脚本编程语言(动态脚本语言) 二.将c ...

  9. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

随机推荐

  1. php explode()函数 语法

    php explode()函数 语法 作用:把字符串打散为数组 语法:explode(separator,string,limit)大理石机械构件 参数: 参数 描述 separator 必需.规定在 ...

  2. 写在Flutter 1.0之前

    开始 大概有半年没有写东西了,感觉时间过得飞快,18年也过一小半,趁着谷歌大会再为Flutter这个耀眼的新星,再吹一波! 都beta3了,1.0还会远吗 Flutter团队依然不紧不慢,一步一个脚印 ...

  3. dubbo漫谈二

    转:腾信视频 阿甘 https://ke.qq.com/course/216518 https://blog.csdn.net/u013142781/article/details/50396621 ...

  4. DPTR是什么寄存器 它的作用是什么 它由哪几个寄存器组成

    数据指针(DPTR)是80C51中一个功能比较特殊的寄存器.从结构DPTR是一个16位的特殊功能寄存器, 其高位字节寄存器用DPH表示,低位字节寄存器用DPL表示,DPTR既可以作为一个16位的寄存器 ...

  5. Union比or快 Using UNION is faster when it comes to cases like scan two different column。

    problem: 595. Big Countries A country is big if it has an area of bigger than 3 million square km or ...

  6. codeforces 557D Vitaly and Cycle

    题意简述 给定一个图 求至少添加多少条边使得它存在奇环 并求出添加的方案数 (注意不考虑自环) ---------------------------------------------------- ...

  7. HttpServletRequest 对文件上传的支持

    此前,对于处理上传文件的操作一直是让开发者头疼的问题,因为 Servlet 本身没有对此提供直接的支持,需要使用第三方框架来实现,而且使用起来也不够简单.Servlet 3.0 已经提供了这个功能,而 ...

  8. 创建网关项目(Spring Cloud Gateway)

    创建网关项目 加入网关后微服务的架构图 创建项目 POM文件 <properties> <java.version>1.8</java.version> <s ...

  9. flink批处理中的source以及sink介绍

    一.flink在批处理中常见的source flink在批处理中常见的source主要有两大类: 1.基于本地集合的source(Collection-based-source) 2.基于文件的sou ...

  10. python函数装饰器详解

    python装饰器(fuctional decorators)简单来说就是修改其他函数的函数. 这样的函数需要满足两个个条件: 1.不能修改原函数的源代码 2.不能改变原函数的调用方式 需要达到的效果 ...