前端如何進行頁面優化

本文轉載自查看原文 2019-03-04 14:00 778 前端開發相關文章

參考：https://www.cnblogs.com/MarcoHan/p/5295398.html、站長之家：http://www.chinaz.com/tags/Webqianduanxingnengyouhua.shtml

1、性能優化的重要性

研究表明：用戶最滿意的打開網頁時間是2-5秒，如果等待超過10秒，99%的用戶會關閉這個網頁。列舉一組數據：Google網站訪問速度每慢400ms就導致用戶搜索請求下降0.59%;Amazon每增加100ms網站延遲將導致收入下降1%;雅虎如果有400ms延遲會導致流量下降5-9%。網站的加載速度嚴重影響了用戶體驗，也決定了這個網站的生死存亡。

只有10%~20%的最終用戶響應時間花在了下載HTML文檔上（即從Web服務器獲取HTML文檔並傳送到瀏覽器的），其余的80%~90%時間花在了下載頁面中的所有組件上。

進行頁面優化的方法如下：

2、減少HTTP請求達到性能優化

上面說到80%~90%時間花在了下載頁面中的所有組件進行的HTTP請求上。因此，改善響應時間最簡單的途徑就是減少HTTP請求的數量次數

2.1、使用字體圖標

在可以大量使用字體圖標的地方我們可以盡可能使用字體圖標，字體圖標可以減少很多圖片的使用，從而減少http請求，字體圖標還可以通過CSS來設置顏色、大小等樣式，何樂而不為。

2.2、合並腳本和樣式表

將多個樣式表或者腳本文件合並到一個文件中，可以減少HTTP請求的數量從而縮短效應時間。

不過合並所有的樣式文件或者腳本文件可能會導致在一個頁面加載時加載了多於自己所需要的樣式或者腳本，對於只訪問該網站一個（或幾個）頁面的人來說可能導致反而增加了下載量。

2.3、CSS Sprites技術

CSS Sprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，然后通過CSS background背景定位技術技巧布局網頁背景。這樣一來，特別是圖片特別多的網站，如果能用css sprites降低圖片數量，帶來的將是速度的提升。

示例代碼：

<div>
    <span id="image1" class="nav"></span>
    <span id="image2" class="nav"></span>
    <span id="image3" class="nav"></span>
    <span id="image4" class="nav"></span>
    <span id="image5" class="nav"></span>
</div>

.nav {
    width: 50px;
    height: 50px;
    display: inline-block;
    border: 1px solid #000;
    background-image: url('E:/1.png');
}
#image1 {
        background-position: 0 0;
}
#image2 {
        background-position: -95px 0;
}
#image3 {
        background-position: -185px 0;
}
#image4 {
        background-position: -275px 0;
}
#image5 {
        background-position: -366px -3px;
}

3、使用CDN縮短HTTP請求的時間

如果應用程序web服務器離用戶更近，那么一個HTTP請求的響應時間將縮短。另一方面，如果組件web服務器離用戶更近，則多個HTTP請求的響應時間將縮短。CDN（內容發布網絡）是一組分布在多個不同地理位置的Web服務器，用於更加有效地向用戶發布內容。在優化性能時，向特定用戶發布內容的服務器的選擇基於對網絡擁堵的測量。例如，CDN可能選擇具有最短響應時間的服務器，由此縮短了HTTP請求的時間。

4、添加Expires頭來緩存組件

Expires存儲的是一個用來控制緩存失效的日期。當瀏覽器看到響應中有一個Expires頭時，它會和相應的組件一起保存到其緩存中，只要組件沒有過期，瀏覽器就會使用緩存版本而不會進行任何的HTTP請求。Expires設置的日期格式必須為GMT（格林尼治標准時間）。

Expires存在着明顯的不足：

（1）Expires頭使用的是一個特定的時間，要求客戶端和服務器端的時鍾嚴格同步。何為嚴格同步？我們知道客戶端的時間是可以修改的，如果服務器和客戶端的時間不統一，這就導致有可能出現緩存提前失效的情況，存在不穩定性。（2）假如Expires的日期到來了，那么還需要在服務器配置中提供一個新的日期。

面對這種情況，HTTP1.1引入了Cache-Control頭來克服Expires頭的限制。Cache-Control使用max-age制定組件被緩存多久，使用秒為單位，例如Cache-Control：max-age=3600；表示組件將被緩存60分鍾。如果max-age和Expires同時出現，則max-age有更高的優先級，瀏覽器會根據max-age的時間來確認緩存過期時間。
Cache-Control和expires都是在server端配置。

5、壓縮組件

客戶端請求報文中包含Accept-Encoding表示客戶端能識別的壓縮方法，如果客戶端請求報文沒有包含Accept-Encoding首部，服務器就會假設客戶端能夠接受任何編碼格式；服務器響應報文中包含Content-Encoding表示采用的壓縮方法。

（然而，一個統計表明，大約有15%的客戶端請求是沒有Accept-Encoding請求的，因為客戶端的一些web代理和PC安全軟件會移除瀏覽器發出的Accept-Encoding，因為監聽未經壓縮的響應會占用更少的CPU資源，但卻無疑增加了網絡傳輸的時間。）

服務器壓縮文件請參考： https://blog.csdn.net/ygy162/article/details/51058979

6、將樣式表放在頭部（實現逐步渲染）

在有些低版本瀏覽器中，如果將樣式表放在底部的話，瀏覽器會等樣式表加載完畢后再渲染DOM。但如果將樣式表放在頭部的話，也是先加載css表，但是此時可以實現逐步渲染DOM，因為瀏覽器不會等到所有的HTMl元素解析之后再構建和布局dom樹，而是先把部分內容解析並顯示出來。

IE8以下(包括IE8)的工作方式是認為如果css表仍在加載，構建呈現樹就是一種浪費，它認為在所有樣式表加載並解析完畢之前無需繪制任何東西。所以直到css加載完畢整個瀏覽器顯示都是空白，由此可能造成 “白屏” 現象。

高版本瀏覽器不用等待樣式表加載完畢再渲染DOM樹，而是逐漸開始就渲染，這時當我們將css放在底部，頁面也可以逐步呈現。但是在css下載並解析完畢之后，已經呈現的文字和圖片就會使用新的樣式進行重繪，這就是“無樣式內容的閃爍”，這是一種非常不好的用戶體驗。

所以把樣式表放在頭部是最好的選擇。

7、將腳本放在底部（避免阻塞DOM解析）

javascript會阻塞dom的解析。當解析過程中遇到<script>標簽的時候，便會停止解析過程，轉而去處理腳本，如果腳本是內聯的，瀏覽器會先去執行這段內聯的腳本，如果是外鏈的，那么先會去加載腳本，然后執行。在處理完腳本之后，瀏覽器便繼續解析HTML文檔。

所以將腳本放在底部是最好的，如果要將腳本放在頂部的話可以使用jQuery和JS中的load方法：

//在DOM加載后，全部內容加載前運行
$(document).ready(function(){});    
//在全部內容加載后運行
window.onload = function(){};    // —-js    
$(window).load(function(){});　　 //---jquery

7.1、script標簽應該放在body標簽內

許多人認為只要放在底部了，無論是“body標簽閉合之前”還是在“body標簽閉合之后”都是一樣的，其實還是有差別的，因為從HTML 2.0起放在“body標簽閉合之后”就是不合標准的。之所以但是瀏覽器卻不會報錯，是因為如果在“body標簽閉合之后”后再出現script或任何元素的開始標簽，都是parse error，瀏覽器會忽略之前的</body>，即視作仍舊在body內。所以實際效果和寫在“body標簽閉合之前”之前是沒有區別的。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端如何進行seo優化 Web頁面加載，如何分析頁面性能？如何進行優化？ VUE 如何進行 SEO優化？如何進行網站性能優化如何進行網站性能優化如何進行網站性能優化 mysql如何進行性能優化? 前端里面如何進行搜索引擎優化(SEO) 如何進行seo優化要點總結 mysql查詢太慢，我們如何進行性能優化？