webapp優化

1. 優化前提： 業務架構與數據庫設計

2.  單頁web應用  ： ExtJs  backbone  ng  avalon

     框架： React Native    ， ionic  ， Mui, metror,WeeX,device one

Meteor(版本: 1.0) 的另外一個特色是它會經過手機內存中運行的 miniMongo 數據庫在本地維護一個數據拷貝。另外，Meteor 會完成全部電話和服務器之間的數據通訊及同步。(miniMongo 是 JavaScript 實現的 MongoDB API。) 

3.   優化：  a、網絡傳輸優化 （下降請求，並行加載 數量與容量的臨界值）  b、首屏加速 （fake頁 ，懶加載，Dom優化（頁面渲染，資源清理），減小使用fixed、absolute ） c、內存資源優化  d、用戶體驗

4,. 無後端的web應用  本身編頁面  雲平臺定製服務端的API和雲存儲  集成這個平臺提供的SDK 實現註冊認證 社交 消息推送  實時通訊 雲存儲

5.單頁應用 ： 1. SEO差  2. js渲染性能比較差，基於框架：phoneGap,Corona,Xamarin，Titanium 手機 SDK，jq Mobile

6.技能需求： JS，組件化，設計模式

7. 技術上： ios==>Objective-C , android ==> Java  ,  windows Phone   == > .net

static元素處於文檔流中，其渲染速度是最快的，咱們作過一個測試： 
100個absolute元素與100個static元素渲染時差在0.01-0.007ms 
100000個元素渲染差距便增至30ms左右，這個微小的時差在移動端變得尤其明顯，好比： 
小米/三星手機（1000左右），便存在明顯的渲染問題，具體表現爲：

l)定位元素在手機上不能顯示。 
2)定位元素動畫效果失效。

8.

l)CSS選擇器儘可能使用id與class，避免過分層疊 
2)避免使用數值，好比：border: none不會引發渲染，而boder: 0會 
3)動畫時候讓元素脫離文檔流，以避免致使大量reflow 
4)避免逐條修改DOM樣式，改以className實現一樣功能 
5)操做DOM時將display設置爲none，由於這種元素不會影響渲染，或者操做fragment對象取代操做顯示在頁面上的DOM 
6)避免將獲取DOM樣式屬性的操做寫在循環中，可能引發重複reflow

 

一個解決方案是使用settimeout，更好的方案是使用DOMNodeRemoved事件監控頁面DOM改變，將咱們的DOM操做回調放入以確保渲染結束。

l) 釋放沒有使用的閉包 
2)觀察者須要獲得清理 
3) 釋放定時器 
4)view切換過程當中，在destroy中釋放view相關資源

 

1)webapp中view實例保存不超過5個，多了便釋放dom結構以及內存引用（臨界值本身判斷最優） 
2)view隱藏時釋放內部資源，解除DOM事件句柄 
3) UI組件與view相同，須要統一釋放機制

 

1) 使用函數替換邏輯

讓咱們的函數產生一個返回值替換函數中的大段邏輯，這樣的第一個好處即是邏輯清晰，第二個好處是這些函數在不一樣的函數中，這個函數被使用後便會自動獲得釋放。

2) 清理閉包引用

當一個閉包函數或者什麼使用結束後，若不會再使用，便須要手動清理該變量，以便解除閉包之間的引用關係，從而釋放資源。

3) 使用對象屬性或者方法

一個對象能夠引用其餘對象的屬性或者方法，好比obj.foo = thatObj;這種狀況下，咱們能夠隨時刪除對象解除引用關係，而後即可以清理資源。

動畫與假死

動畫而言建議採用CSS3實現動畫，CSS3中又推薦採用最新的接口，好比使用transform取代top/lelf操做，這樣操做效率搞得多。

如果採用動畫能夠將對應元素設置爲absolute以減小回流，另外最關鍵一點仍是避免移動DOM樹過多的節點，這個時候須要駁回產品無理需求，好比：

產品要求日期滾屏組件，顯示半年的數據，這半年的數據即是180個DOM樹

這個級別的DOM一旦移動整個手機會直接卡死，甚至構建DOM樹，渲染頁面也會出現假死現象，該問題須要規避。