圖片、視頻快速加載資源優化的解決方案

圖片篇

1. 圖片分類主要有jpg、png、GIf、Svg（字體圖標），另外有APNG和WebP格式（比較新，還沒有被Web標準所採納）， 注：png優先考慮
2. 圖片加載方式：第一種，先模糊而後清晰（小波算法）；第二種，很清晰，可是逐行加載顯示（離散餘弦變換，相似離散傅里葉變換，可是隻使用實數）；
3. CSS-Sprites，精靈圖，推薦gopng（鵝廠），fis（狼廠）

加載方式：瀏覽器根據不一樣圖片選擇不一樣渲染算法。更改文件後綴名不會影響加載方式，壓縮算法讀取是在文件頭部。

響應式動態圖片加載（SDK）：

• 須要一個默認圖片做爲佔位圖
• 把屏幕分辨率信息帶給服務器
• 服務器根據信息返回給咱們更優質的圖片
• 如：默認圖片100k，咱們須要準備75k版本、20k版本、5k版本
  

視頻篇

目標：縮短從用戶進入頁面到播放視頻第一幀的時間

1. 把初始化的播放器的代碼的執行順序提早
2. 把播放器播放時所須要的資源提早
   解決方案：
   

附：經常使用自定義視頻播放器屬性：