JavaScript 性能

如何加速您的 JavaScript 代碼。

減少循環中的活動

編程經常會用到循環。

循環每迭代一次，循環中的每條語句，包括 for 語句，都會被執行。

能夠放在循環之外的語句或賦值會使循環運行得更快。

差的代碼：

var i;
for (i = 0; i < arr.length; i++) {

更好的代碼：

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

循環每次迭代時，壞代碼就會訪問數組的 length 屬性。

好代碼在循環之外訪問 length 屬性，使循環更快。

減少 DOM 訪問

與其他 JavaScript 相比，訪問 HTML DOM 非常緩慢。

假如您期望訪問某個 DOM 元素若干次，那么只訪問一次，并把它作為本地變量來使用：

實例

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

親自試一試

縮減 DOM 規模

請盡量保持 HTML DOM 中較少的元素數量。

這么做總是會提高頁面加載，并加快渲染（頁面顯示），尤其是在較小的設備上。

每一次試圖搜索 DOM（比如 getElementsByTagName）都將受益于一個較小的 DOM。

避免不必要的變量

請不要創建不打算存儲值的新變量。

通常您可以替換代碼：

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

用這段代碼：

document.getElementById("demo").innerHTML = firstName + " " + lastName

延遲 JavaScript 加載

請把腳本放在頁面底部，使瀏覽器首先加載頁面。

腳本在下載時，瀏覽器不會啟動任何其他的下載。此外所有解析和渲染活動都可能會被阻塞。

HTTP 規范定義瀏覽器不應該并行下載超過兩種要素。

一個選項是在 script 標簽中使用 defer="true"。defer 屬性規定了腳本應該在頁面完成解析后執行，但它只適用于外部腳本。

如果可能，您可以在頁面完成加載后，通過代碼向頁面添加腳本：

實例

<script>
window.onload = downScripts;
function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

避免使用 with

請避免使用 with 關鍵詞。它對速度有負面影響。它也將混淆 JavaScript 作用域。

嚴格模式中不允許 with 關鍵詞。