!前端優化

http://www.cnblogs.com/wingkun/p/6014259.html　　更快速將你的頁面展現給用戶[前端優化篇]

http://dev.qq.com/topic/57908635c9da73584b02587f　　H5前端性能測試快速入門

http://www.imooc.com/learn/566　　AC2015前端技術大會，多名AlloyTeam優秀講師分享

http://www.alloyteam.com/　　鵝廠Web前端團隊　　http://alloyteam.github.io/

https://juejin.im/post/5a1b9cc051882560e35659e6　　[web前端性能優化]性能優化只有三步，你瞭解嗎　　2017-12-8

---

 

 

前端優化

減小請求數
減小傳輸體積
儘量地利用緩存
縮短關鍵路徑
合理安排請求順序

 

首頁優化

首頁按需加載

異步渲染

異步資源打包優化

服務器端渲染，組件先後端同構

 

DNS相關

一是減小DNS的請求次數，二是進行DNS預獲取　　<link rel="dns-prefetch" href="//baidu.com" />

 

離線包

/*離線可訪問
永久的資源緩存
動態增量更新
安全校驗
預下載&推送*/

 

圖片優化

圖片懶加載 （快到可視區域時，就會進行圖片的拉取渲染）

圖片詳情頁，能夠先顯示圖片列表頁的小型縮略圖，再用高清圖片替換。

高訪問量頁面首屏（js被合併到一個文件中，文件過大，但並非首屏所需的資源）——那麼就分離組件，區分環境延後加載，好比把web組件和native組件分開

 

首屏數據展現耗時優化　　——方案總結

localStorage緩存數據優先展現 —— 加快首屏數據展現
jsonp預拉取數據 —— 減小二次渲染，加快首屏數據顯示
按需延時加載非必須資源 —— 減小首屏資源體積
通用數據、圖片內容共享 —— 加快可通用部分數據渲染
跨webview預拉取數據 —— 利用webview建立時間加載首屏數據，加快首屏數據展現

列表項頁面

1)動態首頁列表項，要人爲限制他們最多50條

2)列表頁，數量無限制　　——當頁面較重時，會出現iScroll局部滾動卡頓問題。

局部滾動常列表的優化

iScroll卡頓的緣由

1)須要經過監聽手勢去模擬滾動（包括滾動的加減速，慣性效果）
2)須要移動一個擁有dom數量較多的層

div滾動比iScroll滾動平均FPS提高約40%，而且更穩定。但滾動快容易出現閃白

局部滾動長列表的優化　　——方案總結

直接使用div局部滾動 ———— 數據多的時候一些機型容易出現花屏
div局部滾動聯動內容層 ———— 小米機器上樣式更新僅發生在滾動結束的時候
滾動過程當中刪除不可視區域dom ———— 刪除瞬間觸發layout，形成卡頓
Canvas模擬滾動 ———— 不通機型繪製性能不同，而且存在無障礙化兼容問題
translate複用dom ———— 滾動更流暢，限定dom在必定數量（選用這種，見下面代碼示例。）

在滾動過程當中不斷複用已有的dom，使頁面dom元素始終維持在一屏的數量。
<ul style="height:500px;">
<li style="position:absolute;-webkit-transform:translateY(0px) translateZ(0px);"></li>
<li style="position:absolute;-webkit-transform:translateY(100px) translateZ(0px);"></li>
<li style="position:absolute;-webkit-transform:translateY(200px) translateZ(0px);"></li>
<li style="position:absolute;-webkit-transform:translateY(300px) translateZ(0px);"></li>
<li style="position:absolute;-webkit-transform:translateY(400px) translateZ(0px);"></li>
</ul>
<ul style="height:500px;">
<li style="position:absolute;-webkit-transform:translateY(500px) translateZ(0px);">移出屏幕的列表dom元素補位到最後</li>
<li style="position:absolute;-webkit-transform:translateY(100px) translateZ(0px);"></li>
<li style="position:absolute;-webkit-transform:translateY(200px) translateZ(0px);"></li>
<li style="position:absolute;-webkit-transform:translateY(300px) translateZ(0px);"></li>
<li style="position:absolute;-webkit-transform:translateY(400px) translateZ(0px);"></li>
</ul>

 對於7～8頁的列表，換成div局部滾動比iscroll平均FPS提高43%，而且更穩定。

 

Abstract生態 　　https://github.com/dorsywang/Abstract.js　　隨便看看

選擇怎樣的架構和生態？（玩技術、作需求、業務主導、技術主導）

邏輯引擎、模板引擎、模塊規範、構建流、測試工具

 

 

待補充...