前端优化之-css与js阻塞问题

来源：互联网发布：ubuntu怎么看硬盘大小编辑：程序博客网时间：2024/06/06 02:51

如果js脚本（行内或者外部）之前有css样式文件，则js将等到css渲染完成再执行，css之后的js将按照顺序执行。

示例

index.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script>        var begin = new Date().getTime();        console.log('begin');    </script>    <link rel="stylesheet" type="text/css" href="test.css">    <script>        console.log(new Date().getTime()-begin);    </script>    <link rel="stylesheet" type="text/css" href="test1.css">    <script src="test.js"></script></head><body>    <h1>this is a test</h1>    <img src="1.jpg">    <hr>    <span>this is a test</span></body></html>

test.js:

console.log('test.js')

使用fiddler模拟延迟：

if(oSession.uriContains('test.css')){    oSession["response-trickle-delay"] = "3000";}

结果：
这里写图片描述

浏览器之所以这么做，主要是为了保持css和js的执行顺序，因为js脚本中可能有依赖于样式表的代码，例如获取某个元素的宽度。根据资源下载时间流图可以看出，行内脚本的执行阻塞并不会阻塞其后资源的下载，只有外部脚本的下载过程中会阻塞其后面资源的下载（最新的webkit浏览器中外部js的下载将不会阻塞其他资源的下载，而其他某些浏览器中外部js的下载和执行将阻塞其后续资源的加载）。

阅读全文

0 0