這篇文章主要介紹javascript中影響頁面加載時間的5個常見錯誤分別是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設計、成都網(wǎng)站制作、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務蓬江,十載網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18982081108

如果您的網(wǎng)站在用戶訪問時的加載時間需要很久，那么，這篇文章興許能為您的優(yōu)化工作帶來一些啟發(fā)。不過即便沒能幫您解決你的問題，您也能了解到影響了網(wǎng)站加載時間的幾種常見錯誤是什么。

為什么頁面加載時間這個指標很重要？

頁面的加載時間直接影響到了用戶對網(wǎng)站性能的直觀感受。有調(diào)研數(shù)據(jù)表示，

一旦頁面加載時長超過3秒，那么將會有一半的訪問用戶在等待中而流失。

• 搜索引擎排名 — 頁面加載時間是搜索引擎在搜索結果中對你的網(wǎng)站進行排名的重要依據(jù)之一。因此，網(wǎng)頁的加載時間會影響用戶在Web上查找該網(wǎng)頁的難易程度。

• 轉(zhuǎn)化率 — 頁面加載越快，用戶的參與度就越高。網(wǎng)站速度慢，顯而易見地會導致轉(zhuǎn)化率下降。如果您的網(wǎng)頁加載時間太長，執(zhí)行Call-To-Action(CTA) 將消耗大量的 時間，這段期間用戶的耐心和積極性會被消磨，最終關掉您的網(wǎng)站，而不購買您的產(chǎn)品或使用您提供的服務。

• 用戶體驗 — 網(wǎng)站加載時間越長，用戶就越滿意。因此，客戶的留存率和再次訪問比例會更高。

讓我們看看幾個基于HubSpot所做研究的示例：

• 如果Yahoo將頁面加載時間減少0.4秒，流量可能會增加9%。

• 頁面慢1秒可能會使亞馬遜每年損失16億美元的銷售額。

• Bing搜索的2秒延遲將導致每位訪客的收入損失4.3%，點擊量減少3.75%，查詢量下降1.8%。

根據(jù)上面的數(shù)據(jù)，您可以看出頁面加載時間對您的網(wǎng)站有多么重要。

影響頁面加載時間的因素以及優(yōu)化技巧

影響頁面加載時間的因素很多，在這些錯誤中，我列出了我在建立網(wǎng)站時遇到的比較有代表性的五大錯誤。

1.大量的HTTP請求

每當瀏覽器需要從Web服務器獲取文件、頁面或圖像時，都會發(fā)出一次HTTP請求，之后您可以通過Chrome“開發(fā)人員工具”中的“Network”選項卡去監(jiān)測應用程序是發(fā)出了哪些網(wǎng)絡請求，哪些請求比較耗時等信息。

一般瀏覽器通常將同時發(fā)出的HTTP請求數(shù)限制在4-8個之間。因此，當并發(fā)請求數(shù)量較多時，會產(chǎn)生較長的等待延遲。Yahoo所做的研究表明，您的應用程序加載時間的80%依賴于HTTP請求，減少HTTP的請求總量對加快頁面加載時間是有幫助的。

您可以通過下面的方式來減少Web應用的HTTP請求總量：

• 合并CSS/JS文件 — 您可以嘗試將CSS文件和JS文件分別合并為同一個文件，這樣減少了請求，也無需從服務器檢索多個文件。由于所有CSS文件都是渲染分塊的，因此減少CSS文件將大大縮短頁面加載時間。

• 內(nèi)容按需加載 — 不一次加載應用程序的所有圖像，而是只在需要時加載它們。這種方法被稱為延遲加載或按需加載。當用戶到達站點時，您可以在用戶滾動到該特定位置時才加載圖像，而不是在點擊時就一股腦全部加載。

• 啟用瀏覽器緩存 — 允許緩存靜態(tài)圖片或網(wǎng)站的內(nèi)容，這些內(nèi)容不會經(jīng)常變化。當用戶第二次訪問網(wǎng)站時，緩存可以加載這些內(nèi)容，而無需向服務器發(fā)送新的HTTP請求。這使得內(nèi)容的加載速度更快。

• 服務器支持HTTP/2 — 使用HTTP/2，從瀏覽器到服務器只需要建立一個連接就可以加載一個網(wǎng)站，并且允許同時多個請求。這比為每個資源創(chuàng)建新連接要高效得多。

2. 沒有使用CDN

如果您的網(wǎng)站沒有啟用CDN，則當用戶的物理位置遠離服務器時，加載時間會增加。這些延遲會隨著距離的增加而變得更明顯，并且會影響到對服務器的所有HTTP請求。使用CDN可以縮短頁面加載時間。

CDN是什么？

CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡。CDN是構建在網(wǎng)絡之上的內(nèi)容分發(fā)網(wǎng)絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶可以就近獲取所需內(nèi)容。

使用CDN將使用戶能夠從距離其位置最近的服務器獲取網(wǎng)頁所需的資源。CDN中的服務器分布在不同的地理位置。所以使用這種CDN是改善應用程序加載時間的有效方法之一。

例如，如果您的Web服務器位于加利福尼亞州，如果您部署了CDN，您的訪客訪問網(wǎng)絡拓補圖可能是下面的樣子。

大多數(shù)CDN服務都擁有自己的網(wǎng)絡骨干，與互聯(lián)網(wǎng)相比，它們可以提供更高的服務質(zhì)量，更少的數(shù)據(jù)包率及更快的加載速度等有點。缺點，就是貴。

3.文件大小和頁面大小

從Web服務器上加載大尺寸文件或加載頁面尺寸較大時將耗費大量時間，所以可能會在為了獲取幾個這樣大的文件而使頁面加載時間變長。

通過啟用壓縮是減小HTTP請求文件大小、縮短頁面加載時間的常用方式。

常見的壓縮方式有兩種：

第一種方式是Gzip，Gzip可以定位文件中的類似代碼，并暫時替換它們，使文件變小。目前，大多數(shù)Web服務器都支持Gzip壓縮。對HTML或CSS文件啟用壓縮通?？梢怨?jié)省約50%或70%的文件大小，從而減少頁面加載時間和使用的帶寬。您可以通過減小應用程序中使用的圖像的大小來進一步減少頁面加載時間。

另一種壓縮方案稱為Brotli，據(jù)官方介紹壓縮比較gzip要高20%~30%，并且執(zhí)行效率更高效，具體的因為我這沒有測試，所以無法佐證，您可以根據(jù)您的實際情況來考慮。

4.同時加載所有資源

同時加載所有HTML、CSS和JS文件將增加頁面加載時間，因為在加載所有這些資源之前，頁面渲染的流程將被阻止。

延遲JavaScript加載是一種在加載其他元素之后加載大型JS文件的機制。此方法可確保加載頁面內(nèi)容時不會因加載大型JS文件而受到影響。

如果您有一個HTML站點，則需要在</body>標記之前調(diào)用外部JS文件(defer.js)。

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else <br>    window.onload = downloadJSAtOnload;
</script>

上面的代碼是講，“等待整個文檔加載，然后再加載外部defer.js文件。”

5.大量的重定向

一般情況下，我們使用重定向來處理移動或刪除的頁面，以避免用戶訪問時出現(xiàn)錯誤。但是，更多的重定向意味著更多的HTTP請求。這會極大地增加頁面加載時間。谷歌建議網(wǎng)站所有者取消重定向，以縮短加載時間，特別是在移動優(yōu)先的網(wǎng)站上。

您可以使用類似網(wǎng)站爬取工具來獲得網(wǎng)站中的所有重定向請求。通過分析這一點，您可以掌握并清除其中不必要的重定向。

一般，重定向分為兩種類型：

• 服務器端重定向 — 快速且可緩存。

• 客戶端重定向 — 速度慢且不可緩存。

避免使用你的頁面使用客戶端重定向，同時將服務器端重定向保持在最低限度內(nèi)，從而優(yōu)化網(wǎng)頁加載時間。

結論

一個執(zhí)行、加載速度快的站點相信對站長和用戶而言都是有益的，我希望這篇文章能讓您對頁面加載時間的重要性有足夠的信心。

如果您正在考慮提升您的網(wǎng)站性能，我有一些工具可以分享給您，比如Google Pagespeed Insights，Pingdom，YSlow等。這些工具可以提供完整的報告讓您深入了解你的網(wǎng)站的短板。希望您的網(wǎng)站也可以獲得更好的用戶體驗。

原文出處：https://blog.bitsrc.io/5-common-mistakes-developers-do-that-affect-page-load-time-5a49b0e46f6b

以上是“javascript中影響頁面加載時間的5個常見錯誤分別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：javascript中影響頁面加載時間的5個常見錯誤分別是什么-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://sd-ha.com/article4/podoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、自適應網(wǎng)站、App設計、手機網(wǎng)站建設、外貿(mào)網(wǎng)站建設、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)