我要招人

去企业版

首页 > 试题广场 >

css 阻塞和 js 阻塞

[问答题]

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

匹诺曹

js 的阻塞特性：所有浏览器在下载 JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载 JS，但是 JS 下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。

由于浏览器为了防止出现 JS 修改 DOM 树，需要重新构建 DOM 树的情况，所以就会阻塞其他的下载和呈现。

嵌入 JS 会阻塞所有内容的呈现，而外部 JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

CSS 怎么会阻塞加载了？CSS 本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6 下 CSS 都是阻塞加载）

当 CSS 后面跟着嵌入的 JS 的时候，该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面，就不会出现阻塞的情况了。

根本原因：因为浏览器会维持 html 中 css 和 js 的顺序，样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载，所以就会出现上面 CSS 阻塞下载的情况。

嵌入JS应该放在什么位置？

1. 放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

2. 如果嵌入JS放在head中，请把嵌入JS放在CSS头部。

3. 使用 defer（只支持IE）

4. 不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用 setTimeout 来调用

Javascript无阻塞加载具体方式：

1. 将脚本放在底部。<link>还是放在head中，用以保证在js加载前，能加载出正常显示的页面。<script>标签放在</body>前。

2. 阻塞脚本：由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。

3. 非阻塞脚本：等页面完成加载后，再加载js代码。也就是，在 window.onload 事件发出后开始下载代码。

4. defer属性：支持IE4和fierfox3.5更高版本浏览器

5. 动态脚本元素：文档对象模型（DOM）允许你使用js动态创建HTML的几乎全部文档内容。代码如下：

<script>
    var script=document.createElement("script");
    script.type="text/javascript";
    script.src="file.js";
    document.getElementsByTagName("head")[0].appendChild(script);
</script>

此技术的重点在于：无论在何处启动下载，文件额下载和运行都不会阻塞其他页面处理过程，即使在head里（除了用于下载文件的 http 链接）。

编辑于 2015-07-27 15:25:10 回复(0)

LUNU

（1）js
①所有浏览器在下载js，都会阻塞后面的其它活动（包括资源下载和页面呈现），直到js下载、解析、执行完后。
②html在内存中转换DOM树的时候，js可能会改变DOM树，为了防止出现js修改dom树，所以会阻塞其它下载和呈现
③async(异步加载)和defer(延迟加载)，可以实现js并行加载
④内嵌js（无需加载，直接执行的）会阻塞资源下载和整个页面呈现
⑤外联js，只有加载到<script>之后才会加载外联脚本，会阻塞资源下载和后面页面呈现

（2）css
①现代浏览器，css和image是并行加载的，ie6以后是6个，ie6之前是2个
②html在内存中转换DOM树的时候，css和image是并行下载的
③css后内嵌js会导致页面阻塞，原因是html为了维持css和js的顺序，js前面的css需要加载、解析完后才会执行后面内嵌js，导致阻塞（谷歌不会）

（3）优化
①合并脚本，减少内嵌<script>的出现
②使用外联脚本，放到</body>之前
③使用async和defer
④内嵌脚本放到window.onload里面

编辑于 2020-10-09 17:38:03 回复(0)

前三甲

现代浏览器会并行下载资源，css, js, img 都可以。浏览器加载js 的时候，会阻塞dom 的解析； css 资源后面若有js, 浏览器会等待css 加载完毕再解析js。

发表于 2020-03-11 17:49:16 回复(0)

太阳煮的酒

js阻塞：所有浏览器下载js时都会阻止其他一切活动；

css阻塞：当css后面跟着嵌入的js时，会产生css阻塞

发表于 2019-10-15 16:36:43 回复(0)

柠小哀

js 的阻塞特性：所有浏览器在下载 JS 的时候会阻止一切其他活动比如其他资源的下载内容的呈现等等直到 JS 下载解析执行完毕后才开始继续并行下载其他资源并呈现内容为了提高用户体验新一代浏览器都支持并行下载 JS 但是 JS 下载仍然会阻塞其它资源的下载(例如图片 css文件等) 　　嵌入 JS 会阻塞所有内容的呈现而外部 JS 只会阻塞其后内容的显示 2 种方式都会阻塞其后资源的下载也就是说外部样式不会阻塞外部脚本的加载但会阻塞外部脚本的执行 CSS 怎么会阻塞加载了 CSS 本来是可以并行下载的在什么情况下会出现阻塞加载了(在测试观察中 IE6 下 CSS 都是阻塞加载) 　　当 CSS 后面跟着嵌入的 JS 的时候该 CSS 就会出现阻塞后面资源下载的情况而当把嵌入 JS 放到 CSS 前面就不会出现阻塞的情况了　　根本原因：因为浏览器会维持 html 中 css 和 js 的顺序样式表必须在嵌入的 JS 执行前先加载解析完而嵌入的 JS 会阻塞后面的资源加载所以就会出现上面 CSS 阻塞下载的情况

编辑于 2019-05-03 22:36:45 回复(0)

提交观点

问题信息

Javascript HTML

上传者：匹诺曹

难度：

5条回答 705收藏 12682浏览

css 阻塞和 js 阻塞

问题信息

热门推荐

相关试题