web前端性能優化一

做爲一個前端會容許本身的做品,在非硬性條件下出現卡頓? 確定是不會,因此給你們梳理一下前端性能的優化.

一:文件操做

html文件壓縮:

  刪除無用的空格和換行符等其餘無心義字符

css文件壓縮:

 刪除無用的空格和換行符等其餘無心義字符,樣式的合併

js文件壓縮

 刪除無用的空格和換行符等其餘無心義字符(好處除了減小文件的大小,還能夠對本身的代碼進行保護 也就是js代碼混合)

文件合併

針對js文件的合併:能夠把多個無依賴關係的js文件合併在一個文件裏面,減小http請求.

操做方式:

 1.在線網站壓縮

 2.使用構建工具在項目構建層壓縮(如webpack,node中的一些模塊)

帶來的問題:

  1.首屏渲染問題(合併以後文件可能很大,渲染時間變長)

  2.緩存失效問題(合併以後,以前的單獨文件一改變,合併的文件也要改變,致使緩存失效)

tips:看本身的需求進行處理

二:圖片操做

常見圖片類型:jpg,png,webp(谷歌公司推出)

jpg應用場景:不須要透明的圖片使用

png應用場景:須要透明的圖片使用

webp應用場景:不失真,安卓移動端(推薦使用,有在線工具能夠轉換成webp格式的圖片 智圖) ios(存在兼容性)

圖片方面的優化:

 1.使用雪碧圖(精靈圖)把icon圖標等一些圖片集成在一張圖片上 (注意:圖片不能過大 會出現失真和請求過慢的狀況,致使頁面不能及時渲染)

 2.image-inline:在有些場景中,咱們徹底能夠把一些圖片轉成base64編碼,做爲html代碼,減小http請求.

三:預加載和懶加載

相比這兩個詞你們據說的不少,實際應用仍是不多的.

 1.預加載應用場景:電商網站或者頁面較長有須要加載不少圖片的應用中

          

在圖片容器沒有出如今可視區域內以前不去請求圖片資源,當圖片容器出如今可視區域內的時候再去請求資源.(可大量優化性能)

 2.懶加載應用場景:典型應用抽獎(抽獎的時候,是否是選中那個獎品,圖片就當即變化了,因此要提早獲取到圖片資源)

四:重繪與迴流

這兩個問題是老生常談的問題,那咱們就解決吧.

概念

重繪:元素的外觀,風格 不影響佈局 和幾何大小

迴流:頁面佈局和幾何屬性(尺寸大小等)改變

常見引發重繪的緣由:

 常見引發迴流的緣由:

 

解決辦法:

1.用translate替代top改變

2.用opactiy替代visibility(注意要把目標元素單獨設置在一個圖層上 如何設置圖層:目標元素 1.will-change:transform 2.transform:translateZ(0) 其它的方式自行百度)

3.不要一條一條地修改DOM的樣式,預先定義好calss,而後修改DOM的class名稱

4.把DOM離線修改(先把元素display:none,修改以後在顯示出來)

5.不要把DOM結點的屬性值放在一個循環裏當成循環裏的變臉(用一箇中間變量保存,否則會破壞瀏覽器的重繪緩存機制,致使代碼健壯性不夠)

6.不建議使用table佈局

7.動畫實現的速度的選擇

8.對於動畫新建圖層

9.啓用GPU硬件加速(transform:translate3d(0,0,0),合理使用,物極必反)

 

圖層解釋:相似於ps中的圖層,瀏覽器的渲染是多個圖層決定的

上圖就是一個頁面的圖層

 

如何計算瀏覽器的重繪和迴流時間

 

使用這個工具(使用方法自行百度)

 

咱們下期見