網站性能(常用網站性能優化方法)

Web性能優化始終是當務之急,尤其是在競爭如此激烈的現在。眾所周知是,更快的網站下載速度已顯示出可以提高訪問者的保留率和忠誠度以及用戶滿意度,尤其是對於網絡速度較慢的用戶和移動設備上的用戶而言!常用web優化方法1. HTTP請求減少一次完整的請求都需要經過隊列等待、 DNS尋址、與服務器建立連接、發送請求、等待服務器響應、下載數據這樣一個 “漫長” 而復雜的過程。通常,網頁請求的HTTP越多,加載速度就越慢。因為瀏覽器限制瞭單個域名下同時一定數量的同時連接數(一般為6-12個)。為避免瓶頸,使用資源合並、雪碧圖等以減少瞭單個頁面的請求數量。從而減少HTTP請求和加載網頁所需的往返次數。減少HTTP請求是最重要的優化技術,其影響最大。2.文件壓縮Web頁面是由HTML、CSS和JavaScript等代碼文件構成的。隨著網頁復雜程度的提高,其代碼文件以及隨後的加載時間也隨之增加。文件壓縮可以將代碼文件減少多達80%,從而提高站點響應速度。通常使用webpack、gulp或grunt來壓縮web代碼, 使用tinypng來壓縮圖片。3. 瀏覽器緩存緩存優化可減少服務器負載,帶寬使用量和延遲,如果允許瀏覽器緩存您的站點文件(外部樣式表,JavaScript文件,圖像等)意味著不需要每次用戶請求站點上的網頁時都下載文件。這可以加快用戶導航到另一個網頁時的體驗,因為不需要重新下載諸如樣式表、圖片和字體之類的內容,因為它們已經存儲在用戶的瀏覽器緩存中。那麼,我們如何允許瀏覽器緩存文件?當瀏覽器從我們的WEB服務器請求文件時,服務器將執行的操作之一就是發送文件的HTTP標頭。文件的HTTP標頭包含有關所請求文件的元數據,以及有關瀏覽器應如何處理文件的說明。我們可以指定的標準HTTP標頭字段之一是Cache-Control來設置緩存方式,Cache-Control允許我們定義我們希望瀏覽器緩存文件的方式。我們可以使用Cache-Control標頭字段來告訴瀏覽器是否應該緩存文件,以及應該緩存文件多長時間。您可以在DevTools 的Response Headers中看到Cache-control字段Cache-Control: max-age=2592000順便說一句,max-age以秒為單位指定。2,592,000秒= 30天。對於要緩存文件的確切時間,沒有具體的規定,但是最佳實踐是將文件緩存的時間盡可能長。緩存持續時間取決於您更新站點文件的頻率以及要緩存的文件類型。例如,您可以max-age為不經常更改的文件(例如網站的LOGO,JS文件和CSS文件)設置更長的時間。文件類型緩存持續時間CSS1年JavaScript1年圖片(例如PNG,JPG,GIF)1個月HTML不使用緩存對於SVG文件,我們可以使用svg-sprite-loader來創建一個屬於自己的圖標庫:4. 開啟GZIP雖然開啟GZIP壓縮可以很大程度上壓縮資源文件,但是也有一些需要註意的地方:較舊的瀏覽器:某些瀏覽器可能仍無法處理壓縮內容(他們說可以接受,但實際上不能)。已經壓縮的內容:大多數圖像,音樂和視頻已經被壓縮。不要浪費時間再次壓縮它們。實際上,您可能隻需要壓縮“三大文件”(HTML,CSS和JavaScript)。CPU負載:動態壓縮內容會占用CPU時間並節省帶寬。通常鑒於壓縮速度和CPU的性能限制,通常將壓縮等級設置為6(隨著壓縮級別的升高,壓縮比有所提高,但到瞭級別6後,很難再提高,並且壓縮時間和壓縮比例成正相關)。如果使用Nodejs作為服務器,可以使用compression插件來開啟gzip。如果使用nginx作為靜態資源服務器,開啟gzip方法如下:gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 6;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css image/jpeg image/jpg image/gif image/svg image/png;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;5. 預加載DNS預取-DNS Prefetch這會通知客戶端,我們以後需要通過特定的URL來獲取資產,以便瀏覽器可以盡快解析DNS。假設我們需要URL中的資源如圖像或音頻等文件需要從www.gogoing.site網站下下載。在HTML的<head>中,加入以下代碼:<link rel="dns-prefetch" href="//www.gogoing.site">然後,當我們請求文件時,我們將不再需要等待DNS查找。Chrome一直在做類似的事情。如果您僅在URL欄中鍵入域名的一小部分,它將自動預解析DNS(有時甚至預渲染頁面),從而節省瞭每個請求至關重要的毫秒數。資源預取-Prefetch<link rel="prefetch" href="//cloud.gogoing.site/files/2020-08-07/95baf0bf-5878-4723-8ea0-159822f693ed.jpg">Prefetch和DNS Prefetch相同。Prefetch應主要用於預加載靜態資源,例如圖像,CSS和JavaScript文件。整個文件將下載並保存在瀏覽器緩存中。也可以預取HTML文檔。但是,您不能依賴正在下載的資源。瀏覽器會在處於空閑狀態時並且沒有其他要執行的任務下載資源文件。如果用戶的網絡連接較慢,它也將完全忽略大文件。子資源- subresource<link rel="subresource" href="//cloud.gogoing.site/files/2020-08-07/95baf0bf-5878-4723-8ea0-159822f693ed.jpg">subresource與Prefetch相同。都是從服務器預下載指定的文件,並將其存儲在瀏覽器的緩存中。但是不同的是,根據Chromium文檔,它的工作方式如下:LINK rel=“subresource”提供瞭一種新的鏈接關系類型,其語義與LINK rel="prefetch"不同。盡管rel="prefetch"提供瞭低優先級的資源下載,以供後續頁面使用,而rel="subresource"則允許及早加載當前頁面中的資源。因此,如果當前頁面需要該資產,或者盡快需要該資產,則最好使用它subresource,否則請使用prefetch。預渲染-Prerender預渲染功能是此處介紹的最強大的技術。從根本上確保具有所有必要靜態資源的URL在後臺完全加載和設置。您可以想象它是在新選項卡中預先打開URL,但在用戶實際調出頁面之前它一直處於隱藏狀態。並且所有在實際頁面下載期間發生的活動都將在後臺進行。但是由於兼容性問題,一般情況下,我們都會同時使用Prefetch和Prerender來預加載HTML文檔。任何丟失的文件都會產生HTTP 404 錯誤。如果請求一個不存在的腳本文件,因為瀏覽器在請求腳本文件的時候,即便是返回404,它也會嘗試去按照Javascript的方式解析響應中的內容。這無疑會增加很多處理的時間。6. 重繪和回流在瞭解重繪和回流之前,我們先回顧一下瀏覽器的工作原理:瀏覽器解析HTML源代碼,並構造一個DOM樹,其中每個HTML標簽在樹中都有一個對應的節點,標簽之間的文本塊也會生成一個文本節點。DOM樹中的根節點是documentElement(<html>標記)瀏覽器解析CSS代碼:基礎規則在User-Agent樣式表(瀏覽器默認設置)中,然後可能有用戶樣式表,作者樣式表,外部樣式,導入樣式,內聯樣式以及最終樣式被編碼為styleHTML標簽的屬性接下來是構造渲染樹(render tree)。渲染樹有點像DOM樹,但不完全匹配。渲染樹會獲取樣式信息,因此,如果您將元素隱藏display: none,則它將不會出現在渲染樹中。其他不可見元素(例如,head以及其中的所有元素)也是如此。另一方面,例如在渲染樹狀文本節點中可能存在* 用多個節點表示的DOM元素。渲染樹中的節點稱為box(CSS box 中的盒模型),每個節點都有CSS框屬性-寬度,高度,邊框,邊距等構造渲染樹後,對於每個visible節點,匹配合適的節點CSSOM rules並應用它們,然後瀏覽器在屏幕上繪制渲染樹節點。重繪-repaint由於節點屬性的更改或樣式更改(例如更改opacity,color,background-color,visibility),因此需要更新屏幕的某些部分。此屏幕更新稱為重繪(repaint)。回流-reflow渲染樹的一部分(或整個樹)需要重新計算,包括元素的位置、寬高度以及邊框等幾何形狀以及所有受影響的其他元素的位置都會由瀏覽器重新繪制,此過程稱為回流。更改單個元素會影響所有的子元素,祖先元素和兄弟元素。回流一定會導致重繪。通常情況下,以下情況會導致回流:激活偽類,如:hover內容輸入,如input輸入添加、刪除樣式表添加、刪除、更新DOM節點使用offsetWidth和offsetHeight為DOM節點設置動畫以及使用JS來塊操作DOM節點使用display: none(重繪和回流)或visibility: hidden(僅重繪,因為不會沒有位置發生更改且不會影響後面節點的顯示)隱藏DOM節點用戶操作,如調整窗口大小,更改字體大小或滾動如何減少重繪和回流避免使用表格進行佈局通過為容器設置固定高度來限制受影響的元素使用offsetWidth和offsetHeight時, 先將其緩存到本地變量中,不要每次直接從元素屬性中讀取盡量通過添加/修改className來控制節點樣式,且減少CSS規則層級以及使用復雜的CSS選擇器批量更新DOM,且減少DOM深度。使用documentFragment來操作DOM變化數據。更新/克隆/替換節點時,先將節點樣式設置為display: none, 替換完成後再移出display: none樣式(總共2個回流和2個重繪),7. 避免301重定向重定向是性能的殺手,應該盡可能避免使用它們。重定向將產生額外的往返時間(RTT),因此在瀏覽器甚至開始加載其他資源之前,加載初始HTML文檔所需的時間將迅速增加一倍。8. 瀏覽器存儲使用瀏覽器存儲(localStorage或sessionStorage)來存儲網站中使用的不可變數據以保證頁面的加載速度和減少不必要的請求。在某些情況下(如商城),還可以保存首頁數據,以保證首頁的快速加載和減少白屏時間。9. 避免404錯誤及時獲取更新,瞭解更多動態,請關註 https://www.gogoing.site如果你覺得這篇文章對你有幫助,歡迎關註微信公眾號-前端學堂,更多精彩文章等著你!


本文出自快速备案,转载时请注明出处及相应链接。

本文永久链接: https://www.xiaosb.com/beian/51489/