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樹，渲染頁面也會出現假死現象，該問題需要規避。

轉載于:https://www.cnblogs.com/moneyss/p/10709887.html

總結

以上是生活随笔為你收集整理的webapp优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。