高性能JavaScript之加载和执行_js 读取动态加载的属性-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38464112/article/details/82840036

探讨JS在浏览器中的阻塞性质及其对页面渲染的影响，分析<script>标签位置的重要性，提出优化策略以减少加载延迟。

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

JS在浏览器中的性能，可以认为是开发者所面临的最重要的可行性问题。这个问题因JS的阻塞特性变得复杂，也就是说当浏览器在执行JS代码时，不能同时做其他任何事情。事实上，大多数浏览器都使用单一进程来处理UI（用户界面）更新和JavaScript脚本执行，所以同一时刻只能做其中一件事情。JS执行过程耗时越久，浏览器等待响应用户输入的时间就越长。

从基础层面来说，这意味着<script>标签每次出现都霸道地让页面等待脚本的解析和执行。无论当前的JS代码是内嵌的还是在外链文件中,页面的下载和渲染都必须停下来等待脚本的执行完成。这在页面生存周期中是必要的，因为脚本执行过程中可能会修改页面的内容。一个典型的例子就是在页面中使用document.write()(经常用来显示广告)。

例如:

<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Script Example</title>
       
    </head>

    <body>
      <p>
      <script>
      document.write("The date is "+(new Date()).toDateString());
      </script>
      </p>
    </body>
</html>

当浏览器遇到<script>标签时，当前的HTML页面无从获知JS是否会向<p>标签添加内容，或引入其他元素，或关闭该标签。因此，这时浏览器会停滞处理页面，先执行JS代码，然后再继续解析和渲染页面。同样的情况也发生在使用src的属性加载JS的过程中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。

1.1脚本位置

这里先说说HTML4规范，HTML4规范指出<script>标签可以放在HTML文档的<head>或<body>中，并允许出现多次。按照惯例，<script>标签用来加载出现在<head>中的外链JS文件中，挨着的<link>标签用来加载外部CSS文件或其他页面元信息。也就是说，把与样式和行为有关的脚本放在一起，并先加载它们，使得页面能够显示正确的外观和交互。

例如:

<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Script Example</title>
        <script src="file1.js"></script>
        <script src="file2.js"></script>
        <script src="file3.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
       
    </head>

    <body>
      <p>
Hello World
      </p>
    </body>
</html>

这些看似正常的代码实际上有十分严重的性能问题:在<head>中加载了三个JS文件。由于脚本会阻塞页面的渲染，直到它们全部下载并执行完成后，页面的渲染才会继续。

因此页面的性能问题会很明显。请记住，浏览器在解析到<body>标签之前，不会渲染页面的任何部分。把脚本放到页面顶部将会导致明显的延迟，通常表现为显示空白页面，用户无法浏览内容，也无法与页面进行交互。

所以通常建议像JS脚本一般都放在</body>前,也就是页面最底下，而CSS文件放在<head></head>之间。虽然说CSS文件过大也会导致延迟，但是这种延迟是可以接受的，如果是JS脚本与CSS脚本放在<head></head>之间如上面的代码所示，那样的话，延迟会显得十分明显。因此推荐<script>标签尽可能放到<body>标签底部，</body>标签之前,以尽量减少对整个页面下载的影响。