雖然現在網速已經非常快了，但是對於極致效能的追求一直從未停止過，那怕提公升1s,也是使用者體驗的一大步提公升。2設定瀏覽器快取
3 專案**優化&資源打包壓縮
4使用cdn
網路傳輸效能測試工具：page speed
廢話多說，這篇文章就基礎的講一下前端頁面的優化項都有哪些剛開始接觸前端的開發者可能會
誤以為越大，使用者就會覺得越清晰，以致於會在乙個小板塊中縮放使用乙個較大的。
其實這樣，在普通顯示器上，並不能讓使用者覺得更清晰，相反會導致網路速度大幅度下降，還會造成頻寬浪費。所以當你需要多大的的時候，就在伺服器上準備好多大的，盡量固定尺寸。
精靈圖或者叫雪碧圖相信大家在實際工作中經常用到。
精靈圖不僅能夠顯著的減少請求次數，並且神奇的是，多張拼合在一起時，總體積會比之前所有的體積之和小（你可以嘗試一下）。
對於製作精靈圖有些人感到很麻煩，這裡給大家推薦乙個自動生成精靈圖的工具：你只需要新增相關資源，他就會自動幫你生成精靈圖和對應的css樣式
無論是壓縮後的，還是精靈圖，終歸還是，只要是，就還是會占用大量網路傳輸資 源。但是字型圖示的出現，卻讓前端開發者看到了另外乙個神奇的世界。
網上有很多字型圖示的資源比如說font awesome 等
自己自定義字型的話可以用icomoon。
webp格式，是谷歌公司開發的一種旨在加快載入速度的格式。壓縮體積大約只有 jpeg的2/3，並能節省大量的伺服器頻寬資源和資料空間。facebook、ebay等知名**已經開始測 試並使用webp格式。
我們都知道，瀏覽器在向伺服器發起 請求前，會先查詢本地是否有相同的檔案， 如果有，就會直接拉取本地快取。
由於本篇為前端篇，所以具體設定細節和後端相關（快取伺服器）將不做介紹
像剛剛所作的瀏覽器快取工作，只有在使用者第二次訪問我們的頁面才能起到效果，如果想要在使用者首次開啟頁面就實現優良想能，就必須要對資源進行優化。
我們經常將網路效能優化措施結為三大方面：減少請求數，減少請求資源體積，提高網路傳輸速率。
前面的優化就包括前兩方面優化。
現在的專案大部分使用webpack對內容進行提取和打包壓縮
在我們書寫html元素的src或href屬性時，可以省略協議部分，這樣 也能簡單起到節省資源的目的。
css屬性讀寫分離：瀏覽器每次對元素樣式進行讀操作時，都必須進行一次重新渲染，所以我們在使用js對元素樣式進行讀寫操作時，最好將兩者分離開，先讀後寫，避免出現兩者交叉使用的情況。最客觀的解決方案就是不用js去操作元素樣式。
基於前面第二項優化建議，通過切換class或者style.css路徑去批量操作元素樣式
將沒用的元素設為不可見：visibility: hidden，而不是display：none.因為visibility的屬性值發生改變時頁面不會重新渲染，而display屬性值發生改變時頁面會 重新渲染。
壓縮dom的深度，少用dom完成頁面樣式，多用偽元素或者box-shadow取代
使用cdn就是避免要引用的資源經過較多的路由器，以至於延遲較高。
//伺服器（反向**）或後端相關知識本篇將不介紹
page speed最人性化的地方，便是它會對測試**的效能瓶頸提出完整的建議，我們可以根據它 的提示進行優化工作。
並且測試完會給你的**效率打分，不服跑個分。
web前端效能優化指南
摘要 一般來說頁面訪問的時間有一條著名的 2 5 8原則 當使用者訪問乙個頁面 1 在2秒內得到響應時，會感覺系統響應很快 2 在2 5秒之間得到響應時，會感覺系統的響應速度還可以 3 在5 8秒以內得到響應時，會感覺系統的響應速度很慢，但可以接受 而超過8秒後仍然無法得到響應時，使用者會感覺系統糟...
web前端效能優化
01 減少http請求 使用css sprite 合併js css02 使用cdn 當頁面中有很多資源的時候可以從不同伺服器中讀取 設定長的expires時間將直接減少http請求 如果資源設定了expires頭為將來的某個時間,下次訪問時候瀏覽器 發現資源還沒有過期,會直接從快取中讀取,不會再次產...
web前端效能優化
一 網路相關的一切，包括dns解析 http請求等等 二 web優化，就是前端頁面相關部分，也就是我們日常擼 能夠做到的一些 1 設定dns多級快取 瀏覽器快取，系統快取，路由器快取，ips伺服器快取，根網域名稱伺服器快取，頂級網域名稱伺服器快取，主網域名稱伺服器快取。2 dns負載均衡 dns重定...