web前端優化手段

web前端優化手段有不少，同種的優化方式或許在不一樣的網絡協議會南轅北轍，下面就本身結合工做經驗和學習總結的一些手段總結

一、合併文件減少請求數：sprite圖片的合成、合併腳本與樣式。

二、減少文件的大小：壓縮代碼（html、css、js），壓縮圖片（在美術和產品能接受的範圍內），選擇正確格式的圖片（jpg/png）。

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

四、多站點放置資源，繞開瀏覽器的同站點資源加載個數的限制。

五、異步加載js文件,非基礎庫script加上async/defer。

六、按需加載文件，如：在相應式頁面中，判斷用戶設備獲取所需的文件。

七、頁面延遲加載，如：圖片與腳本使用滾動加載，只加載出如今視口的圖片和腳本效果對應的腳本文件。

八、減小dom操做（感受在現代瀏覽器意義不大）

九、緩存須要屢次操做的dom節點

十、基礎庫的過時時間設置儘可能大，充分利用頁面緩存

十一、使用Worker

十二、使用cdn

1三、使用gzip壓縮

1四、使用css3/canvas/svg 代替圖片，使用data:image代替png圖片

1五、使用offline

1六、DNS預讀取（dns-prefetch）prefetch subresource prerender 

1七、分佈加載頁面ajax/bigpipe

1八、 避免重複的資源請求，不一樣模塊同時請求相同資源，會致使資源的重複請求

1九、減小reflow/repaint

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

2一、UI動畫使用requestAnimationFrame 代替setTimeout和setInterval

2二、開啓GPU加速腳本設置willChange，3Dtransform製做動畫