移除阻止呈現(xiàn)的JavaScript

歡迎訪問(wèn)個(gè)人原創(chuàng)地址：http://www.phpthinking.com/archives/443

瀏覽器必須先解析網(wǎng)頁(yè)，然后才能將其呈現(xiàn)給用戶。如果瀏覽器在解析過(guò)程中遇到系統(tǒng)阻止的外部腳本，必須停止解析并且下載該JavaScript。每次遇到這種情況時(shí)，瀏覽器都會(huì)增加一個(gè)網(wǎng)絡(luò)往返過(guò)程，這樣就會(huì)導(dǎo)致首次呈現(xiàn)網(wǎng)頁(yè)的時(shí)間延遲。

建議

建議您以內(nèi)嵌方式處理呈現(xiàn)首屏區(qū)域所需的JavaScript，并讓為網(wǎng)頁(yè)添加其他功能所需的JavaScript延遲加載，直到首屏內(nèi)容發(fā)送完畢為止。請(qǐng)注意，要通過(guò)這種方式縮短加載時(shí)間，您還必須優(yōu)化CSS發(fā)送過(guò)程。

內(nèi)嵌較小的JavaScript

如果外部腳本較小，您可以直接將它們添加到HTML文檔。通過(guò)這種方式內(nèi)嵌較小文件可讓瀏覽器繼續(xù)呈現(xiàn)網(wǎng)頁(yè)。例如，如果HTML文檔如下所示：

資源small.js如下所示：

那么，您即可按如下這樣內(nèi)嵌腳本：

這樣，您就可以將small.js內(nèi)嵌在HTML文檔中，從而消除對(duì)它的外部請(qǐng)求。

延遲加載JavaScript

為防止JavaScript阻止網(wǎng)頁(yè)加載，建議您在加載JavaScript時(shí)使用HTML異步屬性。例如：

如果您的JavaScript資源使用的是document.write，則使用異步加載就會(huì)不安全。我們建議您重寫使用document.write的腳本，以改用其他技術(shù)。

此外，異步加載JavaScript時(shí)，如果您的網(wǎng)頁(yè)加載互相依賴的腳本，請(qǐng)務(wù)必謹(jǐn)慎，以確保您的應(yīng)用以合適的依賴順序加載腳本。

常見(jiàn)問(wèn)題解答

如果我使用的是JavaScript庫(kù)（例如jQuery），該怎么做？

很多JavaScript庫(kù)（例如jQuery）都可用來(lái)增強(qiáng)網(wǎng)頁(yè)，從而為網(wǎng)頁(yè)增添額外的互動(dòng)性、動(dòng)畫和其他效果。不過(guò)，這些行為大多可在首屏內(nèi)容呈現(xiàn)后再安全添加。請(qǐng)考慮是否可以將此類JavaScript的執(zhí)行和加載延遲到網(wǎng)頁(yè)加載后。

如果我使用JavaScript框架來(lái)構(gòu)造網(wǎng)頁(yè)，該如何操作？

如果網(wǎng)頁(yè)內(nèi)容由客戶端JavaScript構(gòu)造，那么您應(yīng)考慮一下是否可以嵌入相關(guān)的JavaScript模塊，從而避免產(chǎn)生額外的網(wǎng)絡(luò)往返過(guò)程。同樣，利用服務(wù)器端呈現(xiàn)可顯著提升首次網(wǎng)頁(yè)加載的效果，方式如下：在服務(wù)器上呈現(xiàn)JS模板，并將結(jié)果內(nèi)嵌到HTML，然后在應(yīng)用加載后使用客戶端模板。

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)