我們有很多理由需要好好考慮一下JavaScript存在的意義（它做了什么，怎么做的以及它有多重要）。

如今，超過(guò)一半的網(wǎng)絡(luò)流量來(lái)自移動(dòng)設(shè)備，但這些設(shè)備的許多操作都是在極其不穩(wěn)定的網(wǎng)絡(luò)連接下進(jìn)行的，例如，你想要在10秒內(nèi)單獨(dú)加載完畢腳本文件幾乎是不可能的。

如果您正在使用單頁(yè)應(yīng)用，因?yàn)闆](méi)有合理的內(nèi)容反饋，這可能比您想象的要大得多 – 用戶將長(zhǎng)時(shí)間只能看到部分內(nèi)容的白屏。

毫無(wú)疑問(wèn)，性能很重要。但JavaScript對(duì)我們的網(wǎng)站有什么常見(jiàn)的負(fù)面影響呢？我們目前又應(yīng)該如何評(píng)估性能呢？

讓我們簡(jiǎn)單(但是有建設(shè)性)地了解一下JavaScript的性能花銷

我們?cè)谠u(píng)估JavaScript的性能影響時(shí)，通常會(huì)關(guān)注以下幾點(diǎn)：

頁(yè)面中阻塞渲染的腳本文件的數(shù)量

腳本下載所需的時(shí)間以及傳輸?shù)臄?shù)據(jù)量

但是我們經(jīng)常忽略的是腳本加載之后發(fā)生的事情……

一旦設(shè)備下載了腳本，就必須對(duì)其進(jìn)行解析，轉(zhuǎn)換為字節(jié)碼，編譯并執(zhí)行。

正是因?yàn)椴煌脑O(shè)備解析和編譯所消耗的時(shí)間長(zhǎng)短各有不同，導(dǎo)致了當(dāng)你在3000美元的MacBook和使用兩年的智能機(jī)上訪問(wèn)同一個(gè)網(wǎng)站時(shí)速度會(huì)有天壤之別。                                                  

上述圖形比較了常規(guī)桌面瀏覽器與低端移動(dòng)設(shè)備上的Chrome解析/編譯時(shí)間。這張圖片引用自Addy Osmani的優(yōu)秀文章“JavaScript Start-up Performance”。

為了搞清楚“這個(gè)網(wǎng)站究竟可以有多快？”這個(gè)問(wèn)題，我們作了一個(gè)實(shí)驗(yàn)，移除了所有腳本從而建立了一個(gè)性能基線。

Calibre這個(gè)工具旨在幫助團(tuán)隊(duì)更好地了解性能和用戶體驗(yàn)領(lǐng)域，您可以直接將您的站點(diǎn)分別在有無(wú)JS文件的環(huán)境下進(jìn)行比較，作為T(mén)est Profile（測(cè)試配置文件）。

網(wǎng)站建設(shè)

現(xiàn)在您進(jìn)行有無(wú)使用JavaScript兩種情況的測(cè)試

我啟用了禁用腳本的功能，并對(duì)一些熱門(mén)網(wǎng)站在是否使用JavaScript兩種情景下進(jìn)行了測(cè)試。

測(cè)試的結(jié)果相當(dāng)驚人。下面是衛(wèi)報(bào)網(wǎng)站（The Guardian）的測(cè)試結(jié)果：                                                                                                                                                                                                                                                                                                                                                                                                                       

左圖：無(wú)JS，3G連接，iPhone 6 – 所有內(nèi)容在不到5秒內(nèi)完全可見(jiàn)。右圖：3G連接，iPhone 6 – 所有內(nèi)容約10秒鐘完全可見(jiàn)，onLoad事件在大約第20秒時(shí)被調(diào)用。

頁(yè)面完全可見(jiàn)所需的時(shí)間

先來(lái)看“無(wú)js”版本（左圖） – 所有內(nèi)容在5秒鐘內(nèi)可見(jiàn)。使用3G網(wǎng)絡(luò)訪問(wèn)時(shí)這個(gè)速度很令人印象深刻。

然而，“有js”版本的情況是相當(dāng)不同的 – 頭條文章的圖片在第9.5秒才出現(xiàn)，后面是有一些細(xì)微的變化（包括天氣，字體，最后是“頭條新聞”文章），一直到20秒左右才全部展示完畢。

數(shù)據(jù)

當(dāng)允許加載JavaScript時(shí)，衛(wèi)報(bào)網(wǎng)站發(fā)送了超過(guò)115個(gè)請(qǐng)求，總量是3.41Mb，而禁用JavaScript時(shí)，從61個(gè)請(qǐng)求中傳輸?shù)臄?shù)據(jù)減少了超過(guò)50％-總量只有1.59MB。顯然天氣，字體和頭條文章的鏈接這幾個(gè)地方消耗了很多成本。

很明顯，傳輸?shù)臄?shù)據(jù)并不全是JS腳本，還包括額外的內(nèi)容，圖標(biāo)，甚至一些樣式 – 但情況是清楚的：這些內(nèi)容不是必須的，并且它們破壞了這個(gè)頁(yè)面的性能。

以上【 如果你的網(wǎng)站沒(méi)有 JavaScript 】的內(nèi)容由達(dá)設(shè)互動(dòng)（http://www.allclubs.com.cn）為您提供，本文網(wǎng)址 ： http://www.allclubs.com.cn/news/121.html ，轉(zhuǎn)載請(qǐng)注明出處！更多有關(guān)深圳網(wǎng)站建設(shè)，微信小程序、電商平臺(tái)建設(shè)、系統(tǒng)開(kāi)發(fā)等互聯(lián)網(wǎng)應(yīng)用服務(wù)都可以聯(lián)系我們。熱線：130 7784 6582