JavaScript 性能

Web性能是客觀的衡量指標(biāo)，也是加載時(shí)間和運(yùn)行時(shí)用戶(hù)的感知和體驗(yàn)。

Web性能是網(wǎng)站加載，交互和響應(yīng)所需的時(shí)間，以及用戶(hù)交互過(guò)程中內(nèi)容的平滑程度。

許多功能會(huì)影響性能，包括延遲，應(yīng)用程序大小，DOM節(jié)點(diǎn)數(shù)，發(fā)出的資源請(qǐng)求數(shù)，JavaScript性能，CPU負(fù)載等。

如何提升Web性能？

減少循環(huán)活動(dòng)

可以放在循環(huán)外部的語(yǔ)句 或 賦值將使循環(huán)運(yùn)行更快。

在下面的示例中，每次循環(huán)時(shí)，我們都訪問(wèn)數(shù)組的length屬性：

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

在下面的示例中，我們?cè)谘h(huán)外部訪問(wèn)length屬性，并使循環(huán)運(yùn)行更快：

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

提高DOM訪問(wèn)效率

與其他JavaScript語(yǔ)句相比，訪問(wèn)HTML DOM的速度非常慢。

如果需要多次訪問(wèn)DOM元素，請(qǐng)?jiān)L問(wèn)一次，并將其用作局部變量。

將JavaScript放在頁(yè)面底部

將腳本放在頁(yè)面正文的底部，使瀏覽器可以首先加載頁(yè)面。

在下載腳本時(shí)，瀏覽器將不會(huì)啟動(dòng)任何其他下載，并且所有解析和渲染活動(dòng)都可能被阻止。

一種代替方法是在腳本標(biāo)記中使用defer="true"。該延遲該腳本應(yīng)的頁(yè)面后執(zhí)行屬性指定已完成解析，但它僅適用于外部腳本。

不要使用“with”關(guān)鍵字

with關(guān)鍵字被認(rèn)為是“雞肋”，因?yàn)樗嬖谝恍┓浅Ａ钊司趩实娜毕荨?/p>

盡管 with簡(jiǎn)化了處理本地屬性的過(guò)程，但是使用with會(huì)增加在其他作用域中查找變量的開(kāi)銷(xiāo)。

with嚴(yán)格模式下不允許使用關(guān)鍵字。

最少的HTTP請(qǐng)求

通過(guò)組合外部文件并將JavaScript直接包含在HTML頁(yè)面中，從而最小化呈現(xiàn)頁(yè)面的HTTP請(qǐng)求。

每次唯一的HTTP訪問(wèn)服務(wù)器時(shí)，都會(huì)導(dǎo)致大量延遲。

不要兩次使用相同的腳本

重復(fù)的腳本將對(duì)性能產(chǎn)生重大影響。重復(fù)的腳本將在HTTP上創(chuàng)建不必要的請(qǐng)求，尤其是在IE瀏覽器中。

不要使用eval()

盡管該eval()函數(shù)是運(yùn)行任意代碼的好方法，但是傳遞給eval函數(shù)的每個(gè)字符串都必須即時(shí)進(jìn)行解析和執(zhí)行。每次執(zhí)行到達(dá)eval函數(shù)調(diào)用時(shí)，都產(chǎn)生開(kāi)銷(xiāo)。