Heim > Artikel > Web-Frontend > So verbessern Sie die Effizienz beim Laden und Ausführen von JavaScript

So verbessern Sie die Effizienz beim Laden und Ausführen von JavaScript

高洛峰Original: 2017-02-03 13:23:511401Durchsuche

Vorwort

Unabhängig davon, ob der aktuelle JavaScript-Code eingebettet oder in einer externen Linkdatei enthalten ist, muss das Herunterladen und Rendern der Seite angehalten und auf den Abschluss der Skriptausführung gewartet werden. Je länger der JavaScript-Ausführungsprozess dauert, desto länger wartet der Browser auf die Reaktion auf Benutzereingaben. Der Grund, warum Browser das Herunterladen und Ausführen von Skripten blockieren, liegt darin, dass das Skript möglicherweise den Namensraum der Seite oder JavaScript ändert, was sich auf den Inhalt nachfolgender Seiten auswirkt.

Ein typisches Beispiel ist die Verwendung von document.write() auf der Seite.

Beispiel für eingebetteten JavaScript-Code

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

Wenn der Browser auf das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag stößt, kann die aktuelle HTML-Seite nicht erkennen, ob JavaScript wird an gesendet. Das e388a4556c0f65e1904146cc1a846bee-Tag fügt Inhalt hinzu, führt andere Elemente ein oder entfernt sogar das Tag. Daher stoppt der Browser zu diesem Zeitpunkt die Verarbeitung der Seite, führt zuerst den JavaScript-Code aus und fährt dann mit dem Parsen und Rendern der Seite fort. Die gleiche Situation tritt auf, wenn JavaScript mit dem src-Attribut geladen wird. Der Browser muss sich zunächst die Zeit nehmen, den Code in der externen Linkdatei herunterzuladen, ihn dann zu analysieren und auszuführen. Während dieses Vorgangs werden das Rendern der Seite und die Benutzerinteraktion vollständig blockiert.

Skriptspeicherort

Die HTML 4-Spezifikation besagt, dass das 3f1c4e4b6b16bbbd69b2ee476dc4f83a im 93f0f5c25f18dab9d176bd4f6de5d30e platziert werden kann. und mehrfaches Vorkommen ist zulässig. Webentwickler sind es im Allgemeinen gewohnt, das JavaScript externer Links in 93f0f5c25f18dab9d176bd4f6de5d30e zu laden und dann das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag zu verwenden, um die CSS-Dateien externer Links oder andere Seiteninformationen zu laden.

Beispiel für eine ineffiziente Skriptspeicherung

<html>
<head>
 <title>Source Example</title>
 <script type="text/javascript" src="script1.js"></script>
 <script type="text/javascript" src="script2.js"></script>
 <script type="text/javascript" src="script3.js"></script>
 <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 <p>Hello world!</p>
</body>
</html>

Dieser gängige Ansatz birgt jedoch schwerwiegende Leistungsprobleme. Im Beispiel in Listing 2 stoppt der Browser beim Parsen des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags (Zeile 4) das Parsen des Inhalts, lädt zuerst die Skriptdatei herunter und führt den darin enthaltenen Code aus, d. h. die nachfolgenden Stile .css-Stildatei und das 6c04bd5ca3fcae76e30b72ad730ca86d-Tag können nicht geladen werden, da das 6c04bd5ca3fcae76e30b72ad730ca86d-Tag nicht geladen werden kann. Daher bleibt die Seite leer, bis der JavaScript-Code vollständig ausgeführt ist.

Da Skripte den Download anderer Ressourcen auf der Seite blockieren, wird empfohlen, alle 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags so weit wie möglich am Ende des 6c04bd5ca3fcae76e30b72ad730ca86d-Tags zu platzieren Auswirkungen auf den Download der gesamten Seite.

Beispiel für die empfohlene Codeplatzierung

<html>
<head>
 <title>Source Example</title>
 <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 <p>Hello world!</p>
  
 <!-- Example of efficient script positioning -->
 <script type="text/javascript" src="script1.js"></script>
 <script type="text/javascript" src="script2.js"></script>
 <script type="text/javascript" src="script3.js"></script>
</body>
</html>

Dieser Code zeigt die empfohlene Platzierung des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags in einem HTML-Dokument. Auch wenn der Skript-Download ein anderes Skript blockiert, sind die meisten Inhalte der Seite bereits heruntergeladen und dem Benutzer angezeigt, sodass der Seiten-Download nicht zu langsam zu sein scheint. Dies ist die erste Regel zur Optimierung von JavaScript: Platzieren Sie Ihre Skripte ganz unten.

Skripte organisieren

Da jedes 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag beim ersten Herunterladen blockiert, hilft es, die Anzahl der 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags zu reduzieren enthält, diese Situation zu verbessern. Dies gilt nicht nur für externe Link-Skripte, sondern auch für die Anzahl eingebetteter Skripte. Jedes Mal, wenn der Browser beim Parsen der HTML-Seite auf ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag stößt, kommt es aufgrund der Ausführung des Skripts zu einer gewissen Verzögerung. Daher wird die Gesamtleistung der Seite erheblich verbessert.

Dieses Problem ist etwas anders, wenn es um JavaScript-Dateien mit externen Links geht. Aufgrund des mit HTTP-Anfragen verbundenen zusätzlichen Leistungsaufwands ist das Herunterladen einer einzelnen 100-KB-Datei schneller als das Herunterladen von fünf 20-KB-Dateien. Allerdings verbessert die Reduzierung der Anzahl externer Skripte auf einer Seite die Leistung.

Normalerweise basiert eine große Website oder Anwendung auf mehreren JavaScript-Dateien. Sie können mehrere Dateien zu einer zusammenführen, sodass Sie nur auf ein 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag verweisen müssen, was den Leistungsverbrauch reduzieren kann. Das Zusammenführen von Dateien kann über Offline-Paketierungstools oder einige Echtzeit-Onlinedienste erfolgen.

Eine besondere Erinnerung ist, dass das Platzieren eines Inline-Skripts nach einem 52a25b17b52424c09a9e188108722f11 dazu führt, dass die Seite blockiert wird und darauf wartet, dass das Stylesheet heruntergeladen wird. Dies geschieht, um sicherzustellen, dass das Inline-Skript bei der Ausführung die genauesten Stilinformationen erhält. Daher wird empfohlen, Inline-Skripte nicht unmittelbar nach dem 2cdf5bf648cf2f33323966d7f58a7f3f-Tag zu platzieren.

Nicht blockierende Skripte

Die Reduzierung der JavaScript-Dateigröße und die Begrenzung der Anzahl von HTTP-Anfragen ist bei funktionsreichen Webanwendungen oder großen Websites nicht immer möglich. Je funktionsreicher eine Webanwendung ist, desto mehr JavaScript-Code ist erforderlich, und obwohl das Herunterladen einer einzelnen größeren JavaScript-Datei nur eine HTTP-Anfrage generiert, kann es den Browser für lange Zeit blockieren. Um dies zu vermeiden, sind spezielle Techniken erforderlich, um JavaScript-Dateien nach und nach so in die Seite zu laden, dass der Browser nicht blockiert wird.

Das Geheimnis nicht blockierender Skripte besteht darin, dass der JavaScript-Code erst dann geladen wird, wenn die Seite vollständig geladen ist. Dies bedeutet, dass das Skript heruntergeladen wird, nachdem das Onload-Ereignis des Fensterobjekts ausgelöst wurde. Es gibt mehrere Möglichkeiten, diesen Effekt zu erzielen.

Lazy-Loading-Skript

HTML 4 为3f1c4e4b6b16bbbd69b2ee476dc4f83a标签定义了一个扩展属性：defer。Defer 属性指明本元素所含的脚本不会修改 DOM，因此代码能安全地延迟执行。defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中，defer 属性会被直接忽略，因此3f1c4e4b6b16bbbd69b2ee476dc4f83a标签会以默认的方式处理，也就是说会造成阻塞。然而，如果您的目标浏览器支持的话，这仍然是个有用的解决方案。

defer 属性使用方法示例

<script type="text/javascript" src="script1.js" defer></script>

带有 defer 属性的3f1c4e4b6b16bbbd69b2ee476dc4f83a标签可以放置在文档的任何位置。对应的 JavaScript 文件将在页面解析到3f1c4e4b6b16bbbd69b2ee476dc4f83a标签时开始下载，但不会执行，直到 DOM 加载完成，即onload事件触发前才会被执行。当一个带有 defer 属性的 JavaScript 文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。

任何带有 defer 属性的3f1c4e4b6b16bbbd69b2ee476dc4f83a元素在 DOM 完成加载之前都不会被执行，无论内嵌或者是外链脚本都是如此。清单 5 的例子展示了defer属性如何影响脚本行为：

defer 属性对脚本行为的影响

<html>
<head>
 <title>Script Defer Example</title>
</head>
<body>
 <script type="text/javascript" defer>
 alert("defer");
 </script>
 <script type="text/javascript">
 alert("script");
 </script>
 <script type="text/javascript">
 window.onload = function(){
 alert("load");
 };
 </script>
</body>
</html>

这段代码在页面处理过程中弹出三次对话框。不支持 defer 属性的浏览器的弹出顺序是：“defer”、“script”、“load”。而在支持 defer 属性的浏览器上，弹出的顺序则是：“script”、“defer”、“load”。请注意，带有 defer 属性的3f1c4e4b6b16bbbd69b2ee476dc4f83a元素不是跟在第二个后面执行，而是在 onload 事件被触发前被调用。

如果您的目标浏览器只包括 Internet Explorer 和 Firefox 3.5，那么 defer 脚本确实有用。如果您需要支持跨领域的多种浏览器，那么还有更一致的实现方式。

HTML 5 为3f1c4e4b6b16bbbd69b2ee476dc4f83a标签定义了一个新的扩展属性：async。它的作用和 defer 一样，能够异步地加载和执行脚本，不因为加载脚本而阻塞页面的加载。但是有一点需要注意，在有 async 的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。

动态脚本元素

文档对象模型（DOM）允许您使用 JavaScript 动态创建 HTML 的几乎全部文档内容。3f1c4e4b6b16bbbd69b2ee476dc4f83a元素与页面其他元素一样，可以非常容易地通过标准 DOM 函数创建：

通过标准 DOM 函数创建3f1c4e4b6b16bbbd69b2ee476dc4f83a元素

var script = document.createElement ("script");
 script.type = "text/javascript";
 script.src = "script1.js";
 document.getElementsByTagName("head")[0].appendChild(script);

新的3f1c4e4b6b16bbbd69b2ee476dc4f83a元素加载 script1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。您甚至可以将这些代码放在93f0f5c25f18dab9d176bd4f6de5d30e部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了 Firefox 和 Opera，他们将等待此前的所有动态脚本节点执行完毕）。当脚本是“自运行”类型时，这一机制运行正常，但是如果脚本只包含供页面其他脚本调用调用的接口，则会带来问题。这种情况下，您需要跟踪脚本下载完成并是否准备妥善。可以使用动态 3f1c4e4b6b16bbbd69b2ee476dc4f83a 节点发出事件得到相关信息。

Firefox、Opera, Chorme 和 Safari 3+会在3f1c4e4b6b16bbbd69b2ee476dc4f83a节点接收完成之后发出一个 onload 事件。您可以监听这一事件，以得到脚本准备好的通知：

通过监听 onload 事件加载 JavaScript 脚本

var script = document.createElement ("script")
script.type = "text/javascript";
  
//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
 alert("Script loaded!");
};
  
script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

Internet Explorer 支持另一种实现方式，它发出一个 readystatechange 事件。3f1c4e4b6b16bbbd69b2ee476dc4f83a元素有一个 readyState 属性，它的值随着下载外部文件的过程而改变。readyState 有五种取值：

微软文档上说，在3f1c4e4b6b16bbbd69b2ee476dc4f83a元素的生命周期中，readyState 的这些取值不一定全部出现，但并没有指出哪些取值总会被用到。实践中，我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个 readyState 值所表示的最终状态并不一致，有时3f1c4e4b6b16bbbd69b2ee476dc4f83a元素会得到“loader”却从不出现“complete”，但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在 readystatechange 事件中检查这两种状态，并且当其中一种状态出现时，删除 readystatechange 事件句柄（保证事件不会被处理两次）：

通过检查 readyState 状态加载 JavaScript 脚本

var script = document.createElement("script")
script.type = "text/javascript";
  
//Internet Explorer
script.onreadystatechange = function(){
 if (script.readyState == "loaded" || script.readyState == "complete"){
 script.onreadystatechange = null;
 alert("Script loaded.");
 }
};
  
script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

大多数情况下，您希望调用一个函数就可以实现 JavaScript 文件的动态加载。下面的函数封装了标准实现和 IE 实现所需的功能：

通过函数进行封装

function loadScript(url, callback){
 var script = document.createElement ("script")
 script.type = "text/javascript";
 if (script.readyState){ //IE
 script.onreadystatechange = function(){
 if (script.readyState == "loaded" || script.readyState == "complete"){
 script.onreadystatechange = null;
 callback();
 }
 };
 } else { //Others
 script.onload = function(){
 callback();
 };
 }
 script.src = url;
 document.getElementsByTagName("head")[0].appendChild(script);
}

此函数接收两个参数：JavaScript 文件的 URL，和一个当 JavaScript 接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步，设置 src 属性，并将3f1c4e4b6b16bbbd69b2ee476dc4f83a元素添加至页面。此 loadScript() 函数使用方法如下：

loadScript()函数使用方法

loadScript("script1.js", function(){
 alert("File is loaded!");
});

您可以在页面中动态加载很多 JavaScript 文件，但要注意，浏览器不保证文件加载的顺序。所有主流浏览器之中，只有 Firefox 和 Opera 保证脚本按照您指定的顺序执行。其他浏览器将按照服务器返回它们的次序下载并运行不同的代码文件。您可以将下载操作串联在一起以保证他们的次序，如下：

通过 loadScript()函数加载多个 JavaScript 脚本

loadScript("script1.js", function(){
 loadScript("script2.js", function(){
 loadScript("script3.js", function(){
 alert("All files are loaded!");
 });
 });
});

此代码等待 script1.js 可用之后才开始加载 script2.js，等 script2.js 可用之后才开始加载 script3.js。虽然此方法可行，但如果要下载和执行的文件很多，还是有些麻烦。如果多个文件的次序十分重要，更好的办法是将这些文件按照正确的次序连接成一个文件。独立文件可以一次性下载所有代码（由于这是异步进行的，使用一个大文件并没有什么损失）。

动态脚本加载是非阻塞 JavaScript 下载中最常用的模式，因为它可以跨浏览器，而且简单易用。

使用 XMLHttpRequest(XHR)对象

此技术首先创建一个 XHR 对象，然后下载 JavaScript 文件，接着用一个动态 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素将 JavaScript 代码注入页面。清单 12 是一个简单的例子：

通过 XHR 对象加载 JavaScript 脚本

var xhr = new XMLHttpRequest();
xhr.open("get", "script1.js", true);
xhr.onreadystatechange = function(){
 if (xhr.readyState == 4){
 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
 var script = document.createElement ("script");
 script.type = "text/javascript";
 script.text = xhr.responseText;
 document.body.appendChild(script);
 }
 }
};
xhr.send(null);

此代码向服务器发送一个获取 script1.js 文件的 GET 请求。onreadystatechange 事件处理函数检查 readyState 是不是 4，然后检查 HTTP 状态码是不是有效（2XX 表示有效的回应，304 表示一个缓存响应）。如果收到了一个有效的响应，那么就创建一个新的3f1c4e4b6b16bbbd69b2ee476dc4f83a元素，将它的文本属性设置为从服务器接收到的 responseText 字符串。这样做实际上会创建一个带有内联代码的3f1c4e4b6b16bbbd69b2ee476dc4f83a元素。一旦新3f1c4e4b6b16bbbd69b2ee476dc4f83a元素被添加到文档，代码将被执行，并准备使用。

这种方法的主要优点是，您可以下载不立即执行的 JavaScript 代码。由于代码返回在3f1c4e4b6b16bbbd69b2ee476dc4f83a标签之外（换句话说不受3f1c4e4b6b16bbbd69b2ee476dc4f83a标签约束），它下载后不会自动执行，这使得您可以推迟执行，直到一切都准备好了。另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。

此方法最主要的限制是：JavaScript 文件必须与页面放置在同一个域内，不能从 CDN 下载（CDN 指"内容投递网络（Content Delivery Network）"，所以大型网页通常不采用 XHR 脚本注入技术。

总结

减少 JavaScript 对性能的影响有以下几种方法：

通过以上策略，可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 网站和应用的实际性能。

补充js加载函数：

function loadJs(url, callback, charset) {
 var head = document.getElementsByTagName("head")[0];
 var script = document.createElement("script");
 if ( !!charset) script.charset = "utf-8";
 script.src = url;
 script.onload = script.onreadystatechange = function() {
 var f = script.readyState;
 if (f && f != "loaded" && f != "complete") return;
 script.onload = script.onreadystatechange = null;
 head.removeChild(script) if (callback) {
 callback() || callback
 };
 };
 head.appendChild(script);
}

// js同步加载
function getScripts(i, linkArray, fn) {
 env || getEnv();
 var script = document.createElement(&#39;script&#39;);
 script.type = &#39;text/javascript&#39;;
 script.src = linkArray[i];
 var head = document.head || document.getElementsByTagName(&#39;head&#39;)[0];
 head.appendChild(script);
  
 if (env.ie && &#39;onreadystatechange&#39; in script && !(&#39;draggable&#39; in script)){ //ie浏览器使用以下方式加载
 script.onreadystatechange = function () {
 if (/loaded|complete/.test(script.readyState)) {
 script.onreadystatechange = null;
 if(i === linkArray.length-1) {
 if (fn) {
  fn();
 }
 } else {
 getScripts(++i, linkArray, fn);
 }
 }
 };
 }else{
 script.onload = function() {
 if(i === linkArray.length-1) {
 if (fn) {
  fn();
 }
 } else {
 getScripts(++i, linkArray, fn);
 }
 };
 }
}

// js存在依赖关系 依次加载
getScripts(0, [
 &#39;http://caibaojian.com/demo/base.js&#39;,
 &#39;http://caibaojian.com/demo/reset.js&#39;], function() {
 alert(&#39;callback&#39;);
});

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

更多JavaScript提高加载和执行效率的方法相关文章请关注PHP中文网！

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Grundlagen der JavaScript-FunktionenNächster Artikel：Ausführliche Erläuterung der Grundlagen der JavaScript-Funktionen

In Verbindung stehende Artikel

Mehr sehen