1.開啟gzip壓縮：apache 使用 mod_deflate;
2.隱藏父元素，瀏覽器不會載入這張：
#parent div
@media(max-width:600px) }
3.用不同的**查詢告訴瀏覽器什麼螢幕尺寸載入什麼background-image，瀏覽器會載入匹配**查詢和：
@media(min-width:601px) }
@media(max-width:600px) }
4.通過給指令碼新增async標記來告訴瀏覽器這個指令碼不需要被立即執行，這樣就不會阻塞內容渲染：
這樣瀏覽器會繼續構建dom，在指令碼載入完成並準備好後再執行它。
5.用**查詢指定視網膜屏版來確保只載入視網膜版：
#match
@media(-webkit-min-device-pixel-ratio:1.5),(min-moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5) }
6.html的picture元素
瀏覽器效能優化
在工作中會碰到各種各樣效能問題，本文根據自己在工作中的實踐並且結合各方面了解到的知識形成，可能不會談到具體的實現，只描述可能的方向，包括如下 js css載入 第三方js載入 cdn 懶載入 首屏渲染 react效能優化 webpack打包 瀏覽器快取 預載入 預解析 快取可以顯著提高瀏覽器載入速度...
瀏覽器效能優化（1）
你有遇到過瀏覽器很慢 很卡頓的情況嗎？在乙個簡單的網頁中，會占用大量的cpu 記憶體，頁面的動畫效果也不流暢，這時候你會有什麼反應？我猜想，大多數使用者會關閉這個頁面，改為訪問其他 作為乙個前端開發者，肯定不願意看到這種情況，那麼怎樣才能提高效能呢？說到這裡，先來看看網頁生成過程 網頁生成過程一般分...
瀏覽器渲染機制與效能優化
詳讀了很多文章，最終對比總結出來的瀏覽器渲染機制，並提出相應的優化原則 瀏覽器將從伺服器中獲取的html文件逐步解析，構建dom樹 在構建dom樹時，如果碰到js和css，會載入執行並阻塞html的解析，即html解析器會將控制權交給js或css解析器，當這個元素被解析完之後，將控制權重交回給htm...