JavaScript 性能调优

最新推荐文章于 2025-06-17 14:52:18 发布

zqmattack

最新推荐文章于 2025-06-17 14:52:18 发布

阅读量1.2k

点赞数 27

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/zqmattack/article/details/148076742

版权

从加载上优化：合理放置脚本位置

由于 JavaScript 的阻塞特性，在每一个<script>出现的时候，无论是内嵌还是外链的方式，它都会让页面等待脚本的加载解析和执行，

并且<script>标签可以放在页面的<head>或者<body>中，因此，如果我们页面中的 css 和 js 的引用顺序或者位置不一样，即使是同样

的代码，加载体验都是不一样的。示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>js 引用的位置性能优化</title>
        <script type="text/javascript" src="index-1.js"></script>
        <script type="text/javascript" src="index-2.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

以上代码是一个简单的 html 界面，其中加载了两个 js 脚本文件和一个 css 样式文件，由于 js 的阻塞问题，当加载到 index-1.js 的时候，

其后面的内容将会被挂起等待，直到index-1.js 加载、执行完毕，才会执行第二个脚本文件 index-2.js，这个时候页面又将被挂起等待脚

本的加载和执行完成，一次类推，这样用户打开该界面的时候，界面内容会明显被延迟，我们就会看到一个空白的页面闪过，这种体验是

明显不好的，因此我们应该尽量的让内容和样式先展示出来，将 js 文件放在最后，以此来优化用户体验。如下所示:

<!DOCTYPE html>
<html>

    <head>
     <meta charset="utf-8">
        <meta name="vi

最低0.47元/天解锁文章