-
1 # 使用者320828098489
-
2 # 林時變數
感覺前端的效能確實是很重要的,我談談我在實際專案中的應用。前端的應用主要從以下幾個方面進行最佳化:
1.減少 http 請求
HTTP 協議是無狀態的應用層協議, 意味著每次 HTTP 請求都需要建立通訊鏈路、進行資料傳輸,而在伺服器端,每個 HTTP 都需要啟動獨立的執行緒去處理。這些通訊和服務的開銷都很昂貴,減少HTTP 請求的數目可有效提高訪問效能。減少 HTTP 的主要手段是合併 CSS、合併 JavaScript、合併圖片。將瀏覽器一次訪問需要的JavaScript、 CSS 合併成一個檔案,這樣瀏覽器就只需要一次請求。圖片也可以合併,多張圖片合併成一張,如果每張圖片都有不同的超連結,可透過 CSS 偏移響應滑鼠點選操作,構造不同的 URL。
2.使用瀏覽器快取
對一個網站而言,CSS、 JavaScript、 Logo、圖示這些靜態資原始檔更新的頻率都比較低,而這些檔案又幾乎是每次 HTTP 請求都需要的,如果將這些檔案快取在瀏覽器中,可以極好地改善效能。透過設定 HTTP 頭中 Cache-Control 和 Expires 的屬性,可設定瀏覽器快取,快取時間可以是數天,甚至是幾個月。在某些時候,靜態資原始檔變化需要及時應用到客戶端瀏覽器,這種情況,可透過改變檔名實現,即更新 JavaScript 檔案並不是更新 JavaScript 檔案內容,而是生成一個新的 JS 檔案並更新 HTML檔案中的引用。使用瀏覽器快取策略的網站在更新靜態資源時,應採用批次更新的方法,比如需要更新 10 個圖示檔案,不宜把 10 個檔案一次全部更新,而是應一個檔案一個檔案逐步更新,並有一定的間隔時間,以免使用者瀏覽器突然大量快取失效,集中更新快取,造成伺服器負載驟增、網路堵塞的情況。
3.啟用壓縮
在伺服器端對檔案進行壓縮,在瀏覽器端對檔案解壓縮,可有效減少通訊傳輸的資料量。文字檔案的壓縮效率可達 80%以上,因此 HTML、 CSS、 JavaScript 檔案啟用 GZip 壓縮可達到較好的效果。但是壓縮對伺服器和瀏覽器產生一定的壓力,在通訊頻寬良好,而伺服器資源不足的情況下要權衡考慮。
4. CSS 放在頁面最上面、 JavaScript 放在頁面最下面
瀏覽器會在下載完全部 CSS 之後才對整個頁面進行渲染,因此最好的做法是將 CSS 放在頁面最上面,讓瀏覽器儘快下載 CSS。 JavaScript 則相反,瀏覽器在載入 JavaScript 後立即執行,有可能會阻塞整個頁面,造成頁面顯示緩慢,因此 JavaScript 最好放在頁面最下面。但如果頁面解析時就需要用到 JavaScript,這時放在底部就不合適了。
5.減少 Cookie 傳輸
Cookie 在每次響應請求中,如果太大勢必會影響效能,所以沒必要網cookie放的就不放,針對性的選擇放入cookie的資料。
總之,最佳化的方法還很多,我感觸最深的是第4項,有些js檔案大引用如果放到最前面對效能損耗很大。
回覆列表
1、減少http請求,合理設定 HTTP快取
2、使用瀏覽器快取
3、啟用壓縮
4、CSS Sprites,合併 CSS圖片,減少請求數
5、CSS放在頁面最上部,javascript放在頁面最下面 前端對於網站來說,通常是指,網站的前臺部分包括網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發,前端設計一般可以理解為網站的視覺設計,前端開發則是網站的前臺程式碼實現,包括基本的HTML和CSS以及JavaScript/ajax,現在最新的高階版本HTML5、CSS3,以及SVG等。