網站性能優化以內容優化

時間 2019-12-04

原文原文鏈接

頁面內容就是網站想要傳達比用戶得信息，可是信息得傳遞也有高效和低效之分，內容優化得目的就是使用盡量少的內容和更高效的方式，傳達儘量多的信息。css

優化手段：前端

可緩存的AJAX後端

Ajax的好處就是從其後臺傳輸信息的異步性而爲用戶帶來反饋的即時性。可是，使用Ajax並不能保證用戶不會在等待異步的JavaScript和XML響應上花費時間。在不少應用中，用戶是否須要等待響應取決於Ajax如何來使用。Ajax是實時響應的，在瀏覽器接收到新的數據前，舊的數據被緩存，這樣可以更好地提升效率。用客戶端語言來判斷用戶當前的可視範圍，只加載用戶可視範圍的內容。最主要的是圖片，由於文字信息相對較小，其餘多媒體內容相對佔用服務器流量更多。瀏覽器

延遲加載緩存

網站有些場景須要呈現大量圖片，例如一個有多屏的頁面，多數用戶點擊後不會徹底看完全部內容。那麼實際上，頁面在這一過程當中是100%的加載了多個屏幕的全部內容，並且若是內容過多，瀏覽器狀態會一直顯示加載狀態，給用戶感受很是很差。若是能夠按需加載內容，集中加載首屏時間及用戶可見區域，不但能夠減小加載時間，還能夠減小大量帶寬成本，用戶不可見區域須要用戶下拉滾動條或翻屏時觸發加載。服務器

預加載異步

預加載是在瀏覽器空閒時請求未來可能會用到的頁面內容（圖片，樣式和腳本）。使用這種方法，當用戶訪問下一個頁面時，頁面中大部份內容已經加載到緩存中，所以能夠大大提升訪問速度。預加載的幾種方法：佈局

① 無條件加載，觸發onload事件時，直接加載額外的頁面內容。性能

② 有條件加載，根據用戶的操做來有根據地判斷用戶下面可能去往的頁面並相應的預加載頁面內容。優化

減小DOM元素數量

一個複雜頁面意味着須要下載更多數據，同時也意味着JavaScript遍歷DOM的效率越慢。大量的DOM元素的存在乎味着頁面中有能夠不用移除內容只須要替換元素標籤就能夠精簡的部分。

使iframe的數量最小

iframe優勢是解決加載緩慢的第三方內容如圖標和廣告等的加載問題。缺點即便內容爲空，加載也須要時間，會阻止頁面加載，儘量減小iframes。

儘早刷新輸出緩衝

當用戶請求一個頁面時，不管如何都會花費200-500ms用於後臺組織HTML文件。在這期間，瀏覽器會一直空閒等待數據返回。在PHP中，可使用flush()方法，它容許你把已經編譯的好的部分HTML響應文件先發給瀏覽器，這時瀏覽器就能夠下載文件中的內容（腳本等）然後臺同時處理剩餘的HTML頁面。輸出緩衝應用最好的一個地方就是緊跟在<head />以後，由於HTML的頭部分容易生成並且頭部每每包含css和JavaScript的文件，這樣瀏覽器就能夠在後臺編譯剩餘HTML的同時並行下載它們。當用戶進行頁面請求時，服務端須要花費200-500ms時間來拼合HTML，將寫在head和body之間，釋放緩衝，這樣能夠將文件頭先發送出去，而後再發送文件內容，提升效率。

使用現代化佈局

減小使用table，儘可能使用<header>、<footer>等HTML5語義化的標籤，除了能提升頁面加載性能外，還能提升代碼的可維護性。

減小HTML大小

編寫代碼時爲告終構清晰，會使用空格或者TAB進行代碼縮進等來保證代碼可讀性。因此，在代碼上線前對HTML進行一次Minify操做。還有一個減小HTML大小的方案是使用前端模板，將重複的內容（例如列表），以基礎模板的形式發送到前端，而後使用js到後端獲取以JSON爲格式的數據，再使用模板引擎將數據渲染出來。使用這種「JS+JSON」的方式能夠減小後端渲染HTML標籤帶來的帶寬浪費，從而提升性能。HTML大小減小10%，服務器的QPS就能提升10%。