menu
more_vert

JS以及CSS对页面的阻塞

作者:dayu

650) this.width=650;" src="/img/fz.gif" alt="复制代码" />

<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8">
<title>内嵌JS会阻塞页面上的所有内容的呈现</title></head><body><div><ul>
<li>blogjavaspanonload="if(this.width>650) this.width=650;" src="/img/fz.gif" alt="复制代码" />

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

(2)外联脚本阻塞

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

技术分享

<!DOCTYPEhtml><htmllang="en"><head>
<metacharset="UTF-8">
<title>外联JS文件只会阻塞后面的资源的下载和呈现</title></head><body><ul>
<li>blogjavaspanonload="if(this.width>650) this.width=650;" src="/img/fz.gif" alt="复制代码" />

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

技术分享


Title

技术分享

fireBug中的时间栈:

技术分享

谷歌中的事件栈:

技术分享

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

(2)内嵌脚本导致CSS阻塞页面

技术分享

<!DOCTYPEhtml><html><head>
<metacharset="UTF-8">
<title>Title</title>
<linktype="text/css"rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css"/>
<scripttype="text/javascript">
functiona(){};</script></head><body><imgsrc="http://www.blogjava.net/images/logo.gif"/><imgsrc="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"/></body></html>

技术分享

fireBug中的时间栈:

技术分享

谷歌中的时间栈:

技术分享

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

(2)外联脚本

技术分享

<!DOCTYPEhtml><html><head>
<metacharset="UTF-8">
<title>Title</title>
<linktype="text/css"rel="stylesheet"href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css"/>
<scripttype="text/javascript"src="fun.js"></script><!--这里fun中的内容就是a方法--></head><body><imgsrc="http://www.blogjava.net/images/logo.gif"/><imgsrc="http://csdnimg.cn/www/images/csdnindex_piclogo.gif"/></body></html>

技术分享

技术分享

技术分享

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

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

(1)尽量合并脚本减少<script>的出现

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

(3)使用延迟脚本和异步脚本

(4)内嵌脚本放置在window.onload中执行


JS以及CSS对页面的阻塞

原文地址:http://12945177.blog.51cto.com/12935177/1950781



Processed Time:0.25497698783875

_REQUEST:
Array
(
    [0] => read
    [1] => 94583
)
_SESSION:
Array
(
    [fid] => 4
)