高性能JavaScript之加载和运行

时间 2020-01-14

原文原文链接

JavaScript 在浏览器中的性能，可认为是开发者所要面对的最重要的可用性问题。此问题因JavaScript的阻塞特征而复杂，也就是说，当JavaScript 运行时其余的事情不能被浏览器处理。事实上，大多数浏览器使用单进程处理UI 更新和JavaScript 运行等多个任务，而同一时间只能有一个任务被执行。JavaScript运行了多长时间，那么在浏览器空闲下来响应用户输入以前的等待时间就有多长。javascript

从基本层面说，这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的JavaScript 代码是内联的仍是包含在一个不相干的外部文件中，页面下载和解析过程必须停下，等待脚本完成这些处理，而后才能继续。这是页面生命周期必不可少的部分，由于脚本可能在运行过程当中修改页面内容。典型的例子是document.write()函数，例如：css

<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
    <script type="text/javascript">
        document.write("The date is " + (new Date()).toDateString());
    </script>
</p>
</body>
</html>

当浏览器遇到一个<script>标签时，正如上面HTML 页面中那样，没法预知JavaScript 是否在<p>标签中添加内容。所以，浏览器停下来，运行此JavaScript 代码，而后再继续解析、翻译页面。一样的事情发生在使用src 属性加载JavaScript 的过程当中。浏览器必须首先下载外部文件的代码，这要占用一些时间，而后解析并运行此代码。此过程当中，页面解析和用户交互是被彻底阻塞的。html

一个<script>标签能够放在HTML 文档的<head>或<body>标签中，能够在其中屡次java

出现。传统上，<script>标签用于加载外部JavaScript 文件。<head>部分除此类代码外，还包含<link>标签用于加载外部CSS 文件和其余页面中间件。也就是说，最好把风格和行为所依赖的部分放在一块儿，首先加载他们，使得页面能够获得正确的外观和行为浏览器

由于脚本阻塞其余页面资源的下载过程，因此推荐的办法是：将全部<script>标签放在尽量接近<body>ide

标签底部的位置，尽可能减小对整个页面下载的影响。例如：函数

<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>Hello world!</p>
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
    <script type="text/javascript" src="file3.js"></script>
</body>
</html>

因为每一个<script>标签下载时阻塞页面解析过程，因此限制页面的<script>总数也能够改善性能。这个规则对内联脚本和外部脚本一样适用。每当页面解析碰到一个<script>标签时，紧接着有一段时间用于代码执行。最小化这些延迟时间能够改善页面的总体性能。性能

这个问题与外部JavaScript 文件处理过程略有不一样。每一个HTTP 请求都会产生额外的性能负担，下载一个100KB 的文件比下载四个25KB 的文件要快。总之，减小引用外部脚本文件的数量。典型的，一个大型网站或网页应用须要屡次请求JavaScript 文件。你能够将这些文件整合成一个文件，只须要一个<script>标签引用，就能够减小性能损失。网站