外部样式 & 外部脚本->加载&阻塞_外部样式会阻塞后续脚本执行吗-优快云博客

本文探讨了外部样式（CSS）与脚本（JS）在网页加载过程中的交互作用，指出CSS会阻塞后续JS执行，直至样式加载完成。通过不同场景测试，包括同步与异步脚本加载，揭示了最佳实践：将脚本置于CSS前，或将CSS内联，以优化网页渲染速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

webkit & Gecko

就Webkit 和 Gecko 来讲，主要的渲染流程大体一样
在这里插入图片描述
测试结果：

外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>var start = +new Date;</script>
  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">
  
</head>
  
<body>
  <script>
    var end = +new Date;
    alert(end-start); //
  </script>
</body>
</html>

在这里插入图片描述
外部样式不会阻塞后续外部脚本的加载，但会阻塞外部脚本的执行

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>var start = +new Date;</script>
  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">
  
</head>
  
<body>
  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></script>
  <div id="result"></div>
  <script>var end = +new Date;console.log(end-start);</script>
  
</body>
</html>

在这里插入图片描述
如果后续外部脚本含有async属性（IE下为defer），则外部样式不会阻塞该脚本的加载与执行

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>var start = +new Date;</script>
  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">
  
</head>
  
<body>
  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async></script>
  <script>var end = +new Date;console.log(end-start);</script>
</body>
</html>