前端性能優化

1、圖片

　　1.1 圖片分類

　　　　1.1.1  jpg，全名JPEG。以24位顏色存儲單個位圖，顏色豐富，高質量壓縮。

　　　　1.1.2  png，透明，半透明。

　　　　1.1.3  GIF ，通用動畫，不支持半透明

　　　　1.1.4  Svg ， 矢量圖（xml），可用於作地圖

　　　　1.1.5  APNG和WebP 出現較晚，還沒有被Web標準採納

　　1.2 替代方案

　　　　用css效果（圓角，陰影等），css動畫，字體圖標替代圖片。

　　1.3 css-Sprites(雪碧圖/精靈圖片）

　　　　1.3.1 減小圖片請求次數

               1.3.2 製做工具

　　　　　　https://alloyteam.github.io/gopng/  騰訊

　　　　　　http://fis.baidu.com   百度

　　　　　　http://gruntjs.com   開發者

      1.4 響應式動態圖片加載　

<picture>
    <source srcset="smaller.png" media="(max-width: 768px)">
    <source srcset="big.png" media="(max-width: 1000px)>
    <img srcdet="default.png">
</picture>

 

2、視頻

　　2.1 播放器形式

　　　　video標籤播放

　　　　flash播放器播放

      2.2 目前方案

　　　　flash+html5

　　2.3 瀏覽器播放器

　　　　Flowplayer：功能簡單，使用方便  https://flowplayer.org/player/

　　　　VideoJs：功能強大，使用複雜  http://videojs.com/

　　2.4 視頻優化解決問題

　　　　按照設計圖作播放器

　　　　用戶進來就能看到視頻

　   2.5 自定義播放器