JavaScript如何影響網(wǎng)站加載速度
當(dāng)考慮到移動(dòng)網(wǎng)站排名的時(shí)候，我們通常第一個(gè)想到的因素就是網(wǎng)站的加載速度。而加快網(wǎng)站加載速度的方式，通常第一個(gè)想到的都是從圖片的大小入手，這確實(shí)非常有效，但是我們經(jīng)常忽略的影響一個(gè)網(wǎng)站加載速度的因素就是JavaScript,這個(gè)幾乎出現(xiàn)于每個(gè)頁(yè)面代碼中的語(yǔ)言。
在網(wǎng)站的代碼中，HTML(超文本標(biāo)記語(yǔ)言)控制網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容;CSS(層疊樣式表)控制站點(diǎn)在不同設(shè)備上的外觀和展現(xiàn)形式;JavaScript則使頁(yè)面更具交互性和動(dòng)態(tài)性。在現(xiàn)在的網(wǎng)站建設(shè)中，我們都需要用到JS來(lái)讓網(wǎng)頁(yè)具有我們期望的功能。但是JS在滿足我們對(duì)功能的需求的同時(shí)，也對(duì)站點(diǎn)的加載速度產(chǎn)生了影響。在過(guò)去的五年中，僅移動(dòng)網(wǎng)頁(yè)的平均JS大小已經(jīng)從101kb增長(zhǎng)到了387kb。
JavaScript如何影響網(wǎng)站加載速度 網(wǎng)站優(yōu)化 站長(zhǎng) 好文分享 第1張
JavaScript對(duì)站點(diǎn)加載速度的影響是兩方面的。
其一，JS代碼在網(wǎng)頁(yè)大小的占比中，僅次于圖片，排名第二，這會(huì)拖累網(wǎng)頁(yè)的下載速度;
其二，當(dāng)下載完畢后，瀏覽器需要運(yùn)行該JS腳本，這同樣會(huì)拖慢頁(yè)面上其它元素的下載與加載速度，而這些被拖慢的元素可能比JS本身要重要得多。
JavaScript如何影響網(wǎng)站加載速度 網(wǎng)站優(yōu)化 站長(zhǎng) 好文分享 第2張
JS對(duì)站點(diǎn)加載速度的影響取決于其類型
從加載形式上來(lái)講，JS可以分為如下幾類：阻塞型，內(nèi)聯(lián)型，異步加載型以及延后加載型。
1.阻塞型JS
阻塞型JS指的是該JS要與網(wǎng)頁(yè)同步加載，當(dāng)瀏覽器讀取網(wǎng)頁(yè)代碼到有JS的這一行時(shí)，在下載并處理加載完畢對(duì)應(yīng)的JS之前，下面的代碼不會(huì)被讀取與加載。網(wǎng)頁(yè)的展現(xiàn)也會(huì)一直停止直到JS加載完畢。順帶一提，如果你不指定JS的加載樣式，那么JS將會(huì)默認(rèn)為阻塞型加載方式。
2.內(nèi)聯(lián)型JS(inline)
內(nèi)聯(lián)型JS指的是將JS直接寫入網(wǎng)頁(yè)代碼中，而不需要外部調(diào)用。這種腳本與阻塞型相同，當(dāng)瀏覽器讀取到該JS時(shí)，會(huì)優(yōu)先加載JS停止后續(xù)讀取，一直到JS加載完畢。內(nèi)聯(lián)型JS與阻塞型JS不同之處在于無(wú)需單獨(dú)下載調(diào)用的JS包。
3.異步加載型JS
異步加載型JS允許瀏覽器在下載解析JS時(shí)，同時(shí)繼續(xù)解析后面的代碼(分析代碼并構(gòu)建呈現(xiàn)網(wǎng)頁(yè))。它的實(shí)現(xiàn)方式是為JS賦予HTML中的async屬性，告知瀏覽器無(wú)需為了該JS而將其他所有的東西都擱置。
4.延后加載型js
延后加載型js告知瀏覽器在解析并構(gòu)建完成頁(yè)面之前，不要執(zhí)行該js。實(shí)現(xiàn)方式是為該JS賦予defer的屬性。
如何優(yōu)化JS來(lái)加快網(wǎng)站加載速度
首先，網(wǎng)站應(yīng)該盡量減少對(duì)js的依賴，JavaScript經(jīng)常用于執(zhí)行不能用HTML或CSS完成的任務(wù)。隨著W3C逐漸將一些js的特性添加到HTML或CSS標(biāo)準(zhǔn)中，并由瀏覽器實(shí)現(xiàn)，這些能用HTML或CSS達(dá)成的功能就不要使用JS，因?yàn)镠TML / CSS一般而言是更高效的。一個(gè)有效的例子就是現(xiàn)在的自響應(yīng)式圖片已經(jīng)無(wú)需用JS來(lái)實(shí)現(xiàn)，CSS和HTML就可以做到。
其次，盡可能的選擇異步與延后型JS而不要用內(nèi)聯(lián)與阻塞樣式。當(dāng)網(wǎng)站的重要功能或者構(gòu)建都需要依賴JS時(shí)，那么該種JS確實(shí)需要用到阻塞樣式確保網(wǎng)頁(yè)功能與展現(xiàn)的完全。而實(shí)現(xiàn)其他作用的JS，應(yīng)當(dāng)使用異步與延后型JS，確保網(wǎng)頁(yè)首先加載于用戶面前。
第三，減少JS數(shù)量。現(xiàn)今的絕大多數(shù)瀏覽器最多同時(shí)允許六個(gè)請(qǐng)求，如果你的網(wǎng)頁(yè)同步請(qǐng)求數(shù)量超過(guò)了6個(gè)，那么第七個(gè)就需要等到其中一個(gè)加載完畢才會(huì)被執(zhí)行，這會(huì)導(dǎo)致請(qǐng)求與響應(yīng)的時(shí)間更長(zhǎng)，拖慢網(wǎng)站速度。
最后，盡量壓縮JS大小。JS文件越大，就需要越長(zhǎng)的時(shí)間來(lái)解析與運(yùn)行。每多一KB，就多1ms是比較合理的估計(jì)。最大的搜索引擎—谷歌就建議使用UglifyJS或者Google Closure Compiler工具來(lái)減小JS大小。
文章來(lái)源：青島新銳數(shù)字傳媒 微信公眾號(hào)：qdnewray 文章地址：http://www.nmedia.net.cn/view_2929.html
來(lái)源：盧松松博客
