移動Web優化專場主要講在移動設備上如何優化H5，使得Web運行的性能能夠盡可能的接近Natvie。
QQ移動頁面框架優化實踐
主要是Android QQ方面，因為大部分的內容基于H5開發，所以頁面優化對Android QQ的性能提升很有用。
傳統頁面的優化實踐
頁面加載的核心是通過CDN(Content Delivery Network)進行靜態內容的分發，以及從"Data Server"獲取動態數據：
這種方案是非常依賴于網絡質量的，并且動態數據是在頁面打開時才獲取，導致空白頁面的出現：
WebView池
不在單獨使用時才創建WebView，而是預先處理，在系統空閑的階段預先創建，并對使用完的WebView進行回收利用，也就是集中統一處理，而使用的程序“即拿即用”，另外為便于復用，抽取上下文關系到獨立的中間層：
靜態直出
優化靜態直出，向“Data Server”獲取最新的動態數據后，更新首屏頁面，這些發布到“CDN”上，減少了用戶需要動態更新的數據：
所謂“直出”，是Web性能優化的一個概念，簡單的說就是將多次網絡請求獲取頁面的方式變成減少請求次數，讓Web服務器一次性的將渲染好的頁面數據返回，這篇文章直出理論與實踐總結講的不錯，一步步的講解了多種直出模式（前后端分離->數據直出->服務端渲染）：
離線預推
對于動態請求過度依賴于網絡的問題，在登錄階段即開始更新離線包，作為WebView的耳機緩存，減少實時網絡請求：
針對可能占用過多帶寬的問題：使用“7z”生成壓縮包，使用“Bsdiff”生成增量包，盡量減少帶寬要求。
動態直出頁面的優化實踐Sonic
由于業務的變化，“個性化推薦”，使得動態直出成為必須考慮的選項，而不同于靜態直出，動態直出面對的問題包括：
- 服務端實時拉取數據渲染耗時長
- 首屏無法使用離線預推等緩存策略
然后我們可以看看QQ采取的哪些措施
在"WebView"launch的時候就開始執行網絡請求，而不是空等。
其實還是一種預先下載的行為，然后自動的將網絡流保存到內存中，使用時邊加載邊解析，避免空等。
實時緩存，在使用緩存的時候更新緩存：第一次頁面打開后會有緩存，下次打開直接用，再等待下載更新。避免重刷，這個會導致白閃，只刷新局部頁面。
要實現“增量更新”只要在數據格式上進行規范，使得提交和合并都簡單易行
在此基礎上的可以使用"Preload"實現預下載繼續優化：
這套系統叫做"Sonic"已經開源了：
關于移動頁面框架的一點思考
最后比較了Web和Native：
建議根據具體的應用業務選擇合適的框架：
移動網頁加速的通用解決方案探討和實踐
遇到的困擾
這里首先介紹了目前困擾大家的“速度低下”的移動網絡的現狀，這個直接影響到了企業的業務，比如“在1.5s內每慢500ms，就會降低3%的用戶點擊”，所以如何提升性能，對于站點的意義很大。
業界已有一些解決方案，比如：
- Instant Article：FB的文章快速加載工具，優化RSS/HTML標簽來精簡內容，并可以在后臺自動加載"Pre-load"，加載速度為普通移動網頁的十倍
- AMP：Accelerated Mobile Pages，使用優化過的HTML標準，限制使用CSS/JS，控制資源下載時機，高度緩存，簡單來說是基于優化的HTML的頁面規范實現頁面高速加載。
對于百度搜索來說，結果頁點出效果有很多不足：
- 資源加載慢
- JS執行效率低
- 資源加載無控制
- 點出過場體驗
框架設計和實現
加速的常用優化手段：
- 代碼優化（css、html、js優化）
- 減少HTTP請求（雪碧圖，文件合并、懶加載等）
- 減少DOM節點
- ?阻塞（內聯CSS，JS后置）
- 使用?屏加載
- 緩存
雪碧圖是指CSS Sprite，CSS精靈，是一種CSS圖像合并技術，將小圖標和背景圖像合并到一張圖片上，然后利用CSS的背景定位來顯示需要顯示的圖片部分。
需要解決的核心問題：
這里可以很清晰的看到，百度是通過解決這四個核心問題來實現加速：
- 資源加載控制：用戶立刻需要的有限加載
- 網絡連接優化：優化服務器部署，讓訪問更容易進行
- 代碼執行效率：優化JS執行效率，從而保證頁面執行加速
- 頁面資源緩存：緩存是加速的利器
框架設計的核心組成：
可以看到加速框架設計的核心組成，主要是三部分：
- HTML規范：其實類似于開篇提到的FB和Google的方法，規范HTML，減少標簽使用，給HTML做瘦身
- JS運行環境：使用Iframe加載方式，控制資源加載，優化代碼執行效率
- Cache服務：緩存靜態資源，提高訪問效率
加速原理
網絡連接優化
CDN(Content Delivery Network)實際上是通過擺放節點服務器是的在現有互聯網基礎上形成了一個虛擬網絡，可以通過智能分析更好的平衡網絡請求，使用CDN來優化網絡連接應該算是一種比較通用的方法了。
靜態自適應布局
根據不同設備的具體情況，自動布局，對百度這種公司來說，面向的用戶來自互聯網的不同角落，使用的設備也是各式各樣，自適應布局非常重要。
首屏
優先加載首屏資源，特別對于可見資源要有限加載，不可見資源只是在觸發是加載，對于非首屏資源，不加載，直到進入可視區域。
資源緩存
包括圖片、腳本、字體文件等，所有資源都采用統一cache域名。
資源加載順序控制
根據組件的生命周期和加載優先級合理調配，就像上菜一樣，菜沒上，先上一碗飯就不好了。
Pre-rendering
預渲染頁面，預先取得加速框架的JS/CSS等
圖片優化
圖片占整體資源的比例達60%，使用Guetzli壓縮，使用WEBP格式
開發工具集
也開源了。
比較
對比我們自己的情況：客戶因為是面向企業的，所以機器的類型固定，相對可以現在在高端；Native的內容居多，頁面依賴較少；不需要經常性的實時更新。
