JS以及CSS对页面的阻塞

一、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对页面的阻塞的更多相关文章

【JS】JS以及CSS对页面的阻塞
一.JS阻塞所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的操作.在现代的浏览器中CSS资源和图片i ...
JS 和 CSS 的位置对其他资源加载顺序的影响
JS 和 CSS 在页面中的位置,会影响其他资源(指 img 等非 js 和 css 资源)的加载顺序,究其原因,有三个值得注意的点: JS 有可能会修改 DOM. 典型的,可能会有 document ...
Asp.Net之后台加载JS和CSS
在Asp.Net开发时,用到的JS库.通用的CSS等,在许多页面都会用到,而每次都需要手动引入,相当麻烦,而且有时一旦忘了引用,还得找半天才能找到问题.那有没有什么办法能够一劳永逸的呢?答案是有的. ...
JS操作CSS随机改变网页背景
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...
js、css的阻塞问题
js.css的阻塞问题这篇文章主要是探索js.css的加载顺序及其影响问题. 下面的代码可以让浏览器阻塞: <!DOCTYPE html> <html lang="en& ...
js和css文件位置对页面性能的影响
翻译了一篇Performance上的关于页面性能的文章<DecIPhering the critical rendering path>,原文在这里.需要进一步整理和了解有关js.css等 ...
CSS加载会阻塞页面显示？
可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下. 原理解析那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下. ...
MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
NFinal中增加生成页面自动带入js和css
增加在WebCompiler.aspx页面中的application.CreateCompile(true);方法里. //写aspx页面的自动提示层 #region 插入js&css com ...

随机推荐

Java 中 Emoji 的正则表达式
一.emoji 的范围查阅维基百科中 emoji 的说明 1. 杂项符号及图形杂项符号及图形一共有768个字符,范围为: U+1F300 - U+1F5FF,在 Java 中正则表达式为: &qu ...
jenkins 构建触发器 Poll SCM 和 Build periodically区别
Poll SCM:定时检查源码变更(根据SCM软件的版本号),如果有更新就checkout最新code下来,然后执行构建动作.我的配置如下: */5 * * * * (每5分钟检查一次源码变化) Bu ...
locust
from locust import HttpLocust,TaskSet,task class UserVue(TaskSet): #tasks = {buy:1,consume:2} #设置权重 ...
NYOJ-171 聪明的kk 填表法普通dp
题目链接: http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=171 聪明的kk 时间限制:1000 ms | 内存限制:65535 KB 难 ...
java常用API之Date类
Date类: 类 Date 表示特定的瞬间,精确到毫秒. 毫秒概念:1000毫秒=1秒毫秒的0点: System.currentTimeMillis() 返回值long类型参数用于获取当前日 ...
SQL Server 2008 R2 Express Profiler
I successfully installed SQL Server Profiler 2008 R2 Profiler without uninstalling SQL 2008 R2 Expre ...
【转载】D3D中的Texture应用示例
原文:D3D中的texture应用示例本文列举了Direct3D中各种纹理应用实现:黑暗贴图,发光贴图,漫反射映射贴图,细节纹理,纹理混合,有较详尽的注解.其中黑暗贴图,发光贴图,细节纹理都是采用多 ...
Kafka系列一基本安装
一配置文件(下载.解压.跳过) # Licensed to the Apache Software Foundation (ASF) under one or more # contributor ...
C#面试题及答案一 <转来的，貌似有看评论说有错误，正在一个个纠正中…… 也望园友们指出>
1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private 私有成员, 在类的内部才可以访问. protected 保护成员 ...
USACO Section1.3
section1.2主要包括5道题和1个编程知识介绍.下面对这6部分内容进行学习. Complete Search 这个翻译成枚举搜索或者穷举搜索.主要用于当写代码时间不够用而且不用考虑程序的效率问题 ...

JS以及CSS对页面的阻塞

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

随机推荐

热门专题