最新的Web開發教程
 

JavaScript性能


如何加快你的JavaScript代碼。


在循環減少活動

環路在編程中通常使用的。

在循環中每個語句,包括for聲明,是循環的每個迭代執行。

搜索可以放置在循環外陳述或分配。

糟糕的代碼:

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

更好的代碼:

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

壞代碼訪問數組的長度屬性中的每個循環迭代的時間。

更好的代碼訪問外循環的長度屬性,使循環運行得更快。


減少DOM訪問

訪問HTML DOM是很慢的,相對於其他JavaScript語句。

如果您希望在訪問DOM元素幾次,一次訪問它,並把它作為一個局部變量:

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規範定義了瀏覽器應該不平行下載超過兩種組分。

另一種方法是使用defer="true"的腳本標籤。 defer屬性指定的頁面已完成解析後,該腳本會被執行,但它僅適用於外部腳本。

如果可能的話,可以通過代碼腳本添加到頁面,在頁面加載後:

<script>
window.onload = downScripts;

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

避免使用

避免使用帶有關鍵字 。 它對速度有負面影響。 它還雜波了JavaScript的作用域。

該關鍵字與嚴格模式不允許的