小程序原理與優化

一.渲染層和邏輯層如何進行交互

1.1小程序運行環境

運行環境	邏輯層	渲染層
ios	javascriptCore	WKWebView
安卓	V8	定製內核
小程序開發者工具	NW.js	chromium Webview

不一樣的運行環境也帶來了一些差別性，因此咱們完成小程序後也應該儘可能在真機上測試

1.2渲染頁面的技術選型

對於前端的渲染頁面，分別有幾種不一樣的技術選型方式

• 純客戶端原生技術（android，ios）
• 純Web技術（html,css,js）
• 純客戶端原生技術與web技術結合的混合開發（Hybrid）

而小程序就是使用了第三種，混合開發的方式，來進行開發

爲何不使用前兩種？

• 小程序的運行環境是微信，若是用原生開發，小程序代碼每次都須要和微信代碼一塊兒發佈，很是麻煩
• 若是使用純web技術，純web開發在複雜的交互上，存在一些性能問題，由於渲染層和邏輯層都是在一個單線程上執行的，會出現一些業務和渲染搶佔資源的狀況

1.3小程序的渲染層和邏輯層

(渲染層webview)	（邏輯層JsCore）
WXML,WXSS	js，微信Api

Native層（系統層）
微信能力（定位，掃碼），離線存儲，網絡請求。。。

小程序若是經過混合開發技術將渲染層和邏輯層進行交互？

渲染層觸發事件 (傳遞) --> 系統層 （轉發） --> 邏輯層進行處理

邏輯層處理完數據（返回給）--> 系統層 (傳遞給) --> 渲染層

因此在小程序中，有一個很忌諱的操做，就是頻繁的進行setData，這樣會形成系統卡死

二.小程序的運行機制和更新機制

2.1 小程序運行機制

• 冷啓動和熱啓動
  • 冷啓動就是其一次打開小程序或者被微信銷燬過再一次打開，熱啓動當前正在運行小程序或者切換了後臺幾分鐘以內的狀態
• 前臺與後臺
  • 前臺就是咱們正處於的界面，當把切換到另外一個程序的時候，小程序就會被切換到後臺
• 小程序銷燬
  • 當小程序進入後臺後會維持一段運行時間，在被銷燬，到了時間會被微信主動銷燬

2.2小程序更新機制

• 當咱們開發完微信小程序的時候，會編譯發佈到微信服務器
• 當咱們首次加載時候會向服務端請求數據和資源包，在本地運行
• 當咱們冷啓動的時候，會讀取緩存，而後自動檢查更新
• 當咱們熱啓動的時候，若是須要更新，就須要在頁面加載的調用官方的API來進行更新

三.小程序性能與體驗優化

• 合理設置可點擊元素的響應區域的大小
• 避免渲染頁面耗時過長（減少渲染區域）
• 避免執行腳本的時間過長（對腳本邏輯進行優化）
• 對網絡請求作有必要的緩存，以免多餘的請求
• 不要引入未被使用的wxss樣式
• 全部資源請求建議使用HTTPS
• 在小程序中及時回收定時器
• 避免使用:active僞類來實現點擊態（在小程序中體驗很差，滑動和滾動時點擊態不會消失）
  • 可使用小程序的內置屬性hover來實現點擊態
• 滾動區域能夠開啓慣性滾動加強用戶體驗
  • 一般安卓內置開啓了慣性滾動
  • ios能夠配置：-webkit-overflow-scrolling : touch
• 儘可能將簡單的圖片替換成iconfont字體圖標來顯示
• setData
  • 若是某個操做對setData進行頻繁的操做，咱們應該結合業務需求，優化代碼
  • 舉例：微信小程序內置播放器播放音樂時，會不停的觸發onTimeUpdata方法，咱們將其進行播放時間與滾動進度聯動的時候，不該該直接設置setdata，咱們能夠設置取到當前的秒數，判斷當前若是秒數沒有變化，不須要進行setdata，這樣，咱們就避免了當毫秒數也變化時，多餘的設置了setData
• 避免將未綁定的WXML的變量傳入setData
  • 若是某些變量，它不須要將其顯示在渲染層，咱們能夠將變量設置在頭部，而不是setData中
• 小程序內置性能優化方案
  • 打開控制檯，點擊Audits，運行，而後手動進行小程序全部操做，小程序會自動給出一些優化方案
  • 也能夠在右上角的詳情當中，設置自動運行體驗評分

四.詳解setData

官方：setData 函數用於將數據從邏輯層發送到視圖層（異步），同時改變對應的this.data的值（同步）

什麼意思？爲何又是異步又是同步？

咱們在data中定義一個變量
data：{
    testData：0
}
而後再取設置和顯示這個值

console.log(this.data)
this.setData({
    testData:1
},()=>{
    console.log('回調執行')
})
console.log(this.data)
結果：
//0
//1
//回調執行

意思就是，設置值的時候，setData將異步的發送數據到視圖層，可是剛設置完，就能夠同步的立刻在當前頁面經過this.data獲取到值

在修改setdata的值的時候，須要注意什麼？

五.場景值scene的做用與應用場景

進入小程序有幾十種方式，而每一種進入的方式就帶有不一樣的scene值

• 在小程序的app.js中，有幾個生命週期函數，onLaunch（）監聽小程序初始化，onShow（）監聽小程序切前臺等
• 咱們打印出這些函數中帶有的參數onLaunch（options），，onShow（options），會發現其中都帶有scene值
• 咱們能夠根據不一樣的scene值來對用戶進行分流和數據統計
• 頁面收錄sitemap.json的做用和使用方法

六.頁面收錄sitemap.json的做用與使用方法

相似與網頁中的seo，小程序也能夠經過內容被搜索到

在小程序信息中的查看詳情配置（頁面收錄設置）

沒有 sitemap.json 則默認全部頁面都能被索引 ，其餘配置查看官方文檔