一、JavaScript 跨後端實現技術

Node 後端開發基礎

• Web 伺服器基礎知識
• 簡單的資料庫設計能力
• 後端 MVC 設計理念
• 後端非同步，Node 服務端非同步程式設計
• 模組化思想
• 中介軟體技術
• 介面設計規範
• 後端部署技術和基本運維能力

MEAN 技術組合： MySQL、Express、Angular、Node

Node 後端資料渲染

SPA場景下SEO的問題

• SPA應用載入的基本流程：瀏覽器端先載入一個空頁面和 JavaScript 指令碼，然後非同步請求介面獲取資料，渲染頁面資料內容後展示給使用者
• 問題：搜尋引擎抓取頁面解析該頁面HTML中關鍵字、內容時 JavaScript 尚未呼叫執行，僅僅是一個空頁面（body為空），影響搜尋引擎收錄頁面的內容排行。
• 解決方案：使用 Node 端資料渲染，在頁面請求時將頁面內容渲染到頁面上輸出（即，後臺直出）

前後端分離方式頁面渲染流程

• DOM 下載 -> DOM 解析 -> JavaScript 檔案請求 -> JavaScript 檔案執行 -> 介面請求 -> DOM 渲染

• 導致資料載入顯示緩慢的問題

Node 後端資料渲染流程

直出層接受前端的路由請求，並在 Node 端的 Controller 層非同步請求服務接入層介面，獲得 Model 層資料進行組裝拼接，然後提取相對應的 Node 端 View 模板渲染出 HTML 輸出給使用者瀏覽器，而不是通過前端 JavaScript 請求動態資料後渲染

前後端同構

• 思想：在前後端分離的開發模式上加入直出層
• 核心：只開發一套專案程式碼，既可以用來實現前端的JavaScript載入渲染，也可以用於後臺的直出渲染
• 原理：
  • 資料模板的前端渲染和後臺直出
    • 將模板描述語法與資料進行拼接生成HTML程式碼字串插入到頁面特定的元素中來完成資料的渲染
  • MVVM的前端實現和後臺直出
    • 頁面載入完成後會開始掃描DOM結構中的Directive指令並進行DOM操作渲染或事件繫結，所以資料的顯示仍然需要頁面執行Directive後才能完成
  • Virtual DOM的前端渲染和後端直出
    • 在瀏覽器生成前端DOM結構，或在直出層直接轉換成HTML文字字串輸出。Virtual DOM的邏輯實現仍然需要在瀏覽器端進行事件繫結來完成，最好讓同構框架幫助我們自動完成，根據HTML的結構進行特定的事件繫結處理，保證最後展示給使用者的頁面完整且帶有互動邏輯

二、跨終端設計與實現

Hybrid 實現方式

• 以前端為主的 Hybrid 實現方式：頁面開發完成後，同構工具自動打包將前端資源目錄裝入 Native 容器中執行
  • 優點：實現簡單，利用框架即可
  • 缺點：不適用於即時通訊或服務端推送的應用場景，無法新增複雜的 Native 功能
• Native 和 Web 結合的 Hybrid 實現方式
  • 通過 JSBridge 協議在 Web 頁面中呼叫 Native 功能

基於 localStorage 的資源離線和更新技術

• ServiceWorker 的資源離線與更新（目前相容性很差，不可行）
• localStorage 的資源離線與更新
  • 將 JS、CSS 資原始檔甚至是介面返回的資料資源快取到瀏覽器的 localStorage 中，下次開啟頁面時不進行資源請求，直接通過 localStorage 讀取內容，然後插入到頁面中解析執行
  • 將最新版本號寫在 HTML 頁面上或者通過單獨的介面請求獲取，與本地版本號對比，若相同則直接讀取快取檔案
  • localStorage 的大小有限制（同域一般為 5M），需要實現 localStorage 靜態資源的更新
• 基於增量檔案的更新方式
  • 需要生成不同版本到最新版本的增量更新檔案，以及最新版本的全量更新檔案
  • 基於檔案程式碼分塊的增量更新機制（chunk 演算法）
  • 基於編輯距離的增量更新機制（編輯距離，指從一個字串變換到另一個字串所需要的最少變化操作步驟）

基於 Native 與 Web 的資源離線和更新技術

• Web 端的程式碼資源是通過離線包的方式釋出到伺服器靜態目錄上的，同時主站點會儲存一個線上的前端頁面實現供瀏覽器直接載入使用
• Native 應用啟動時會主動拉取線上的 Web 離線包版本，與本地儲存的版本進行對比，若需要更新則會去伺服器上拉取最新的離線包
• 當用戶訪問目標頁面時，Native 應用先檢查該檔案地址對映到的離線包本地目錄中的檔案，若離線包有內容則直接讀取，否則線上拉取，同時通知 Native 應用去拉取最新的離線資源包

資源覆蓋率統計

• 在每次新資源包釋出後統計新版本的更新覆蓋率
• 每次 PV 統計時帶上版本號，最後根據 PV 中的版本號來統計訪問不同版本上使用者的分佈情況
• 如果發現某個版本的使用為 0 或接近 0，該版本就無需在維護