列舉6個常見且實用的Web前端效能最佳化方法
在如今這個資訊爆炸的時代,人們的節奏總是快速的,對於一個網站的耐心畢竟是有限的可憐的,如果網站不進行最佳化必定會流失相當一部分的客戶,帶來不必要的損失。那麼從Web前端的效能最佳化上來說有哪些常見、實用的方法呢?下面小千就列舉6個常見且實用的Web前端效能最佳化方法。
1、使用CDN
CDN(內容分發網路)部署在各大運營商機房,當使用者透過瀏覽器請求資源時可以直接反饋給使用者,極大的減輕了伺服器資料中心的壓力。本質上CDN也是一種快取,如果你的所在地距離某個CDN節點很近,那麼網站響應的速度提升也是非常明顯的。另外CDN所快取的資源主要為靜態資源,如靜態頁面、圖片、css和js檔案等。CDN加速對於一些遍佈範圍較大的網站來說效果最為明顯,使用的話像阿里雲CDN產品,其節點多達280多個,覆蓋運營商也比較全面。
2、減少外部http協議
網頁載入的時間與http請求密不可分,而外部資源的載入的速度則與主機服務提供商伺服器架構和分佈地點有關。我們可以透過檢查自己的網站上多餘的圖片、css、JavaScript和一些元件,然後對應的去逐個完善,就可以減少一些http請求。
3、使用預獲取
顧名思義預獲取就是在真正有需要去請求之前就獲取一些必要的資料和資源,以提升使用者的瀏覽體驗。預獲取主要有三大方式:
1.連結預先獲取
2.DNS預先獲取
3.預先渲染
根據你想要使用的預先獲取形式,你只需在網站 HTML 中的連結屬性上增加 rel="prefetch",rel="dns-prefetch",或者 rel="prerender" 標記。
4、壓縮HTML、CSS和JavaScript
在編寫程式碼時候會有一些多餘的空格,這會佔用位元組,使用一些壓縮工具可以有效解決這個問題。值得注意的是,壓縮後的檔案,其可讀性就會變差,後期想維護就會變得困難了。
5、最佳化圖片
一張高畫質的圖片大概幾兆左右,而很多時候我們並不需要這樣的畫質,一般我們都會選擇將其儲存為高畫質的就可以了,這樣會有效減小載入圖片帶來的壓力。像JPEG圖片那樣包含了時間、地點、相機型號的格式,更不是我們所需要的。
6、Ajax請求方式
POST的請求,是不可以在客戶端快取的,每次請求都需要傳送給伺服器進行處理,每次都會返回狀態碼200。(可以在伺服器端對資料進行快取,以便提高處理速度)
GET的請求,是可以(而且預設)在客戶端進行快取的,除非指定了不同的地址,否則同一個地址的AJAX請求,不會重複在伺服器執行,而是返回304。所以在進行Ajax請求的時候,可以選擇儘量使用get方法,這樣可以使用客戶端的快取,提高請求速度。
以上就是小千整理的6個常見且實用的Web前端效能最佳化方法。進行Web前端最佳化似乎需要花費很大的精力,相信這篇應用指南中的一些小技巧能幫你極大改善網站載入速度。網站載入地越快,則使用者體驗越佳。因此,對Web前端進行最佳化能使給你和你的使用者都帶來益處。
本文來自千鋒教育,轉載請註明出處。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2793443/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- WEB前端效能優化常見方法Web前端優化
- 3種常見的Web前端陣列排序方式!Web前端陣列排序
- 7種常見且實用的Python框架!Python框架
- Java enum列舉類詳解 列舉的常見用法Java
- Web 效能最佳化方法Web
- 列舉一下常見的final類?
- 好程式設計師web前端教程分享常見基礎面試題之效能最佳化程式設計師Web前端面試題
- web效能常見優化技巧Web優化
- 前端效能最佳化實踐方向與方法前端
- 列舉在Web前端開發中經常會設定的特殊樣式!Web前端
- 什麼是常見缺陷列舉 (CWE)
- 前端效能最佳化:使用 Web Workers 實現輪詢前端Web
- web前端應用效能指標最佳化方案有哪些?Web前端指標
- 常見效能最佳化方案與實用工具 雙 buffer
- 4款Mac解壓縮軟體,常見且實用Mac
- web前端效能最佳化——圖片載入的最佳化Web前端
- Java 列舉(enum) 詳解7種常見的用法Java
- 【前端詞典】分享 8 個有趣且實用的 API前端API
- MySQL常見6個考題在實際工作中的運用MySql
- 前端效能常見優化點分析前端優化
- 前端常見問題 - ES6前端
- golang slice相關常見的效能最佳化手段Golang
- 好程式設計師web前端分享用JavaScript實現的5個常見函式程式設計師Web前端JavaScript函式
- 異常-Throwable的幾個常見方法
- 訊息佇列常見的 5 個應用場景佇列
- 訊息佇列常見的5個應用場景佇列
- 那些常見的Web前端學習誤區分享!Web前端
- 幾種常見的效能測試方法概述
- ES5新增陣列的常見方法陣列
- js陣列常見的一些方法JS陣列
- 關於6種Web安全常見的攻防姿勢Web
- web前端教程分享:常見 React 面試題Web前端React面試題
- Python有哪些好用且實用的Web框架?PythonWeb框架
- 列舉子集的方法
- Redis常見的效能問題和解決方法UWRedis
- web前端分享:效能最佳化之文件碎片處理Web前端
- 好程式設計師分享Web前端效能最佳化程式設計師Web前端
- 常見的10道Web前端面試題及答案分享!Web前端面試題