JavaScript 效能優化技巧-js教程-PHP中文網

載入與運行

延期腳本

<scripttype="text/javascript" src="file1.js"defer></script> js文件要在dom加载完成时才会被下载

登入後複製

# 動態腳本元素

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

  无论在何处启动下载，文件的下载和运行都不会阻塞其他页面的处理过程

登入後複製

# XHR 腳本注入

var xhr = newXMLHttpRequest();
  xhr.open("get", "file1.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)

  在html页面中产生内联的js代码，它下载后不会立即执行，所以可以控制它的执行状态

登入後複製

# 推薦做法

<script type = "text/javascript" >
      functionloadScript(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_r("head")[0].appendChild(script);
      }
  loadScript("the-rest.js", function() {
      Application.init();
  }); </script>

登入後複製

資料存取

# 避免with

当代码流执行到一个 with 表达式时，运行期上下文的作用域链被临时改变了。一个新的可变对象将被
  创建，它包含指定对象的所有属性。此对象被插入到作用域链的前端，意味着现在函数的所有局部变量都
  被推入第二个作用域链对象中，所以访问代价更高了（参见下图）。

  通过将 document 对象传递给 with 表达式，一个新的可变对象容纳了 document 对象的所有属性，被插入到作用域链的前端。这使得访问 document 的属性非常快，但是访问局部变量的速度却变慢了，例如 bd 变量。正因为这个原因，最好不要使用 with 表达式。正如前面提到的，只要简单地将 document 存储在一个
  局部变量中，就可以获得性能上的提升。

登入後複製

JavaScript 效能優化技巧

# 此處輸入圖片的描述

# 避免try-catch

在 JavaScript 中不只是 with 表达式人为地改变运行期上下文的作用域链，try-catch 表达式的 catch 子句
  具有相同效果。当 try 块发生错误时，程序流程自动转入 catch 块，并将异常对象推入作用域链前端的一个
  可变对象中。在 catch 块中，函数的所有局部变量现在被放在第二个作用域链对象中。例如： try {
   methodThatMightCauseAnError();
  } catch (ex){
   alert(ex.message); //scope chain is augmented here }

登入後複製

# 如果需要多次存取過深的作用域鍊和原型鏈，存取的內容不會改變時，那應該把需要存取的值賦給局部變數

在 JavaScript 中，数据存储位置可以对代码整体性能产生重要影响。有四种数据访问类型：直接量，变量，数组项，对象成员。它们有不同的性能考虑。

  直接量和局部变量访问速度非常快，数组项和对象成员需要更长时间。

  局部变量比域外变量快，因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深，访问所需的时间就越长。全局变量总是最慢的，因为它们总是位于作用域链的最后一环。

登入後複製

Dom 程式設計

# 這對性能意味著什麼呢？簡單說來，兩個獨立的部分以功能介面連接就會帶來效能損耗。一個很形象的比喻是把 DOM 看成一個島嶼，把 JavaScript（ECMAScript）看成另一個島嶼，兩者之間以一座收費橋連

# 接（參見 John Hrvatin，微軟，MIX09， //m.sbmmt.com/）。每次ECMAScript 需要訪問DOM時，你都需要過橋，交一次「過橋費」。你操作 DOM次數越多，費用就越高。一般的建議是盡量減少過橋次數，努力停留在 ECMAScript 島上。

最小化 DOM 訪問，在 JavaScript 端做盡可能多的事情。
# 在重複存取的地方使用局部變數存放 DOM 引用.
# 小心地處理 HTML 集合，因為他們表現出“存在性”，總是對底層文件重新查詢。將集合的 length 屬性快取到一個變數中，在迭代中使用這個變數。如果經常操作這個集合，可以將集合拷貝到陣列中
# 如果可能的話，使用速度更快的 API，諸如 querySelectorAll()和 firstElementChild、querySelector()等css選擇器
# 注意重繪和重排版；批量修改風格，離線操作 DOM 樹，快取並減少對佈局資訊的存取。
# 動畫中使用絕對座標，使用拖放代理程式。
# 使用事件託管技術最小化事件句柄數量。

演算法與流程控制

# 正如其他程式語言，程式碼的寫法和演算法選用會影響 JavaScript 的運行時間。與其他程式語言不同的是，JavaScript 可用資源有限，所以優化技術更為重要。

for，while，do-while 迴圈的效能特性相似，誰也不比誰更快或更慢。除非你要迭代遍歷一個屬性未知的對象，否則不要使用 for-in 迴圈。
# 當判斷條件較多時，查表法比 if-else 或 switch 更快。
# 如果你遇到一個堆疊溢位錯誤，將方法修改為一個迭代演算法或使用製表法可以避免重複工作。
#
当遇到递归时，如果有一些重复性的返回，就应该用缓存cache存储重复的返回

字符串与正则表达式

字符串

当连接数量巨大或尺寸巨大的字符串时，数组联合是 IE7 和它的早期版本上唯一具有合理性能的方法。如果你不关心 IE7 和它的早期版本，数组联合是连接字符串最慢的方法之一。使用简单的+和+=取而代之，可避免（产生）不必要的中间字符串。

登入後複製

正则表达式

正则表达式并不总是完成工作的最佳工具，尤其当你只是搜索一个文本字符串时。

登入後複製

响应接口

UI 线程

大多数浏览器有一个单独的处理进程，它由两个任务所
  共享：JavaScript 任务和用户界面更新任务。每个时刻只有其中的一个操作得以执行，也就是说当 JavaScript
  代码运行时用户界面不能对输入产生反应，反之亦然。或者说，当 JavaScript 运行时，用户界面就被“锁定”
  了。管理好 JavaScript 运行时间对网页应用的性能很重要

  JavaScript 和 UI 更新共享的进程通常被称作浏览器 UI 线程（虽然对所有浏览器来说“线程”一词不一定准确）。此 UI 线程围绕着一个简单的队列系统工作，任务被保存到队列中直至进程空闲。一旦空闲，队列中的下一个任务将被检索和运行。这些任务不是运行 JavaScript 代码，就是执行 UI更新，包括重绘和重排版（在第三章讨论过）。此进程中最令人感兴趣的部分是每次输入均导致一个或多个任务被加入队列。

登入後複製

JS最佳运行时间是100ms以内

如果该接口在 100毫秒内响应用户输入，用户认为自己是“直接操作用户界面中的对象。”超过 100毫秒意味着用户认为自己与接口断开了。由于 UI 在JavaScript 运行时无法更新，如果运行时间长于 100 毫秒，用户就不能感受到对接口的控制

登入後複製

定时器可用于安排代码推迟执行，它使得你可以将长运行脚本分解成一系列较小的任务。

Ajax 异步JavaScript 和 XML

Ajax 是高性能 JavaScript 的基石。它可以通过延迟下载大量资源使页面加载更快。它通过在客户端和服务器之间异步传送数据，避免页面集体加载。它还用于在一次 HTTP 请求中获取整个页面的资源。通过选择正确的传输技术和最有效的数据格式，你可以显著改善用户与网站之间的互动。

高性能 Ajax 包括：知道你项目的具体需求，选择正确的数据格式和与之相配的传输技术。

作为数据格式，纯文本和 HTML 是高度限制的，但它们可节省客户端的 CPU 周期。XML 被广泛应用普遍支持，但它非常冗长且解析缓慢。JSON 是轻量级的，解析迅速（作为本地代码而不是字符串），交互性与 XML 相当。字符分隔的自定义格式非常轻量，在大量数据集解析时速度最快，但需要编写额外的程序在服务器端构造格式，并在客户端解析。

登入後複製