選擇適合開發環境的工具，如 grunt、gulp、webpack、postcss等
首先設計並構建核心體驗，再針對高效能瀏覽器設計高階特性的相關體驗
可以將部分內容用靜態**生產工具生成乙個靜態版本，將其置於 cdn 上，從而避免資料庫的請求
根據瀏覽器型別的不同載入不同型別的資源。
傳統瀏覽器載入核心型資源，現代瀏覽器載入增強型資源。
在載入資源時要嚴格遵守相應的規則：頁面載入時應首先載入 core 資源，然後在 domcontentloaded 事件觸發時載入 enhancement 資源，最後在 load 事件觸發時載入 extras 資源。
打包過程中檢測工程中沒有引用過的模組並進行標記，在資源壓縮時將它們從最終的bundle中去掉(只能對es6 modlue生效) 開發中盡可能使用es6 module的模組（靜態引入），提高tree shaking效率
thread-pool（webpack5）
使用 dllreferenceplugin 對 manifest.json 進行引用，將一些基本不會改變的**打包成靜態資源，避免反覆編譯浪費時間
可以通過在 html 的 script 標籤上新增 defer 以及 async 屬性來實現
我們需要改變處理css的方式–這意味著將其分為兩個檔案。
對於第乙個檔案，我們僅提取呈現內容所需的最少css，然後將其內聯到網頁中（以的行內形式內嵌到）。對於第二個檔案或非關鍵css，我們非同步載入該檔案，以免阻塞網頁。
dns-prefetch，能夠讓瀏覽器在後台程序執行一次 dns 查詢
preconnect，能夠讓瀏覽器在後台程序發起一次握手（dns，tcp，tls）
prefetch，能夠讓瀏覽器發起對資源的請求
prerender，能夠讓瀏覽器在後台程序渲染出特定的頁面
preload，在不執行資源的前提下，預先拿到該資源
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是...
前端效能優化
在開發好頁面後，如何讓頁面更好更快的執行 從前端的角度來看，效能可以分為兩個方向 從使用者角度來看，乙個是頁面載入的很快，另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...
前端效能優化
隨著現在 越來越酷炫，各種，資源庫，動畫等等用的越來越多，在使用者視覺和功能的提公升的同時，效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s，網民就會流失70 以上。這種說法我覺得不是很正確的，除非是非常重要 必須要使用的 否則超過5s我基本直接關了，體驗太差。所以，使用者 忍讓 是有極限...