web前端優化手段

2022-03-08 05:51:29 字數 816 閱讀 6753

web前端優化手段有很多,同種的優化方式或許在不同的網路協議會南轅北轍,下面就自己結合工作經驗和學習總結的一些手段總結

3、cookie-free:將資源的站點都重定向到非頁面站點,如:頁面都是*.100bt.com,將資源站點都放在resource.a0bi.com站點。

4、多站點放置資源,繞開瀏覽器的同站點資源載入個數的限制。

5、非同步載入js檔案,非基礎庫script加上async/defer。

6、按需載入檔案,如:在相應式頁面中,判斷使用者裝置獲取所需的檔案。

8、減少dom操作(感覺在現代瀏覽器意義不大)

9、快取需要多次操作的dom節點

10、基礎庫的過期時間設定盡量大,充分利用頁面快取

11、使用worker

12、使用cdn

13、使用gzip壓縮

14、使用css3/canvas/svg 代替,使用data:image代替png

15、使用offline

16、dns預讀取(dns-prefetch)prefetch subresource prerender 

17、分布載入頁面ajax/bigpipe

18、 避免重複的資源請求,不同模組同時請求相同資源,會導致資源的重複請求

19、減少reflow/repaint

20、使用switch-case不用if-else,使用while不使用for

21、ui動畫使用requestanimationframe代替settimeout和setinterval

22、開啟gpu加速指令碼設定willchange,3dtransform製作動畫

web前端優化

盡量避免使用eval函式 多了一步解析的步驟 function testnoeval var endtime new date console.log 耗時1 endtime starttime ms function testeval var endtime new date console.lo...

web前端優化

做為乙個好的優秀前端,不僅能夠寫出優雅的 也要更加關注於效能性的問題,但由於我們在專案過程中可能會考慮到一些成本性的問題,不可能讓我們的專案在效能方面面面俱到,但我們可以做到最為基本的做優化。我們可以從以下幾點進行優化 1.減少對伺服器方面的請求 我們使用外部檔案 css 和js css sprit...

web前端效能優化

01 減少http請求 使用css sprite 合併js css02 使用cdn 當頁面中有很多資源的時候可以從不同伺服器中讀取 設定長的expires時間將直接減少http請求 如果資源設定了expires頭為將來的某個時間,下次訪問時候瀏覽器 發現資源還沒有過期,會直接從快取中讀取,不會再次產...