2019年TWeb騰訊前端技術大會嘉賓演講PPT資料合集.rar

1、目目錄錄/contentsFlutter簡介實踐框架及頁面棧管理性能優化Flutter For WebFlutter簡簡介介1Flutter簡介跨平臺跨平臺1201320152016Web頁頁面面H5+CSS3+JS最成功的的跨平臺20172014Hybrid AppsNative良好的用戶交互體驗Web跨平臺開發Write Once,Run AnywhereFlutter簡介跨平臺跨平臺12014Web頁頁面面2015React NativeFaceBookJS-iOS+Android20162017Write Once,Run AnywhereFlutter簡介跨平臺跨平臺12014Web

2、頁頁面面2016React Native20152017Write Once,Run AnywhereWeeXAlibabaJS-iOS+Android+WebFlutter簡介跨平臺跨平臺120182014Web頁頁面面2017React Native2015Write Once,Run AnywhereWeeX2016 FlutterGoogleDart-iOS+Android+WebFlutter簡介1快速開快速開發發富有表富有表現現力和靈活的力和靈活的UI原生性能原生性能初初識識FlutterFlutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面

3、 Flutter簡介1原生性能原生性能生生態態與模式與模式C/C+引擎操作OpenGL、GPU直接渲染平臺一致性Flutter簡介1生生態態與模式與模式原生性能原生性能實實踐框架及踐框架及頁頁面面棧棧管理管理2實踐框架及頁面棧管理2騰訊騰訊企企鵝輔導鵝輔導實踐框架及頁面棧管理2騰訊騰訊企企鵝輔導鵝輔導實踐框架及頁面棧管理2騰訊騰訊企企鵝輔導鵝輔導實踐框架及頁面棧管理2騰訊騰訊企企鵝輔導鵝輔導實踐框架及頁面棧管理2實實踐框架踐框架-手機端手機端實踐框架及頁面棧管理2實實踐框架踐框架-手機端手機端Flutter Android依賴庫Jar/SoAndroid項目iOS項目Flutter iOS依賴

4、庫Framework實踐框架及頁面棧管理2實實踐框架踐框架-手機端手機端Native項目Flutter 依賴庫實踐框架及頁面棧管理2實實踐框架踐框架-Pad端端AlertFlutter UI層層實踐框架及頁面棧管理2接入接入層層-MJFlutterToastDialogRefreshNavigatorStorageCSSenderNotificationLoggerCommon專有通道通用通道應用UI網絡請求存儲頁面棧推送日志基礎能力數據數據傳輸層傳輸層Native基基礎層礎層應用UI實踐框架及頁面棧管理2接入接入層層-MJFlutter通道傳輸基礎能力接口簡單易用方便接入擴展能力強終生使用底

5、層Engine耦合低實踐框架及頁面棧管理2混合混合棧棧管理管理Native_0Flutter_0Native_1Flutter_1Flutter_0Flutter_2頁面切換實踐框架及頁面棧管理2混合混合棧棧管理管理NativeFlutterFlutter_2Flutter_1Flutter_0ContextNavigatorPush/PopRouteBuilderUrlSchemeVC/Activity實踐框架及頁面棧管理2混合混合棧棧管理管理-方案方案NativeFlutterControllerFlutterActivityFlutterControllerFlutterActivity

6、GPU、IO、UIDart VM實踐框架及頁面棧管理2混合混合棧棧管理管理-方案方案NativeFlutterControllerGPU、IO、UIDart VMNative頁Flutter頁Flutter頁Flutter頁實踐框架及頁面棧管理2混合混合棧棧管理管理FlutterVC/ActivityFlutterVC/ActivityFlutterViewFlutterViewFlutterViewFlutterViewInitPushPopInitPushPopFlutterEngine/FlutterNativeViewFlutter單例UrlSchemeUrlSchemeNativeN

7、ativeNativeMJFlutter混合棧實踐框架及頁面棧管理2混合混合棧棧管理管理MJFlutte混合棧Flutter單單例例統統一路由一路由動動畫分離畫分離實踐框架及頁面棧管理2騰訊騰訊企企鵝輔導鵝輔導實踐框架及頁面棧管理2騰訊騰訊企企鵝輔導鵝輔導Live WidgetTodo WidgetCourse WidgetTab Widget上課頁實踐框架及頁面棧管理2騰訊騰訊企企鵝輔導鵝輔導WidgetsCSSenderNavigatorMJFlutter上課頁WNSUrlSchemeNativeServeDataCallbackData Bind實踐框架及頁面棧管理2騰訊騰訊企企鵝輔導鵝

8、輔導WidgetsCSSenderNavigatorMJFlutter上課頁WNSUrlSchemeNativeNative PageLive、TaskTodo PageRoute保存頁面棧信息FlutterEngine/FlutterNativeViewRouteNavigator性能性能優優化化3性能優化3泄漏內存增量內存內存-降低降低20%引擎圖片加載性能優化3分析調試渲染頁頁面渲染面渲染-降低降低20-30%定制規則優先使用StatelessWidget最小封裝原則減少build函數中過多操作嘗試將部分Widget設置為const不可見的控件懶加載自定義控件，盡可能復用配置Flutte

9、r For Web4Flutter For Web4發發展展Flutter在今年GDD大會正式發布stable 1.9，同時宣布Flutter For Web倉庫正式合入Flutter主倉庫Dart編譯編譯JavaScript移除平臺模移除平臺模塊塊匹配匹配Web特性特性Flutter For Web4發發展展Flutter For Web4項項目改造目改造AlertToastDialogRefreshUI 適配AppWebCSSenderNavigatorMJFlutterHttp/CGIJSBridgeWebAppWebFlutter For Web4平臺區分平臺區分支持dart:io庫i

10、mport main_web.dart if(dart.library.io)main_io.dart;main.dartmain_io.dartmain_web.dartFlutter For Web4網網絡請絡請求求package:dio/dio.dartNavigatornetwork_helperPlayformAdapterFlutter For Web4JavaScript擴擴展展Dart與JavaScript交互Flutter For Web4JavaScript擴擴展展Dart與JavaScript交互index.htmlFlutter For Web4JavaScript擴擴

11、展展Dart與JavaScript交互js_helper.dartFlutter For Web4降降級級Flutter UIAdaptCSSenderNavigatorMJFlutter異常處理上線HttpDart BridgeCSSenderFlutter For WebCommonCGIStorage自動化腳本部署系統發布Serve上線降級Flutter For Web4降降級級Flutter Engine CrashFlutter與Native交互異常Flutter For Web4動態動態更新更新Flutter UIAdaptCSSenderNavigatorMJFlutter降級熱

12、更新反饋異常處理上線HttpDart BridgeCSSenderFlutter For WebCommonCGIStorage自動化腳本部署系統發布Serve上線Flutter For Web4動態動態更新更新App initDynamicPatching頁面標記FlutterFlutter For Web標記命中Requesttrueroutemarktrue總結與展望1、大前端戰略2、Flutter For Server3、擁抱Flutter，勇于嘗試騰訊OMI OMI 框架前端生態賦能與創新實踐自我介紹網名當耐特(dntzhang)Tencent/OMI 負責人多個開源框架作者熱愛創新

13、創造，反對重復造輪子概覽OMI+Web ComponentsOMI+小程序OMI+Kbone OMI+ReactOMI+VueOMI+PreactOMI+Three.jsOMI+CaxOMI 設計哲學與通用定理OMI 靈魂上古瀏覽器 Web Components 模擬 Path UpdatingScoped CSS 模擬Web ComponentsProxy 或 ObaaCross-Frameworks FrameworkOMI+Web ComponentsPath UpdatingClass VS Singleton Fragment 兩種寫法時間旅行https:/tencent.githu

14、b.io/omi/packages/omi/examples/store-tt/時間旅行時間旅行時間旅行OMIM OMIM 跨主題 OMIM 跨主題 OMIM 跨框架-VUE OMIM 跨框架-REACT https:/ 通過 CEE 認證Custom elements Testing CaseCustom elements with EventCustom elements with PropertiesReact vs Preact with custom elementsVUE CEE 認證SNAKE MVPSNAKE MVPOMIX+小程序omix 是 westore 的進化版本omi

15、x 是 omi 生態里使用最廣泛的小程序框架omix 對小程序 0 入侵omix 只有 1 kbomix 傳承了 omi 無狀態視圖的設計哲學OMIX 架構領域驅動OMI+Kboneomi-mp-使用小程序開發生成 Web 和 小程序omip-使用 omi 開發Web 和 小程序（編譯型）omi-kbone-使用 omi 開發Web 和 小程序（運行時）推薦推薦Kbone 原理-小程序架構Kbone 原理View=Component.setData(vdom)Kbone 原理Kbone 原理Kbone 原理Kbone 原理OMI+KboneOMI+Kbone歡迎為 Kbone 貢獻代碼OMIV

16、-1KB Store System for VueOMIV-響應式OMIV 負責人什么是 CSS？CSS ModulesStyled-JSXStyled-JSXPreact-CSSHTML 標簽的作用？HTML 標簽用于表達結構？HTML標簽短板無法傳遞復雜的對象作為 attribute無法傳遞數字無法傳遞 false properties 和 attributes 傻傻分不清楚React 問世React 組件屬性任意傳React 橫空出世數據數據驅動 UI=fn(state)搭搭積木一木一樣搭搭頁面面組件任意件任意類型的屬性都可以型的屬性都可以傳遞Vue 組件屬性任意傳HTML標簽通過 sr

17、c 傳遞復雜對象HTML標簽通過 slot 傳遞復雜對象HTML標簽通過 slot 傳遞復雜對象OMI JSX 傳遞復雜對象OMI 自定義標簽傳遞復雜對象HTML標簽無法傳遞 false 屬性覆蓋默認值 trueOMI 解決方案OMI-THREEOMI-THREEOMI-CanvasDebug Object Tree設計哲學與通用定理前端根本不存在 MVVM 架構！99%的軟件可以沒有 UIPreact 是最好的 React Web 框架，React 不是軟件沒有 UI 更能看清其本質Zen of PythonOMI 設計哲學Web Components 不能替換整個前端框架基于 Web Co

18、mponents 封裝一下 便可以替換整個前端框架 比如 OMI什么決定框架生死？推廣營銷？架構原理？大廠背書？內部實現？什么決定框架生死？框架 API 設計決定框架生死HTML+CSS+JS 最佳實踐Web Components CSS、Styled-JSX或 CSS Modules CSS GridTypeScript、ES6+精力守恒定理 框架作者耗費精力越多框架用戶耗費精力越少 UI 只是 UI 邏輯狀態不屬于UI，可以剝離無狀態UI是更高層次的抽象因為簡單，所以強大 不要完全消化他人分享的內容 那會抹殺你的創造力omijs.org Serverless SSR 實踐CSR SSR C

19、lient Side Rendering客戶器端渲染Server Side Rendering服務器端渲染VSHTMLAssetsRenderHTMLAssetsHydarteDataCSR SSR SSR 可以帶來什么？更快的內容達到時間最大程度地減少網絡和設備的影響更好的 SEO內容可以更好的被搜索引擎所理解CSR SSR VS但卻沒有成為主流的 Web 開發模式構建 SSR 應用并不容易從前端變身全棧工程師JS Bundle Node 應用選型 Node 框架應對性能開銷保障應用穩定性ExpressKoa不再只是枚前端工程師JS Bundle Node 應用選型 Node 框架應對性能開

20、銷保障應用穩定性如何讓一套代碼兩端共用渲染機制的差異端上環境的限制如何處理數據請求如何避免狀態污染開發調試環境的打通WebNode需要多少臺服務器？如何部署環境？如何負載均衡？如何應對服務器宕機？如何應對用戶請求峰值？上線應用前還需要考慮性能收益開發成本CSR SSR CSR SSR 直到 SSR 遇上 Serverless開發者可以更關注業務邏輯本身函數即服務（FaaS）fx動態修復，函數間相互獨立天然的隔離性全托管服務、按需執行、彈性伸縮無需運維生態的不斷完善AWS Lambda阿里云 FCGoogle FunctionsAzure Functions騰訊云 SCF性能收益開發成本CSR

21、SSR CSR SSR Rax 中的實踐WebWeexMiniAppFlutterRax 是一套遵循 React 標準的跨端解決方案Rax SSR 工作流程DocumentHTMLapp.jsonHydrateRenderFunctionPagesAssets組件如何完成到服務的轉變可行性分析 SSR 工作原理ComponentDataHTMLServer Render服務可行性分析 FaaS 工程函數描述文件CLIreq：http.ClientRequestres：http.ServerResponserenderComponentToHTML可行性分析 HTTP 觸發器ServerRend

22、erHTMLDataFunctionComponent基本原理目標Rax AppFaaS 工程Node App+CSR 工程SSR 工程Documentapp.json工程實現build.json數據請求服務器端渲染頁面組裝錯誤處理SSR Loader函數配置文件rax-plugin-nowrax-plugin-fcrax-plugin-awsrax-plugin-xxxPluginPageNowFCAWS數據請求Page.getInitialProps聚合業務邏輯，兩端共用母板管理Document.jsx更適合 Server 端渲染，統一模板語言PagesHomeAboutapp.json路

23、由HTTP GatewayFunctionFunctionHomeAboutSSR 的持續投入極致的渲染性能 6x React自適應的 Hydration 模式SPA 下的混合渲染ThanksWeb編輯器的實現從簡單編輯到專業排版個人簡介11年程序員，前端、終端、Java后臺目錄目錄123典型的編輯器-Word菜單欄工具欄狀態欄右鍵菜單內容編輯區實現一個最簡單的編輯器示例完整的編輯流程解析數據生成html打開文檔dom樹的渲染接受輸入并渲染contenteditable定時檢測臟區計算出changeset應用changeset更新html刷新dom簡單實現會有哪些問題IOS上光標飄起來了一切隨

24、緣的表現瀏覽器排好之后跳變想都別想了排版引擎-需要解決的問題和思路Thequickbrownfoxjumpsoverthelazydog.Bi-DirectionalTextn阿拉伯語和英語混排，需要根據文字的方向屬性進行處理0 x0067(g)LATINSMALLLETTERG0 x0308()COMBININGDIAERESIS0 xAC01()HANGULSYLLABLEGAG0 x1100()HANGULCHOSEONGKIYEOK0 x1161()HANGULJUNGSEONGA0 x11A8()HANGULJONGSEONGKIYEOKGraphemeClustern帶有重音符號的

25、拉丁字符、韓語的文字等，一個字素（Grapheme）可能由多個 Unicode 碼點組合而成。斷行時需要格外注意。n中文行首字母不能為標點符號n英文單詞不能被分詞，行內單詞均衡擺放Vertical Layoutn豎排文字需要對標點進行旋轉（如括號）或者平移（如句號，左下角移動到右上角）n英文、數字根據設置需要支持旋轉 90 或者 Upright 排列排版引擎-需要解決的問題和思路分頁、分欄、分層、環繞、工程圖騰訊文檔Word編輯器架構Layout(排版引擎)Features(功能)ServiceNetWork權限控制事件通知中心工具欄&菜單斷字測繪排版字體&段落圖片分頁表格Workbench狀

26、態欄IOSurface(輸入)輸入復制粘貼上下文菜單文檔內容選區Render(渲染引擎)光標StateDataModel(數據層)Unitool日志系統ViewModelEditor(編輯器)Collab新編輯器的設計n整體架構n排版引擎n渲染引擎n輸入&編輯n數據層nWorkbenchn通用容器開放和未來展望nSDK及開源協同n后續規劃排版-Box-Glue-Penalty模型boxBox width:aestretic aestretic不可分割的 Block，內容可以是一個字符、單詞、音節等Glue width,shrink,stretch可拉伸或壓縮的 Block，通常是單詞間的空格P

27、enalty width,flag,penalty潛在的斷行點，包含體現排版美觀的懲罰值因子penaltygluepenalty渲染引擎-整體實現nReact組件化各級渲染n渲染整體可替換n兩層實現局部更新n掛載overlay獨立一棵樹渲染引擎-選區選區是編輯器的核心狀態，幾乎所有操作都圍繞選區-CoreSelection（數據層）-ViewSelection（ViewModel層）-WindowSelection（UI層）CoreSelection與ViewSelection提供便捷的轉換接口避免老文檔方案使用Dom比對來獲取Model層的選區選區移動（方向鍵）左右移動簡單思路：數據層Cor

28、e Range 1問題：多碼位文本的處理解決方法：使用 unicode 計算字素長度，設置正確的 range上下移動1.計算光標相對左側偏移量 X2.獲取上一行在 X 偏移量的文本盒子 Box3.對文本進行分割測量，計算文本內最靠近 X 的分割點光標偏移量 X上一行光標位置輸入及復制粘貼隱藏輸入區處理好之后再渲染到文檔中捕獲刪除，移動事件，模擬輸入&編輯-拼音輸入法問題Google Doc 協同編輯當前還存在的問題：1.2.3.n增加 compositionRange 記錄拼音輸入法中間態區間n同步底層數據，通知排版展示，不協同數據n對協同方編輯的數據，進行坐標偏移處理解決方案：數據結構字符串

29、操作轉換n節屬性表(Section)、段屬性表(Paragraph)、字屬性表(Span)，底層采用 FloatTree(基于紅黑樹)數據結構實現，可以支持大量文檔屬性的增刪查改。n文字池 TextPool，底層采用 PieceTable 數據結構，可以高效地支持大文本的增刪查改。n以扁平化的方式，獨立描述文檔的幾種屬性元素。n實現快速的插刪改查操作方式。PiceTable示意圖協同操作原子化n增加n刪除n保留要求n可撤銷n時序性n基本版本解決沖突參考not.jsnEasySync2模塊化、插件化設計模塊化、插件化設計通過命令添加一個feature字體功能配置文件片段命令創建feature實現

30、handler全局配置增加plugin功能配置開發模式，豐富的基礎feature開發成本低開發新需求所需修改的文件2 2分隔線需求開發時間4d4d區分移動端配置解析Word工具欄所有feature50+已實現featureExport組合形成SDK企業微信、企業微信、QQ友記友記SDKSDK通用容器通用容器圖片錄音文件代碼塊操作：縮放、移動、刪除屬性：坐標、大小和類型開放SDK編輯器 SDK核心 Features騰訊文檔企業微信文檔文檔業務 Features企業微信 FeaturesQ友記企業微信騰訊文檔SDK使用范例SDK使用范例編輯器SDK后續的規劃創新功能n補充并優化好基礎Feature

31、n完善通用容器能力n更方便、靈活的數據接口2019中開放SDK2019底搭建好插件接口2020社區打造社區插件擴展從從 Jenkins Jenkins 到到 GitHub Actions GitHub ActionsCI/CD CI/CD 現代史現代史個人介紹.yml0name:苗兆豐nickName:maplegraduatedFrom:西安交通大學graduatedAt:2016/7workingIn:騰訊 QQ-Web 團隊workingOn:研發效率提升工作CI/CD CI/CD 現代史現代史CI/CD CI/CD 是什么？是什么？之1CI/CD 是什么？能夠頻繁、高質量地完成交付編碼

32、Lint單元測試集成測試自動發布對生活充滿希望CI/CD CI/CD 現代史現代史CI/CD CI/CD 是什么？是什么？之行業生態2公有云服務化幾乎被 Travis CI/Circle CI 瓜分行業生態2Jenkins 在私有化部署市場一家獨大行業生態2是不是數年間 CI 行業毫無進步？Jenkins/Travis CIJenkins/Travis CI20112011行業生態2行業生態2CI 的“面子”和“里子”Pipeline執行容器（面子面子）插件（里子）行業生態2要么更新“面子”，要么更新“里子”，要么一起更新！你的“面子”是什么？VM/實體機真巧，我也是你的“里子”是什么？jar

33、 包，你呢？我，我沒有行業生態2以 VM 為主的“面子”和以 jar 包、Shell 為主的“里子”有哪些缺點？資源占用多啟動時間長管理成本高VM/實體機對插件貢獻者要求高對運行環境有特定要求jar 包/Shell 行業生態2CI 的命運同樣要考慮到歷史的進程2013行業生態2CI 的命運同樣要考慮到歷史的進程2013行業生態2CI 的命運同樣要考慮到歷史的進程2013行業生態2Docker vs.VM啟動快啟動快資源占用少資源占用少體積小體積小管理成本低管理成本低啟動快啟動慢資源占用少資源占用大體積小體積大管理成本低管理成本高行業生態2有了原子彈，下一步怎么搞？2011Jenkins/Tra

34、vis CIJenkins/Travis CI20112013 Docker2015 CNCF9102Jenkins XJenkins X2018行業生態2Jenkins XJenkinsJenkins2011行業生態2Jenkins XJenkins XJenkins X2018JenkinsJenkins2011行業生態2Jenkins XJenkins XJenkins X2018“Jenkins X is a CI/CD continuous delivery solution for modern cloud applications on Kubernetes”JenkinsJen

35、kins2011行業生態2插件的形態npm 包？jar 包？一段 Shell？Pip 包？好像都沒有本質差別？行業生態2Docker as PluginFROM python:3-slimWORKDIR/scfcli/COPY.RUN pip install-no-cache-dir scf&scf-version&echo“finishENTRYPOINT /scfcli/entrypoint 行業生態2革命性的開創 插件有了跨 CI 使用的可能性 插件自帶執行環境 插件生態融入 Docker 生態行業生態2全新的插件生態2011Jenkins/Travis CIJenkins/Travis

36、 CI20112013 Docker2015 CNCF9102Drone.ioDrone.io2019 v1.0.02014 sinceJenkins XJenkins X2018行業生態2Drone.io行業生態2Jenkins XJenkins X201891022011Jenkins/Travis CIJenkins/Travis CI2011Drone.ioDrone.io2019 v1.0.02014 since2013 Docker2015 CNCFVM BasedCloud Native/Docker based新舊更迭行業生態2一切都看起來那么完美，然而致命缺陷行業生態2致命缺

37、陷CI/CD CI/CD 現代史現代史“攪局者攪局者”GitHub Actions”GitHub Actions之“攪局者”GitHub Actions3微軟的野心AzureVS Code RemoteGitHub?代碼編輯代碼托管GitHub Package Registry包倉庫云BetaBeta“攪局者”GitHub Actions3怎么做？GitHub Actions 的艱難抉擇GitHub Universe 2018“攪局者”GitHub Actions3最開始，其實我也想全面上 DockerGitHub Universe 2018“An Action is a Docker con

38、tainer that runs as part of a Workflow.”“攪局者”GitHub Actions3后來，我我都要GitHub Actions 2019 Beta Documents“攪局者”GitHub Actions3jobs:test:name:GitHub Action Official Demo runs-on:$matrix.os strategy:matrix:node_version:8,10,12 os:ubuntu-latest,windows-latest,macOS-latest steps:-uses:actions/checkoutv1 -nam

39、e:Use Node.js$matrix.node_version uses:actions/setup-nodev1 with:node-version:$matrix.node_version -name:npm install,build and test run:|npm install npm run build-if-present npm test實現原理“攪局者”GitHub Actions3jobs:test:name:GitHub Action Official Demo runs-on:$matrix.os strategy:matrix:node_version:8,1

40、0,12 os:ubuntu-latest,windows-latest,macOS-latest steps:-uses:actions/checkoutv1 -name:Use Node.js$matrix.node_version uses:actions/setup-nodev1 with:node-version:$matrix.node_version -name:npm install,build and test run:|npm install npm run build-if-present npm 實現原理-name:Use Docker Hub uses:docker:

41、/alpine:3.8“攪局者”GitHub Actions3name:Setup Node.js environmentdescription:Setup a Node.js environmentauthor:GitHubinputs:node-version:description:Version to use.default:10.xruns:using:node12 main:lib/setup-node.jsruns:using:docker main:Dockerfile“攪局者”GitHub Actions3Step startusesRepoDocker Hubaction.

42、ymlnodedocker-name:Use Docker Hub uses:docker:/alpine:3.8-name:Use Docker Hub uses:actions/setup-nodev1GitHub Actions Overviewruns:using:docker main:Dockerfileruns:using:node12 main:lib/main.jsDocker ActionDocker ActionDocker ActionDocker ActionJS ActionJS ActionTalk is Talk is CheapCheap如何使用 GitHub

43、 Actions？如何使用 JavaScript 開發一個 GitHub Action？企業級項目基于PWA緩存的最佳實踐個人介紹王涵冰王涵冰 sanglewang2018年畢業于中山大學2018年加入騰訊IVWEB團隊，負責NOW交友業務負責團隊PWA方案的技術建設業務現狀01|CURRENTSOLUTIONPWA 緩存策略02|CACHESTRATEGIESSSR 方案03|SERVERRENDERSOLUTIONCSR 方案04|CLIENTRENDERSOLUTION更多場景05|OTHERFEATURES業務現狀業務現狀800 ms1500 ms業務現狀 手Q優化策略靜態資源緩存方案

44、首屏 HTML 緩存方案diff 更新800ms業務現狀-非手Q優化策略React 同構 SSRService Cache業務的使用場景復雜（手q,微信,瀏覽器,微博）針對性優化成本高1500ms業務現狀-PWA場景覆蓋并發限制更新機制儲存空間PWA緩存策略PWASW未安裝狀態PWASW已安裝狀態緩存策略oCache-first：有緩存的時候返回緩存，沒有緩存才會去請求并且把請求結果緩存oStale-while-revalidate：如果有可用的緩存版本，則使用該版本，但下次會獲取更新。oNetwork-first：現網超時后返回緩存oCache-only：只讀取緩存，沒有就失敗了oNetwo

45、rk-only：只請求線上，不讀寫緩存有緩存的時候返回緩存，沒有緩存時請求現網SWStrategies(Cache-first)SWStrategies(Stale-While-Revalidate)先走緩存，走完緩存發請求，請求的結果會用來更新緩存SWStrategies(Network-first)優先走現網，現網超時時返回緩存SWStrategies(Cache-only)只走緩存SWStrategies(Network-only)只走現網PWA業務接入情況(Mobile)基于離線包方案，緩存靜態資源PWA業務接入情況(Mobile)基于離線包方案，緩存靜態資源緩存靜態資源接入后：+80

46、msPWA業務接入情況(PC)PWA業務接入情況(PC)PWA業務接入情況(PC)PWA業務接入情況(PC)緩存靜態資源接入后：+80ms 優先返回SWCache(Chrome71前策略)PWASWCache(Cache-race)在SW中同時發起online與SWCache請求，哪個快返回哪個耗時沒有變化PWASWCache(Cache-race)PWA靜態緩存策略移動端PC端APP對BrowserCache處理方式不一致在我們的現網數據中DiskCache50-70msDiskCache1-5msMemoryCache0-1ms結論建議靜態資源上SWCache非離線剛需，靜態資源不建議上S

47、WCacheSSR方案SSRHTMLCache(Browser Cache)BrowserCache有緩存情況SSRHTMLCache(Browser Cache)BrowserCacheBrowserCache無緩存情況無法及時更新修復 BUG！BrowserCachewithBUGSSRHTMLCache(Browser Cache)SearchinCacheReturnHTMLUpdateHTMLpostMessagereturnstateSSRHTMLCache(SW Cache)SWCache(Thesecondtime)SSRHTMLCache(SW Cache)SWCachewi

48、thBUGSSR緩存方案靜態資源HTML策略使用Cache-first使用stale-while-revalidateSSR方案數據SSR緩存方案靜態資源HTML策略使用Cache-first使用stale-while-revalidate思考如何快速新增/刪除/修改需要緩存的資源？緩存了一個有BUG的html，由于緩存問題，如何快速修復迭代？還有沒有優化空間？PWA+PlatformSWCache命中率提升命中率就可以降低首屏耗時？如何提升？一級入口、二級入口？23%如何提升命中率?二級頁預緩存策略 預緩存靜態資源 預緩存 HTML 資源二次用戶命中率二次用戶未命中的原因？1.不支持SW2.

49、SW沒注冊完成3.Cache存儲空間滿了，無法進行緩存設置過期時間緩存空間滿時，先刪除緩存的圖片，再重試首次用戶如何覆蓋？資源預緩存策略 一級入口預緩存二級頁面資源CSSJS資源預緩存策略 思考頁面資源變更，如何及時更新？一級頁面關聯的二級頁面比較多？每次只能發布來進行Config修改？CSSJS 一級入口預緩存二級頁面資源 構建打通 平臺關聯 業務可關聯多個 ID 根據當前 ID，PWA+平臺下發其綁定業務 ID 相對應的資源文件PWA+預緩存策略PWA+預緩存策略ID:1ID:3HTML,JS,CSSHTML,JS,CSSHTML,JS,CSS二級頁面 SW 預注冊策略SW可以跨頁面注冊在

50、一級頁面預注冊二級頁面的SW，第一次就能命中二級頁面SWPageOnline一級頁面-頭部注冊方案一級頁面-頭部注冊方案關鍵在于 HTML 主文檔解析時間和 SW 注冊+網絡請求時間本地驗證，html主文檔解析時間約為600ms，而sw注冊的平均時間在1000ms左右SWCache命中率71%23%PWA+(SSR優化方案)二級頁面預注冊方案前置頁面，提前注冊二級頁面的SW，同時通過下發配置，預加載需要緩存的資源，如html、js、cssPWA+(SSR優化方案)一級頁面預加載方案（客戶端支持）進入APP打開空的webview，通過下發配置，預加載一級頁面必須的資源空白 webview 二級頁

51、面預注冊方案前置頁面，提前注冊二級頁面的SW，同時通過下發配置，預加載需要緩存的資源，如html、js、cssPWA+(SSR優化方案)1.5s-1.28s-1s-0.7s 一級頁面預加載方案（客戶端支持）進入APP打開空的webview，通過下發配置，預加載一級頁面必須的資源 二級頁面預注冊方案前置頁面，提前注冊二級頁面的SW，同時通過下發配置，預加載需要緩存的資源，如html、js、cssCSR方案CSRHTMLCache(SW Cache)在渲染完成后，我們將頁面的outerHTML取出，并通過postmessage方法將其傳給SWFirstTimeVisitSearchinCacheR

52、eturnHTMLCSR-(HTML Cache)SecondTimeVisit二次進入優先顯示緩存HTML更新HTML模板再次進入先顯示原始HTML模板緩存帶數據的HTML第三次訪問會白屏一下，如何解決？CSR-(HTML Cache Update)Puppeteer能做什么？如何判斷頁面是否加載完畢？CSR-(HTML Cache Update)CSR(Puppeteer-SSR)SearchinCacheReturnHTMLPuppeteer更多場景配置平臺配置灰度 利用cookie判斷 可定制灰度判斷邏輯PWA 開關緊急情況的fallback整體架構使用 React 構建 Flutte

53、r 應用探索新一代渲染技探索新一代渲染技術術 Kraken天貓未來店天貓未來店 GCanvas C+EngineGPUOpenGL ES/VulkanKreken 原型技術原理GCanvas JS APIKraken 原型版本優劣研研發發效率低效率低適用適用場場景有限景有限簡單簡單直接直接嵌入式主板GPUSkiaOpenGL ES/VulkanLayout XMLLayer TreeRenderObject TreeWidget TreeJava/KotlinReact.jsRax.js/Vue.jsVDOMDartNative View Tree(OEM)Layout TreeDOM Tre

54、eJSVDOMLayer TreeLayer Tree渲染技術探索DartJavaScriptJavaScriptJavaScriptWORE WORE LORE (Learn One Run Everywhere)WORE (Write Once Run Everywhere)Good Performance Good Performance Good Performance Its OK JIT(Develop)/AOT(Deploy)JITJITJITAmazing Ecosystem Its OK Good Ecosystem Good Ecosystem Built-in Featu

55、res Built-in Features Built-in Features Built-in Features (14)(10)(9)(13)為什么 FlutterWebFlutterFlutter 是是 Web 之外的另一個之外的另一個真跨端渲染技真跨端渲染技術術 通過 platform channels 調用平臺能力支持 Hot Reload不支持 Flex Layout 布局比肩原生的性能調試工具完善脫離前端 JS 生態不支持動態下發 Bundle不支持類 JSX，可讀性差前端視角里的 Flutter使用 Flutter 的剛性訴求具有具有動態動態性性可可連連接前端生接前端生態態Da

56、rt 生產模式開開發發 Develop部署部署 DeployJITDart VMDart AOT RuntimeAOTAny application that can be written in JavaScript,will eventually be written in JavaScript.Jeff AtwoodCo-founder of StackOverflow“Flutter 增增長長迅速，但迅速，但 Dart 關注平平關注平平Kraken關于 Flutter for Web并不是完全并不是完全雞雞肋，肋，適合其只適合非適合其只適合非 C 端端業務場業務場景景中國中國可能可能是全

57、球最關注是全球最關注 Flutter 的國家的國家我們的目標：能直接運行嗎？DemoReduxMobxRxjsLodashUnderscoreMomentgraphqlImmutablejsRamdaValidator.jsNpmYarnbabelwebpackRollupeslintjestmocha YesLessSassStylusTypeScript背后原理Kraken Dart FrameworkKraken BridgeReactReact FrontendLinuxAndroidiOSFlutter Engine(C+)CompositionFrame SchedulingKra

58、kenJavaScriptRuntimeKraken Object ModelBridge BindingText LayoutKraken ProtocolCommunicationJSCallDartDartCallJSKranken API(C+)V8JS EngineJS Engine AbstractFlutter BackendKraken Bridge ProtocolPlatformsKraken Bridge ProtocolJSCDocument Object ModelKraken JavaScript RuntimeRoot ElementElementDocument

59、Element“Hello”Text Node“World”Text NodeElementElement“!”Text NodeDocument Object Modelconst body=document.body;const div=document.createElement(div);body.appendChild(div);const text=document.createTextNode(hello);div.appendChild(text);Kraken Bridge ProtocolcreateElement(div)body.appendChild(div)inse

60、rtAdjacentNode,-1,beforeend,id:0,type:DIV id:0,type:DIVKraken Bridge_kraken_js_to_dart_(“”)JSON.stringify“”jsonDecodeinsertAdjacentNode,-1,beforeend,id:0,type:DIV Flutter BackendKraken Dart FrameworkFlutterKraken BridgeRenderingAnimationPaintingFoundationGesturesFlutter EngineKraken Web ElementKrake

61、n Bridge ProtocolKraken Dart FrameworkpdivaimgspanWeb ElementsKraken JavaScript RuntimeKraken Object ModelTimer:setTimeout/clearTimeoutInterval:setInterval/clearIntervalScreen:height,width,Location:href,host,search,Window:open,close,fetchWebSocketChrome Developer ToolsKraken 持續演進Kraken BridgeReact F

62、rontendFlutter BackendKrakenJavaScriptRuntimeKraken Object ModelBridge BindingKraken ProtocolCommunicationJSCallDartDartCallJSKranken API(C+)V8JS EngineJS Engine AbstractBackendKraken Bridge ProtocolKraken Bridge ProtocolJSCDocument Object ModelVue FrontendAngular FrontendFrontend不僅僅是 ReactKraken wi

63、th Cloud為什么上云？Google StadiaPlayStation Now云游戲Microsoft xCloud云化體驗免下免下載載即開即玩即開即玩無需無需購買購買高性能高性能設備設備云云計計算共享算共享所有能云化的所有能云化的應應用最用最終終都將云化都將云化“EventsWebRTC/QUICDecoding（H.265）WebSocket Render EngineEncoding(H.265)Streaming PlayerStreaming CapturerLow latency capture with zero-copy GPU pipeline to encoderHa

64、rdware-specific encoding libraries implemented directly on LinuxHardware decoding on deviceZero-copy OpenGL rendering pipeline from decoderLow level frame timing and synchronization optimizationsFrame SyncingKraken 云渲染AgentCloud云云+端一體化是渲染技端一體化是渲染技術術的新的新趨勢趨勢“基于CLS的B端提效實踐關于我大魔微信游戲2010 QQ空間 廣點通2015 創業三

65、年2018微信游戲2008廣告投放平臺大數據營銷平臺游戲運營平臺一句話概括VS如何快速支撐業務，不做流水線工人？業務訴求&個人訴求：探索和實踐123456B端系統開發的特點通用組件語言規范解放前端解放產品解放后臺展望B端系統開發的特點：破局1外因：行業的發展MVVM數據 表現設計模式：設計語言視覺規范系統化協作上游：前端工程化大型項目協同研發模式：內因：B端前端的特點聚焦體系設計，專注邏輯編碼B端系統的目標提升效率，降低成本，成為基礎要求提效的一般方式不同組件庫B端小程序C端不同應用場景不同基礎框架hybrid有什么問題？業務需求并不需要關注組件實現，真實場景可能是：PM：這里有一個搜索框，點

66、擊查詢按鈕后，出來結果列表。FE：需要翻頁嗎？PM：要（而且要求快?。㏄M：很簡單吧，下午給我B端常見需求需求場景：實現形式：信息錄入信息呈現信息可視化表單列表圖表形態相對比較固化頁面代碼的一般構成界面數據邏輯以vuejs為例組件化聚焦驅動組件的數據結構弱化表現通用組件語言規范：CLS2Inspired byCommon Language SpecificationCLS 定義Common Components Language Specification通用組件語言規范將組件抽象為統一模型的一種標準的描述方式，以JSON的形式呈現。設計原則數據驅動UI 是數據基于組件描述頁面以數據結構描述組

67、件語義化符合一般人對功能的認知合適的場景，合適的支持開發者友好低門檻，學習一個組件語言，就學會了整個組件庫的使用易理解，易記憶，易使用組件封裝表現，邏輯關注數據快速上手，快速開發指導組件開發者組件統一模型抽象組件模型pageitemsComponentinputComponentselectComponentsubmititemsComponentformAttributeslabel:User NameeventschangeEventName:userNameChangedvaliditymax:32CLS 主要屬性定義https:/weadmin.github.io/WeComponen

68、tsDocs/#/doc/principle/clsCLS 主要屬性定義https:/weadmin.github.io/WeComponentsDocs/#/doc/principle/clsCLS主要方法定義https:/weadmin.github.io/WeComponentsDocs/#/doc/principle/cls定位SwiftUIFlutterCLS（通用組件語言規范）編程范式聲明式聲明式聲明式語言SwiftDartJSON產物框架&組件庫框架&組件庫只是規范平臺Apple APP所有APP/Web跨端，依賴實現我們采用Vue.js實現了一套基于CLS的組件庫https:/

69、 JSON 就做好了頁面3例子 表單例子 列表例子 圖表聲明式編程 像產品提需求一樣寫代碼回到這個例子。PM：這里有一個搜索框，點擊查詢按鈕后，出來結果列表。FE：需要翻頁嗎？PM：要三分鐘后FE：做完了業務需求并不需要關注組件實現數據驅動 數據結構一致下的表現變化組件排版形式功能component屬性UIcomponentlayoutreadonly最佳實踐1 快速組件切換最佳實踐2 組合的變換查詢框傳統表單類excel功能變化形式變化component:tableattribtues.layout:rowcomponent:formattribtues.layout:row最佳實踐3 表格

70、和圖表最佳實踐3 彌補泛類型的不足聲明式解決前后臺參數的嚴格類型問題劃重點基于 CLS 的運作流程寫完JSON，就做好了頁面復雜度高沉淀性好復雜度低重復性高業務代碼解析框架既然只要寫JSON金字塔梯隊解放產品：可視化頁面制作4Viz(CLS-based-Components)=Pages可視化寫JSON也是很機械式的工作實現流程可視化頁面制作工具通用制作工具，可加載基于CLS的組件庫基于組件，不基于元素可按模板生成代碼組件區舞臺區屬性區xxx產品&交互前端開發傳統流程可視化制作流程產品開發設計制定規范實現組件 產品原型稿的演進路徑：不同產品經理風格各異每個頁面都靠拼基礎形狀組件做成元件產品崗對

71、組件有基本認知產品崗工作量無增加上線后的效果和當前一致產品+開發的協作成果組件要豐富規范要審核優化流程，非開發也能做頁面解放后臺：自動生成5自動化，反射接口協議生成頁面.protobuf Message ResponseMessage Request cgi-讀cgi 寫 列表表單對接數據源：從pb協議反射出頁面Message=containerenum=selectint/string=inputBoolean=radioRepeated message=fieldsetRepeated int/string=input with multiple attribute自動生成面向協議編程：以

72、結構化協議為核心前提：結構化的接口協議，如protobuf結構化的注釋解析后臺cgi協議，程序化理解請求和參數可視化頁面制作，直接綁定組件和cgi（即數據源）提效總結CLSUIprotobufAPIViz(components)=PagesPage可視化結構化https:/基于WASM的文件上傳加速實踐內容大綱上傳應用介紹WASM核心原理WASM加速實踐上傳應用介紹上傳是web應用的基礎能力上傳應用介紹簡單復雜上傳應用介紹分片Blob多通道并行完整性校驗秒傳、斷點續傳大文件、大批量異常處理Form表單XHR Upload簡單復雜微云上傳前端架構UI層邏輯層計算層SelectFileDndFil

73、eManagerPanelTaskListFileTaskDirTask網絡層BelongTaskDestPanelFileSystemUploadControlTaskQueueToolsSpeedNetworkFileTaskDirTaskBelongTaskFileMetaWorker EncryptAjax/Form Upload上傳應用介紹關鍵：計算文件的數字簽名（SHA1）WASM是什么C/C+RustGOTypeScriptIRWASMBrowserOut of BrowserInto other Languages高效快速安全標準可移值WASM MVP標準Web API Web

74、Assembly.Module、WebApile、WebAssembly.Instantiate 模塊結構 types、funcs、mems、tables、data、imports、exports二進制格式、文本格式 LEB128編碼、S文本表達式指令、語法規則 local.get、local.set、i32.add、i32.load、i32.store，基于堆棧機執行模塊檢查、執行 檢查通過、優化編譯、轉機器碼執行https:/webassembly.github.io/spec/core/index.html一個簡單例子 C源碼編譯：emcc O3 add.c-o add.wasm#inc

75、ludeintEMSCRIPTEN_KEEPALIVEadd(inta,intb)returna+b;一個簡單例子-watwasm-objdump add.wasm-xwasm2wat add.wasm一個簡單例子 二進制一個簡單例子 JS api調用WASM為什么快JS執行鏈路去優化WASM為什么快wasm執行鏈路WASM與JS交互importObject導入到wasmexports導出供js使用WASM與JS數據傳遞目前只支持number傳遞WASM與JS數據傳遞借助共享線性內存傳遞-ArrayBuffer系統內存wasm內存012322 23 2401234567tweb01110100

76、011101110110010101100010charCodeWASM與JS數據傳遞js膠水代碼實現使用Emscripten構建應用Html5.hFile systemPthreadLiner MemoryWebIDL使用Emscripten WebIDL bindingtweb.cctweb.idltweb.htmlWASM Interface Types(提案)Wasm與宿主環境或其它模塊交互，不同類型之間轉換WASM Interface Types(提案)定義更多指令，引摯內完成類型轉換WASM Interface Types(提案)Interface adapterWASM Inte

77、rface Types(提案)期待更優雅的調用WASM加速實踐UI層邏輯層計算層SelectFileDndFileManagerPanelTaskListFileTaskDirTask網絡層BelongTaskDestPanelFileSystemUploadControlTaskQueueToolsSpeedNetworkFileTaskDirTaskBelongTaskFileMetaWorker EncryptAjax/Form UploadWASM加速實踐UI層邏輯層計算層SelectFileDndFileManagerPanelTaskListFileTaskDirTask網絡層Be

78、longTaskDestPanelFileSystemUploadControlTaskQueueToolsSpeedNetworkFileTaskDirTaskBelongTaskFileMetaAxios/Form UploadWorker EncryptWASM用武之地高性能計算Sha庫復用WASM加速實踐計算模型主線程計算workerTaskQueueComplieWasmFileTask創建workerProcess銷毀workerStart/PauseInitSliceFileWASMArrayBufferTypeArrayInit(file,wam)UpdateProcessSu

79、ccess/ErrorWASM加速實踐Int8Array/Uint8ArrayInt16Array/Uint16ArrayInt32Array/Uint32ArrayInt64Array/Uint64Array認識TypeArrayArrayBufferUint8ArraycharWASM加速實踐大文件基于分片計算wasmfile.readAsArrayBuffer()new Uint8Array(buffer)Liner MenoryEmscripten runtimeJSlet ptr=stackAlloc()writeArrayToMemory(array,ptr)sha1_update

80、(ptr,array.length)void sha1_update(char*data,int len)WASM加速實踐MacBookProi5測試機：WASM加速實踐Emscripten runtime 中數據轉換耗時分析1B1KB10MB100MBarrayToC0.08ms0.09ms7ms90msstringToC0.18ms0.33ms85ms830msWASM加速實踐Wasm純計算速度能接近native 數據傳遞占總耗時的 1/3數據源最好以ArrayBuffer獲取String需要轉換步驟多，性能不好WASM加速實踐主進程加載xxx.worker.js加載xxx.wasm主進程

81、httphttp本地Worker初始化：Wasm初始化：優化初始化路徑 減少網絡加載、緩存wasm moduleWASM加速實踐通用的流式編譯：compileStreaming、instantiateStreamingWASM加速實踐降級方案WASMRusha.jsjsSHA.js使用微云的瀏覽器分布WASM加速實踐 成果WASM加速實踐-總結找出性能瓶頸運用wasm關注整體優化擁抱wasm，做好降級體驗大型大型Web項項目可用性提升目可用性提升優優化化 大型Web項目可用性提升優化腳本錯誤監控、優化、持續跟進前端日志系統搭建、優化與打通騰訊文檔“白屏”監控體系與優化大綱監控腳本錯誤“三步曲”

82、如何打造可多人協作的在線文檔游戲競技在線協同五子棋對戰藝術創意馬賽克作畫培養感情協同創作數據層架構復架構復雜雜，有挑，有挑戰戰渲染層網絡層離線編輯函數歷史記錄權限分享導出通知算法實時翻譯項目架構頁面復雜度高，遇到問題多小小的錯誤嚴重的影響腳本錯誤監控、優化、持續跟進Part 1window.onerrortrycatch監控腳本錯誤跨域腳本錯誤，無具體錯誤信息（Scripterror.）http:/-script標簽添加crossorigin屬性-響應頭增加 Access-Control-Allow-Origin 及 Vary跨源資源共享機制(CORS)，展示具體錯誤信息JSErrorType

83、Errortim/docs/static/js/sheet-pc-canvasinwidtherrorCannotreadpropertywofundefinedatline1:8902結合SourceMap文件，還原出錯代碼原位置代碼壓縮后，定錯出錯代碼困難監控腳本錯誤使用CORS，避免Script error結合Sourcemap還原出錯源碼腳本錯誤監控“三連擊”，找到出錯源碼這就結束了嗎？普通場景，最新代碼版本覆蓋率約99.6%灰度場景下，代碼版本分布差異大現網代碼版本號分布情況老代碼的錯誤？灰度代碼的錯誤？哪個版本的代碼出現的問題？、根據錯誤信息“版本號”，找到出錯時代碼上報SDK配置

84、版本號根據版本號打入代碼Tag發布出錯信息（含版本號）異常上報通過“版本號”進行關聯找到“出錯時代碼”12根據收集到的錯誤信息checkout到對應Tag，找到出錯時代碼代碼版本號項目中模塊多人工分配錯誤處理人，效率低錯誤眾多，誰來負責解決？錯誤分散通過歷史提交記錄，找出最近提交的開發者作為問題的處理人獲取錯誤信息最近的提交人找到出錯時代碼代碼版本號、文件路徑、行列數gitblamefilenamexgitcheckoutPROJECT_VERSION堆棧各個提交人gitblamefilepath-lx快速找出負責解決錯誤的處理人確保問題按計劃得到解決問題的修復計劃&跟蹤管理？生成bug單錯誤

85、信息錯誤處理人各堆棧提交人+使用Tap接口通過接口，自動生成Bug單推送通過機器人推送告警消息發布問題修復發布后，自動推送修復結果獲取本次發布迭代中修復的問題分析問題修復情況自動推送修復結果分析推送集高效、智能地分配問題、持續跟進、自動化監控于一體讓開發者專注于解決問題腳本錯誤持續跟進平臺開發解決問題自動驗證2134找到出錯代碼找到錯誤提交人生成Bug單告警推送發布優化后，腳本錯誤量下降1.開發過程中2.發布前自動化測試階段JS錯誤時自動彈窗JS錯誤時自動提BUG單監控前移，減少新增錯誤到現網監控異常，智能告警，自動提單新增錯誤及時解決，錯誤量得到持續控制異常及時發現，告警推送集高效、智能地分

86、配問題、持續跟進、自動化監控于一體讓開發者專注于解決問題腳本錯誤持續跟進平臺開發解決問題自動驗證2134找到出錯代碼找到錯誤提交人生成Bug單告警推送6自動化時出錯提單開發時錯誤彈窗發布腳本錯誤量降低、問題反饋也隨著減少，但還是存在！雖然沒有腳本錯誤沒有復現路徑功能多交互復雜1234567891單/多選輸入2撤銷重做3.4數據協同格式刷功能多、交互復雜，問題出處難以定位。騰訊文檔打造前端日志平臺，記錄問題產生的來龍去脈前端日志系統搭建、優化與打通Part 2客戶端存儲cookie容量小，浪費帶寬localStorage容量小，兼容性好websql廢棄的標準indexedDB容量大客戶端提供接口

87、給Web調用，將日志寫入客戶端，由客戶端統一管理日志日志存儲用戶特殊操作來觸發上傳特殊操作延遲加載一個配置白名單的jsoncdn文件文件加載，定制差頁面打開時請求配置cgi請求，重開頁面Socket服務Web設置撈取實時下發通過socket進行實時日志撈取管理平臺撈取日志上報主線程上報，影響業務使用1.worker 取 indexeddb2.上報日志上報日志Worker 線程上報，與主線程相互獨立，互不影響日志展示這就結束了嗎？腳本報錯唯一id:eventId日志唯一id:sessionId相互關聯日志會話sessionId與腳本錯誤eventId相互關聯日志與腳本錯誤平臺（如Sentry）結

88、合、日志與腳本錯誤平臺（如Sentry）結合，加快分析JS錯誤前端 為每個ajax請求頭帶上唯一 seq_id，日志記錄該 id后端 記錄請求頭中的 seq_id 及對應的請求與返回數據ajax請求ajax攔截器nginx寫入日志后端鏈路日志前后端日志關聯，打通全鏈路日志seq_id結合用戶反饋信息，加快問題分析反饋id日志id日志與反饋平臺(吐個槽)結合萬事具備，只欠“反饋”根據日志，分析解決問題問題：插入一行后，表格部分展示空白根據日志，分析解決問題日志流水結果根據日志流水，沉淀測試用例測試用例沉淀保存遇到問題的測試用例，讓問題到此為止+日志轉換為測試用例，避免問題再現主動出擊，提前解決騰

89、訊文檔“白屏”監控體系與優化Part 3看不到頁面內容，嚴重影響用戶體驗加載解析執行“白屏”監控體系與優化展示Loading完全空白等待資源加載，空白時間長HTML加載后立即展示Loading，減少全空白時間HTML加載CSS加載JS加載HTML加載拆分、內聯首屏CSSHTML內實現Loading態減少焦慮，優化全空白時間加載解析執行首屏資源中加載失敗導致內容打不開監控文件的加載情況：優化資源加載:監控與重試失敗文件進行重加載：JS文件加載順序發生改變，執行順序異常加載解析執行管理模塊依賴控制執行時機依賴的文件都加載完成，再統一執行使用webpack構建生成管理執行順序代碼結合wait-ext

90、ernal-webpack-plugin等待external文件加載完成優化資源加載:管理執行順序加載解析執行重試后依然失??？加載重試失敗提醒彈框，避免無效等待加載解析執行1.通過構建添加對應的integrity屬性防止資源被篡改后注入廣告等問題2.篡改資源，瀏覽器校驗失敗，加載失敗3.更換域名，加載重試保證加載資源完整性，使用SRI（SubresourceIntegrity）加載解析執行SRI加載資源的完整性CSPWhitelist外鏈腳本安全CSPNonce內聯腳本安全限制對不可信域名的資源加載和解析(Whitelist)限制異常的內聯腳本執行(Nonce)加載正確資源，使用CSP（Con

91、tent-Security-Policy）加載解析執行JS解析出錯，代碼無法執行導致打不開JS文件加載保存“失敗記錄”加載失敗1.是否“已達底部”？2.是否無“失敗記錄”？加載成功是（已全部加載完成）是否存在執行后的變量？否頁面底部加載重試標志“已達底部”剔除“失敗記錄”解析成功解析失敗是(正常執行)JS解析不支持的瀏覽器，重定向到提醒頁面es6語法低端瀏覽器解析失敗加載解析執行JS執行出錯，導致內容打不開出現JSERROR，后續邏輯不再執行不存在JSERROR，但執行邏輯異常Checker.start()Checker.end()執行代碼，邊執行邊記錄日志宏任務Checker.check()

92、宏任務出錯上報1.未正常執行end()2.執行check()進行檢測出異常情況1234告警setTimeout(fn,0)開啟監控記錄執行日志標記結束點檢查是否正常執行異常上報JS執行（出錯）加載解析執行Checker.start()Checker.end()執行代碼，邊執行邊記錄日志宏任務Checker.check()Worker線程宏任務Checker.setTimeout開啟倒開啟倒計時計時，監監控控時間時間內是否完成內是否完成Checker.clearTimeout正常正常執執行，關行，關閉計時閉計時器器出錯上報1.未正常執行end()2.執行check()進行檢測出異常情況執行久上報

93、時間段內未完成代碼執行112324主線程setTimeout(fn,0)告警告警因為JS“執行久”被誤以為內容打不開了JS執行（久）加載解析執行主線程卡住了，worker的計時器不受影響；讀取db、上報數據也同樣不影響主線程執行。主動上報日志，收集白屏現場的日志監監控異?？禺惓Ｖ髦鲃觿由仙蠄髨笕罩救罩救罩痉治鋈罩痉治鰞瀮灮鉀Q化解決1245告警告警3結合日志分析定位問題主動監控與優化鏈路加載解析執行分析各個執行點的耗時情況“白屏”監控體系與優化加載解析執行提升 Web 可用性包含但不限于腳本錯誤、白屏、卡頓等如何如何讓讓機器機器讀讀懂懂設計設計設計稿轉界面代碼的方案常規方法對方案的解決計算機視

94、覺技術（OpenCV）的使用從設計稿生成H5代碼說起AI技術的嘗試從設計稿生成H5代碼說起UI還原是做什么的？業界開始嘗試自動生成界面代碼從設計稿生成H5代碼說起DSL的生成需要理解設計數據從設計稿生成H5代碼說起DSL目標語言數據處理/布局計算/模型處理語義分析獲取設計稿數據/數據抽象Html&Css/iOS/AndroidHippy/Weex/小程序設計稿的原始數據從設計稿生成H5代碼說起Sketch里一張圖片的數據展示設計稿轉界面代碼的方案常規方法對方案的解決計算機視覺技術（OpenCV）的使用從設計稿生成H5代碼說起AI技術的嘗試業界情況設計稿轉界面代碼的方案名稱所屬組織開源時間技術特

95、點Launchpad暫沒實現絕對布局（暫沒實現流式布局和循環結構代碼生成及多端代碼支持）pix2code暫沒AI識別視覺稿組件轉換成對應（非組件及其它設計樣式不能轉代碼，通用性現時不算高）ImgCook暫沒依賴插件獲取數據，實現流式布局，循環結構視覺編譯2019.06（公司內）不依賴插件，實現流式布局、循環結構，已開始支持Ark輸出（內部界面格式）基于特定設計識別及代碼映射設計稿轉界面代碼的方案任務系列模板H5:iOS：.Android:.設計稿識別模塊模板系統簡單的基于MD5等算法實現模板替換設計稿轉界面代碼的方案任務系列模板H5:iOS：.Android:.模板系統UI組件庫基于AI識別及

96、代碼轉換（pix2code）設計稿轉界面代碼的方案任務通過AI識別設計稿構建DSL（圖片來自pix2code）好代碼的標準設計稿轉界面代碼的方案手寫風格流式布局循環結構方案的核心思想設計稿轉界面代碼的方案假設有這樣一個模型。它有一個是否能與自身設計形態相匹配的邏輯，一個對應這個設計形態足夠好的人手寫的HTML模板。然后拿設計稿的節點進行匹配，將匹配到的模型的模板映射到網頁，是否就意味著生成的代碼無限接近于“人手寫的代碼”是否匹配每個模型都有一個節點與自己是否匹配邏輯塊每個模型都有設定得足夠好的代碼片段帶設計形態的模型ImageTextText4奧爾托2345人在玩321方案的邏輯流程設計稿轉界

97、面代碼的方案（備注：此處忽略了將匹配完的模型進行結構組合，再Render到網頁的過程）ImageTextText是否匹配匹配次數：設計稿轉界面代碼的方案常規方法對方案的解決計算機視覺技術（OpenCV）的使用從設計稿生成H5代碼說起AI技術的嘗試常規方法對方案的解決H5中設計形態的構成常規方法對方案的解決通用視覺設計模型庫常規方法對方案的解決問題一：組合匹配算法計算復雜度高以100個節點設計稿為例，計算上一頁模型（Image+Text+Text）的節點組合數（備注：算法的優化旨在展示把計算量下降到計算機能接受的范圍，所以這里就不列嚴格的數學推導，后面亦如是）全組合計算公式1009998/616

98、w一個模型的最大匹配次數問題一：組合匹配算法計算復雜度高通過分區域分次選擇降低計算量在實際設計或以人為定義來看，極少將一個組件定義為超高高度32x31x30 x10/65w計算量下降了一個數量級，但還沒達到要求第1輪第2輪7600px,320+節點設計稿每次以750px作為節點選擇區域，區域大約有32個節點問題一：組合匹配算法計算復雜度高通過節點分類降低計算量把設計稿轉出的節點分為四類：文本(Text)、圖標(Icon)、圖片(Image)、圖形(Shape)56x1x8x1x10/6800符合計算要求計算公式因為類別的概念而發生改變TextIconImageShape8888問題一：組合匹配

99、算法計算復雜度高優化范圍移動造成的匹配錯誤組件落在邊界1.邊界上模型不匹配，待下輪2.每次下移改為1/2距離匹配了的節點會移除，總節點會減少，計算量也會下降對計算總量不會產生太大影響常規方法對方案的解決問題二：模型數量及相似性判斷由于：導致：模型A模型B(Image+Icon+Text+Text)(Image+Text+Text)1.模型數量越來越多2.影響循環的判定問題二：模型數量及相似性判斷元素模型概念(element)定義：元素屬性表現的抽象Text屬性元素模型Icon屬性元素模型Image屬性元素模型問題二：模型數量及相似性判斷組件模型概念(widget)定義：元素模型在空間關系上的抽

100、象ComposeDirectionDistancePositionBaselineSizeIconImageShapeTextABBABCAABA（組件由什么元素模型組成）（A位于B的左邊）（A與B之間的距離）（A位于B內并居中）（A、B、C位于水平基線）（A的寬高關系）問題二：模型數量及相似性判斷改變匹配流程匹配流程改為：先進行元素模型匹配，再進行組件模型匹配ImageTextTextImageTextTextImageTextText同一組件模型先進行元素模型的匹配常規方法對方案的解決問題三：數量可變元素設計的解決在一些設計中，某些設計元素是可變的Text元素模型越來越多故事|通關故事故事

101、|通關|冒險剩+558232+元（由三個節點組成）問題三：數量可變元素設計的解決EM-X可變元素模型從傳進的范圍節點中，優先匹配EMX模型（emx-m1:匹配連續文本）（emx-m2:文本、icon間隔）TTTTITludo派對村故事通關|44567人在玩WALLY冒險|治愈剩558232元剩558232元冒險|治愈故事通關常規方法對方案的解決模型的識別結果設計稿轉界面代碼的方案常規方法對方案的解決計算機視覺技術（OpenCV）的使用從設計稿生成H5代碼說起AI技術的嘗試計算機視覺技術（OpenCV）的使用OpenCV對圖形信息的還原通過OpenCV獲取圖元信息，提高生成代碼的準確性1.直接使

102、用位圖，導致缺少圖元信息2.位圖錯誤連在一起計算機視覺技術（OpenCV）的使用應用一：形狀的檢測形狀檢測邊緣檢測應用一：形狀的檢測邊緣檢測：Canny算子的步驟轉灰度圖高斯濾波器計算圖像梯度非極大值抑制雙閾值檢測和鏈接0257585007580809007580805007011800001000142016200323901520Sobel算子23546457675643234311應用一：形狀的檢測邊緣檢測：Canny邊緣檢測應用一：形狀的檢測直線檢測：霍夫變換（Houghtransform）直線P:r=xcos+ysinxyOrPxyO(r,)A(r,)(r,)r0通過點A的所有直線構

103、建的r與的關系應用一：形狀的檢測直線檢測：霍夫變換（Houghtransform）找出經過A,B,C的直線xy0ABCr0得票最高的(r,)為經過三點的直線(r,)形狀的檢測存在兩條水平線段存在兩條垂直線段上下線段距離形狀高左右線段距離形狀寬circles=cv.HoughCircles()（霍夫圓環檢測）應用一：形狀的檢測計算機視覺技術（OpenCV）的使用應用二：樣式的計算如何識別和計算圓角設計的樣式border-radius=?數據集中擬合圓算法誤差大面積法推算圓角區域應用二：樣式的計算SRS+(*R*1/4)=R+=R圓角的驗證應用二：樣式的計算霍夫圓環檢測計算機視覺技術（OpenCV

104、）的使用應用三：設計形態的識別通過識別設定形態相似區域，提高循環結構判斷的準確性（設計形態相似）應用三：設計形態的識別圖像識別的一般過程特征提取特征相似度計算選擇合適的特征提取方法應用三：設計形態的識別直方圖感知哈希Harris角點檢測選擇合適的特征提取方法應用三：設計形態的識別SIFT算法FAST角點檢測ORB算法圖像也是波的疊加應用三：設計形態的識別感知哈希算法(pHash)應用三：設計形態的識別二維離散余弦變換（DCT）可用于區分圖像的低頻和高頻部分F=AfAT特征值提取應用三：設計形態的識別對低頻區域計算Hash值即為圖像的特征值8x8cos(/2N)cos(3/2N)cos(2N-1

105、)/2N)cos(2/2N)cos(6/2N)cos(2(2N-1)/2N)cos(N-1)/2N)cos(N-1)3/2N)cos(N-1)(2N-1)/2N)111F=AfAT3232通過低頻數據來對比相似性應用三：設計形態的識別把細節抹平，只需比較結構（輪廓）的相似性特征相似性計算應用三：設計形態的識別漢明距離（Hammingdistance）計算哈希值的相似性1001101100000000101001010000000000111000000000000100001000000000100000110000000010000101000000000011100000000000010

106、00010000000003設計稿轉界面代碼的方案常規方法對方案的解決計算機視覺技術（OpenCV）的使用從設計稿生成H5代碼說起AI技術的嘗試AI技術的嘗試AI技術補全算法缺陷常規算法存在一些無法避免的缺陷合圖維度是？AI技術的嘗試一些輔助方向合圖指導布局參考語義化命名GroupGroupImageDescBannerTabAI技術的嘗試目標識別網絡選型結構優點缺點YOLO單一結構1.模型整體結構簡單2.檢測速度快3.背景誤檢率稍低4.通用性強1.識別物體位置精準性稍差2.召回率較低FasterRCNN復合結構1.識別物體位置準確性較高1.模型結構會比較復雜2.檢測速度會比較慢3.背景誤檢率

107、較高AI技術的嘗試FasterRCNN網絡結構（基于VGG16的FasterRCNN網絡結構，來自網上）RCNNFast-RCNNFaster-RCNNAI技術的嘗試FasterRCNN的步驟FeatureMapsstep1：一組基礎的conv+relu+pooling層提取圖像的featuremapsConv層：kernel_size=3,padding=1,stride=1Pooling層：kernel_size=2,padding=1,stride=1step2：RPN網絡用于生成regionproposalsAI技術的嘗試FasterRCNN的步驟step3：綜合featuremaps

108、和proposals，提取proposalfeaturemapsstep4：利用proposalfeaturemaps計算類別，同時再次boundingbox最終位置X1X2X3Y1Y2AI技術的嘗試訓練實踐：Res101代替Vgg16深層神經網絡出現的模型退化問題（數據對比圖來源自網上）AI技術的嘗試訓練實踐：Res101代替Vgg16Vgg16結構Res101原理模擬AI技術的嘗試訓練實踐：Res101代替Vgg16Res101Vgg16單輪耗時3S1.5S訓練次數300300內存開銷14G8G識別率63%38%AI技術的嘗試訓練實踐：平衡訓練數據平衡標簽數據，使標簽數據趨近于平衡AI技術

109、的嘗試訓練實踐：提升識別率AI技術的嘗試訓練實踐：提升識別率AI技術的嘗試訓練實踐：boundingbox優化AI技術的嘗試訓練實踐：數據標注AI技術的嘗試訓練實踐：識別結果一技之長獨立做事擁有事業一個程序員的成長之路曾為獨立做事做的那些準備高效的前端集成解決方案帶過百人規模團隊的管理經驗處理百萬并發在線的架構設計真正的全棧，從開發到運維，從前端到后端理想很美好，現實很骨干成本成本收益收益找到行業缺口，用最低的成本和最快速的速度驗證市場充值消費數據庫設計編寫Model層封裝Service編寫API定義Router研發每款產品都需要經歷的流程訪問權限注冊/登陸充值/消費前端聯調上線運營前端UIA

110、PI核心服務權限登陸充值注冊消費內容數據庫設計編寫Model層封裝Service編寫API定義Router研發每款產品都需要經歷的流程訪問權限注冊/登陸充值/消費前端聯調上線運營WebApp小程序桌面軟件 這這都都9102年了，年了，難難道每次都要從道每次都要從0開始？開始？前端UIAPI核心服務權限登陸充值Headless CMS注冊消費內容數據庫設計編寫Model層封裝Service編寫API定義Router研發每款產品都需要經歷的流程訪問權限注冊/登陸充值/消費前端聯調上線運營WebApp小程序桌面軟件 這這都都9102年了，年了，還還在研究在研究CMS？我需要什么一套數據到API的自動

111、生成系統為產品運營人員提供數據管理后臺自帶權限管理，適應大部分業務場景自帶用戶體系，靈活的注冊、登陸方式面向多終端，快速接入，減少開發方便擴展，沒有太多約束Cody ArsenaultThe“head”in“headless CMS”refers to the frontend.A headless content management system consists primarily of an API as well as the backend technology required to store and deliver content.The headless approach

112、allows developers to provide content as a service,abbreviated as CaaS,which simply means that content storage and delivery are handled by separate software.Headless CMSAPI First CMShttps:/strapi.io/“是時候表演真正的技術了?！?分鐘上手第一步：安裝 yarn create strapi-app my-project-quickstart#or use npx npx create-strapi-ap

113、p my-project-quickstart#start cd my-project yarn developDefault database client:sqliteFilename:.tmp/data.db數據管理數據類型定制目錄結構業務業務相關代相關代碼碼配置目配置目錄錄擴擴展目展目錄錄靜靜態資態資源目源目錄錄DEMOTodo List生成的生成的API代代碼碼RESTFul APIHTTP請請求求路徑路徑示例示例說說明明GET/content-type/todos獲取todo數據的列表GET/content-type/count/todos/count獲取todo數據的數量GET/

114、content-type/:id/todos/1獲取id為1的todo數據POST/content-type/todos添加一個todo數據DELETE/content-type/:id/todos/2刪除id為2的todo數據PUT/content-type/:id/todos/3更新id為3的todo數據RESTFul API 參數 FilterGET/todos?name=helloGET/todos?name_eq=helloGET/students?score_gte=60GET/todos?id_in=3&id_in=6&id_in=8GET/restaurants?name_co

115、ntains=pizza&name_contains=giovanni相等匹配（默認）相等匹配大于等于id in(3,6,8)name 包含 pizza 或者 name 包含 giovanniRESTFul API 參數 Sort、Limit、Start按id正序排序（默認）GET/todos?_sort=id:ASCGET/todos?_sort=id:DESCGET/users?_sort=email:asc,dateField:descGET/users?_sort=email:DESC,username:ASC按id倒序排序組合排序組合排序（大小寫不敏感）GET/todos?_star

116、t=10&_limit=10分頁StringNumberDatePasswordMediaEnumerationGroupTextBooleanEmailJSONRelationRich Text(Markdown)數據類型用戶、分組與權限用戶注冊用戶登陸用戶請求（使用JWT）案例分享：微信公眾號關注登陸注冊引用引用user的內置的內置service獲獲取指定用取指定用戶戶分分組組準準備備user對對象數據象數據寫入新寫入新創創建的建的user對對象數據象數據案例分享：微信公眾號關注登陸掃碼引入引入jwt相關相關serviceJWT存存儲儲的數據的數據安全策略Strapi內置的安全策略CSPP

117、3PHSTSX-FrameXSSCORSIP(黑白名單)前端UIAPI核心服務權限登陸充值Strapi注冊消費內容數據庫設計編寫Model層封裝Service編寫API定義Router研發每款產品都需要經歷的流程訪問權限注冊/登陸充值/消費前端聯調上線運營WebApp小程序桌面軟件 一些坑目前仍然是 v3.0-beta版數據庫使用MySQL時，開發環境變更，無法同步到生產環境（缺少migration）單機部署重啟問題（nginx反向代理+切換端口）微信小程序同構方案新思路微信小程序同構方案：mpvue wepy taro kbone kbone 是什么？kbone 也是一種同構方案，只是實現思

118、路和其他常見的方案不同，接下來就來介紹下它是如何誕生的。支持我們使用熟悉的方式（比如 Vue、React）來同時完成小程序端和 Web 端的開發內容大綱背景1方案2應用3結語4Part 1 背景背景背景：微信開放社區為了讓信息可以更方便有效地傳播、分享和使用，需要在現有 Web 端實現上打造小程序端社區現有 Web 端社區同構到小程序需要考慮的因素l 一套代碼多端運行，便于后續維護l 復用已有代碼l 盡可能支持已有的特性l 保證性能Part 2 方案方案社區 Web 端實現：基于 Vue 框架一款提供組件化的 JavaScript 框架Vue 模板js 函數調用 Dom 接口構建 Dom 樹渲

119、染 Dom 樹到頁面上編譯執行瀏覽器原理：Vue 原理divlabelinput構建出 Dom 樹評論組件（簡化后的 Vue 模板）瀏覽器渲染效果 編譯成 js 函數（調用 Dom 接口）社區 Web 端代碼能否直接在小程序上執行？社區前端模型用戶代碼VueDom 接口瀏覽器渲染瀏覽器提供的能力，在小程序中不存在，原因在于小程序的運行模型webviewwebview視圖層(Webview)邏輯層(JsCore)Native小程序雙線程架構用戶代碼中的 js用戶代碼中的WXML、WXSS只是個 jsCore，所以沒有 Dom 接口如何將 Vue 代碼轉成小程序代碼？業界方案做法：將 Vue 模板

120、靜態轉換成小程序 WXML 模板 業界方案原理Vue 模板js 函數調用 Dom 接口構建 Dom 樹渲染 Dom 樹到頁面上編譯執行瀏覽器WXML 模板小程序渲染靜態轉換視圖層WXML 是小程序提供的一套類 HTML 格式模板語言業界方案原理轉譯成 WXML 模板評論組件（簡化后的 Vue 模板）viewlabelinput構建出小程序組件樹 小程序渲染效果業界方案局限性此方案簡單場景可用，如果遇到一個復雜場景呢？比如：展示社區帖子的富文本內容，點擊內容中圖片可預覽Vue 模板WXML 模板?社區中的帖子詳情頁業界方案局限性Vue 模板WXML 模板兩邊語法不對等，靜態轉換會丟失部分 Vue

121、 特性l富文本渲染l部分事件修飾符l過濾器l部分指令l業界方案局限性部分 Vue 特性Dom 操作Vue-router 等插件被社區高度依賴，但前述方案不支持！l需要調整社區的部分交互l部分特性可以使用兼容方案重寫，但重構成本巨大此路不通，得換一種思路來解決 Vue 特性支持的問題新方案設計用戶代碼VueDom 接口瀏覽器渲染仿造 Dom 接口小程序渲染用戶代碼VueWeb 端模型新方案模型新方案原理Vue 模板js 函數調用 Dom 接口構建 Dom 樹渲染 Dom 樹到頁面上編譯執行瀏覽器此方案要實現的即是適配器部分小程序渲染調用仿造 Dom 接口創建仿造 Dom 樹適配器視圖層1、如何創

122、建仿造 Dom 樹？2、如何將仿造 Dom 樹渲染到頁面上？3、如何監聽用戶事件？這就是 kbone 的設計思路，接下來需要考慮如下問題：1、如何創建仿造 Dom 樹？創建仿造 Dom 樹評論組件（簡化后的 Vue 模板）編譯成 js 函數（調用 Dom 接口）lcreateElementlappendChild仿造 Dom 接口：divlabelinput仿造 Dom 樹在邏輯層內存中2、如何將仿造 Dom 樹渲染到頁面上？小程序渲染原理WXML 模板創建組件樹 渲染到頁面上數據js 代碼視圖層邏輯層Nativel 內置組件（如 view、video 等）l 自定義組件渲染到頁面上在運行時動

123、態生成的 Dom 樹結構無法預知，無法提前生成對應的靜態 WXML 模板仿造Dom 樹邏輯層視圖層小程序也沒提供動態創建節點的接口靈光一閃：能否利用前面提到的自定義組件來渲染仿造 Dom 樹呢？什么是自定義組件？小程序渲染例子頁面 WXML 模板data:content:確認要發送？頁面數據渲染自定義組件用法頁面 WXML 模板頁面 WXML 模板自定義組件 組件封裝簡化替換替換自定義組件用法自定義組件是一種將各種組件進行組裝而成的組件其模板可以是這樣的：也可以是這樣的：任何組件均可以被組裝，包括自己可以遞歸創建組件還可以是這樣的：自定義組件遞歸用法 組件封裝頁面 WXML 模板組件樹view

124、viewcustom-domviewcustom-domview自己引用自己渲染到頁面divlabelinput仿造 Dom 樹評論組件（簡化后的 Vue 模板）回到最開始的例子，是否可以利用自定義組件的遞歸創建能力做些什么？渲染到頁面divlabelinput仿造 Dom 樹自定義組件自定義組件自定義組件組件樹將每一個 Dom 節點都映射到一個自定義組件實例上如果創建的自定義組件過多會影響性能，這個后面會介紹如何優化渲染到頁面具體實施：封裝一個可遞歸的自定義組件 組件封裝div:attrs:name:div,children:label,input label:attrs:name:labe

125、l,children:評論：input:attrs:name:input,children:遇到非 Dom 節點或者 children 為空則終止遞歸渲染到頁面divlabelinput仿造 Dom 樹組件樹custom-domcustom-domcustom-domviewviewinputcustom-domtext綁定綁定綁定渲染到頁面最終渲染的效果：divlabelinput仿造 Dom 樹組件樹custom-domcustom-domcustom-domviewviewinputcustom-domtext3、如何監聽用戶事件？事件監聽用戶在輸入框輸入內容：代碼中監聽到輸入事件后，發

126、現評論內容不符合要求，需要給個提示自定義組件監聽用戶輸入仿造 Dom節點事件監聽器Vue用戶代碼事件監聽custom-domcustom-domcustom-domviewviewinputcustom-domtext在觸發事件的節點監聽沒問題組件樹觸發 input 事件監聽 input 事件事件監聽custom-domcustom-domcustom-domviewviewinputcustom-domtext組件樹Web 端可以監聽到，小程序卻不行，怎么回事？監聽 input 事件l小程序有些事件無法冒泡，input 事件就是其中之一l對于可以冒泡的事件，因為自定義組件封裝的特性，也無法知

127、道具體來自哪個節點觸發 input 事件事件監聽custom-domcustom-domcustom-domviewviewinputcustom-domtext組件樹監聽 input 事件，觸發仿造 input 事件divlabelinput仿造 Dom 樹仿造瀏覽器的事件系統，接管小程序事件冒泡監聽仿造 input 事件監聽仿造 input 事件事件監聽組件樹custom-domcustom-domcustom-domviewviewinputcustom-domtextdivlabelinput仿造 Dom 樹div拋出更新事件新增節點組件樹custom-domcustom-domcus

128、tom-domviewviewinputcustom-domtextdivlabelinput仿造 Dom 樹div事件監聽接收到更新事件，更新 childrencustom-domviewcustom-domtext最終渲染的效果：細節1:如何將 Dom 樹傳給視圖層？方案一自定義組件自定義組件自定義組件自定義組件自定義組件自定義組件123456完整 Dom 樹直接傳到根自定義組件setData子樹數據則通過 properties 層層透傳方案一問題1、每次更新都需要做整棵樹的 diff，存在性能損耗。問題2、局部更新可能需要傳輸大量不變動的數據。方案二12345612324536456將每

129、個節點作為根節點，拆出至多兩層的子樹方案二自定義組件自定義組件自定義組件自定義組件自定義組件自定義組件12324536456setDatasetDatasetDatasetDatasetDatasetData將各子樹傳遞給與根節點對應的自定義組件方案二優勢1：局部更新只做局部 diff。優勢2：每個自定義組件只需要自己和子節點數據，減少單次更新需要傳輸的數據量。細節2:自定義組件創建過程開銷較大，創建過多實例影響性能怎么辦？減少實例創建依照初始方案設計，一個 Dom 節點映射一個自定義組件實例有沒有辦法讓多個 Dom 節點映射一個自定義組件實例？減少實例創建17個 Dom 節點=5個自定義組件

130、實例例子：每3層節點劃分為一棵子樹，每棵子樹對應一個自定義組件實例減少實例創建只有1個節點，卻要創建1個自定義組件實例，太浪費！單一葉子節點可以合并到上一棵子樹中其他細節l Dom 節點、Style、ClassList 等對象復用l Style、ClassList 等對象延遲創建l Dom 節點屬性值刪減l 方案總結kbonerender（js 庫）element（自定義組件）l 仿造 Dom/Bom 接口l 構造仿造 Dom 樹l 監聽仿造 Dom 樹變化，渲染到頁面l 監聽用戶行為，觸發仿造 Dom 樹事件方案總結因為是最底層的地方實現適配，所以幾乎所有 vue 特性都可以直接使用：ref

131、filters事件修飾符slotvue-routerv-htmlvuexl Dom 操作l window.locationl window.historyl document.cookiel 渲染性能Part 3 應用應用應用到微信開發社區Markdown-itVue-routerVuexVue SSR用戶代碼瀏覽器webpack 構建微信開放社區 Web 端這一層小程序沒有應用到微信開發社區Markdown-itVue-routerVuexVue用戶代碼kbone微信開放社區小程序用 kbone 仿造瀏覽器環境webpack 構建+mp-webpack-plugin 插件實現得差不多時，產品

132、來提需求了應用優化希望小程序端的頁面頭部和 h5 端不同，不同端使用不同的交互設計h5 端小程序端構建時注入環境變量，根據不同環境執行不同邏輯應用優化還希望可以支持小程序端的分享支持使用小程序內置組件，實現小程序分享功能小程序端完成，想用手機預覽一下看看代碼體積太大，怎么辦？體積優化l 壓縮混淆l 代碼分割、公共代碼復用l tree shakingl 使用分包l 體積優化Vue 組件importimport富文本編輯器Vuex不需要需要社區 Web 端是一套基于響應式設計的代碼，包含很多在移動端用不到的東西。提供一個 webpack loader，根據環境剔除不需要的代碼效果展示微信開放社區小

133、程序渲染效果對比（左為 h5 端，右為小程序端）：Part 4 結語結語工具鏈開源目前方案核心已穩定，周邊工具和功能在逐步完善中，已有 50+小程序在接入中。擴展因為此方案是通過提供適配層的方式來實現的，所以可以支持擴展到其他框架，比如 React、Preact、Omi 等擴展一些基于 React、Preact、Omi 的例子：總結l 支持更全面的 Vue 特性和 Vue 工具鏈l 支持常用的 Dom/Bom 接口調用l 復用現有 Vue 相關代碼，降低改造和維護成本l 可擴展性強微信小程序團隊招前端、后臺，有意向者可將簡歷發送至：秒速做一個飛機大戰工具定位&小游戲的特點目錄怎么做基于Scra

134、tch-blocks可視化創作配置驅動的小游戲Scratch-blocks的前身Blockly2012年Google 開源基于web的可視化代碼編輯器使用“積木”的開發模式可導出代碼可自定義拓展基于其構建的可視化項目眾多國際化Blockly衍生出的BlocklyGameScratch-blocks基于Blockly，結合Scratch Virtual Machine提供“橫向”和“縱向”兩種編程模式Scratch 2.0基于flash不支持代碼導出目標是制作一個“developer preview”2019年1月底上線 Scratch 3.0Scratch3.0游戲邏輯運行時Scratch G

135、UIScratch-paintScratch-VMScratch-blockssvg-renderScratch-render渲染引擎Scratch-storageReact+Redux自定義積木可視化積木該怎么用？項目方案選型Blockly+代碼導出=每個小游戲一個文件包方案一：Scratch+VM+游戲配置=固定的文件包+project_id 方案二：優點：架構設計簡單，開發成本低缺點：小游戲端運行預覽、發布成本高優點：可直接小游戲端預覽分享，多端兼容缺點：需要設計VM解析配置邏輯控制克隆通知外觀運動偵測變量數學運算音頻物理場景切換游戲基本玩法所需要的積木點擊碰撞通知克隆體啟動游戲開始移出

136、場景手勢觸發條件行為事件、生命周期引擎選型輕量，僅350KB2D渲染引擎國外開源，MIT協議Pixi.js渲染引擎碰撞檢測物理引擎Matter.jsBox2DP2.js系統架構IDE游戲配置管理模型場景管理精靈屬性積木地圖編輯單圖、幀動畫背景音樂、音效文字數字資源管理數值變量列表本地資源畫圖工具H5錄音上傳圖層管理（擺地圖）可視化拖拽面板設置事件積木控制積木（資源復用）拖拽擺放預覽環境發布系統IDE游戲配置管理模型場景管理精靈屬性積木地圖編輯單圖、幀動畫背景音樂、音效文字數字資源管理數值變量列表本地資源畫圖工具H5錄音上傳圖層管理（擺地圖）可視化拖拽面板設置事件積木控制積木（資源復用）拖拽擺放

137、預覽環境發布系統精靈屬性皮膚事件積木游戲精靈精靈配置blocks:積木鏈表實例化的精靈池，監聽觸發事件Sprite 1Sprite 1實例化的精靈池，監聽觸發事件循環調用棧第1幀第2、3、n幀游戲循環設計IDE游戲配置管理模型場景管理精靈屬性積木地圖編輯單圖、幀動畫背景音樂、音效文字數字資源管理數值變量列表本地資源畫圖工具H5錄音上傳圖層管理（擺地圖）可視化拖拽面板設置事件積木控制積木（資源復用）拖拽擺放預覽環境發布系統資源場景管理精靈屬性積木地圖編輯單圖、幀動畫背景音樂、音效文字數字資源管理數值變量列表本地資源畫圖工具H5錄音上傳圖層管理（擺地圖）可視化拖拽面板設置事件積木控制積木（資源復用

138、）拖拽擺放預覽環境發布系統IDE游戲配置管理模型快速分享&一鍵發布至MP平臺游戲性能怎么樣？每幀所運行的線程數500500個線程個線程10001000個線程個線程小游戲制作工具小游戲制作工具 流暢幀耗時3-4ms開發者工具開發者工具流暢幀耗時1-2msiOSiOS（iPhoneiPhone 7 7）基本流暢幀耗時 15-17ms卡頓幀耗時30msAndroidAndroid（vivovivo）流暢幀耗時6-10ms基本流暢幀耗時10-15ms碰撞檢測150150個精靈個精靈350350個精靈個精靈500500個精靈個精靈10001000個精靈個精靈小游戲制作工具小游戲制作工具 流暢幀耗時1-2

139、ms流暢幀耗時3-5ms流暢幀耗時3-5ms基本流暢FPS 50-60開發者工具開發者工具流暢幀耗時1-2ms流暢幀耗時2-4ms流暢幀耗時4-6ms基本流暢FPS 50-60iOSiOS（iPhoneiPhone 7 7）基本流暢FPS 50-60卡頓幀耗時35-37ms卡頓FPS 低于30AndroidAndroid（vivovivo）基本流暢FPS 50-60基本流暢幀耗時12-14ms流暢幀耗時17-23ms輕微卡頓FPS 30-50像素計算圓/矩形包圍盒6-8邊形物理引擎100100個剛體個剛體300300個剛體個剛體iPhoneiPhone 7 713-14ms60ms+OPPOO

140、PPO R11R116-8ms17ms100100個剛體個剛體300300個剛體個剛體iPhoneiPhone 7 712ms45msOPPOOPPO R11R118ms30msBox2DMatter.js自動打包背后隱藏的性能調優分場景自動合圖、壓縮游戲配置gzip內置精靈描邊數據自定義碰撞區碰撞算法優化靜態圖集、動態圖集Box2D計算下沉至客戶端在路上意外退出瀏覽器崩潰斷網如何確保用戶穩定創作？不穩定原因：1、用戶誤操作2、APP crash方案：1、阻斷并二次確認2、分鐘級自動備份LocalStorageindexedDB存儲空間510MB磁盤剩余空間50%應用場景桌面圖標：iPad端非

141、常適用離線緩存：install：prefetch 首屏資源fetch策略：游戲資源靜態資源cgi數據響應PWA助力離線應用離線創作、本地存儲、上線同步持久的本地緩存讓游戲編輯時秒開8700毫秒 50毫秒二次打開耗時減少99%目錄一起玩玩法一：個性化自定義玩法二：創作關卡玩法三：經典玩法二次創作創意玩法四正式發布的小游戲蹦上天逃命地球CubeNinja雪地求生大道至剪草龍戲珠皮影人有門神有對聯年獸大作戰酒狂2019高校微信小游戲開發者大賽參賽作品2019高校微信小游戲開發者大賽獲獎作品白虹貫日Join JOIN US極致SSR構建高效率高性能Web同構應用 個人介紹段隆賢 lucien騰訊視頻W

142、eb高級工程師騰訊視頻從2016年開始整站接入Node.js服務，2017年開始自研Vue語法編譯器并在線上作為直出，同構的模板引擎廣泛使用。騰訊視頻在Node.js SSR(服務器端渲染:Server-Side Rendering)，Serverless，分塊傳輸，同構等技術有多個成熟的案例。目錄一.為什么需要SSR三.現狀及優化方案 二.什么是極致的SSR為什么需要SSR1.更好的搜索引擎優化(SEO:Search Engine Optimization)2.更快的首次有效繪制(FMP:First Meaningful Paint)什么是極致的SSR1.更短的首次有效繪制時間(FMP:Fi

143、rst Meaningful Paint)2.更短的可交互時間(TTI:Time to Interactive)3.有更好的交互體驗，給用戶更好的動畫過渡和預期并且：開發效率高，開發簡單SSR的現狀1.一般SSR,首屏(FMP)依賴頁面所有接口，首屏不一定快，同時分塊傳輸有額外的工作量 3.SSR頁面切換無法漸進式加載，頁面切換時不能定義過渡動畫2.開發效率低:傳統的SSR,需要操作DOM,開發效率低，難維護，同構頁面可響應時間（TTI）長對比預期，現狀是什么?SSR現狀:首次繪制慢一般SSR首次繪制(FP:First Paint)慢,不能漸進式加載HTMLCSSJSHTMLCSSJSCSRF

144、PDataRequestSSRFP/FMP服務端渲染SSR:ServerSideRendering客戶端渲染CSR:ClientSideRenderingHTTP1.1 分塊傳輸可以完美的解決這個問題DataRequestRenderCSRFMP分塊傳輸分塊傳輸是什么說人話：不需要等待頁面所有的接口返回，頁面頭部接口響應即可響應頁面，FP(首字渲染 first paint)和FCP(首次內容渲染:first contentful paint)更快HTTP1.1:Transfer-Encoding:chunked HTTP2:數據幀在HTTP協議的展現形式:RFC2616:Thechunkede

145、ncodingmodifiesthebodyofamessageinordertotransferitasaseriesofchunks,eachwithitsownsizeindicator,followedbyanOPTIONALtrailercontainingentity-headerfields.分塊傳輸SSR為什么需要分塊傳輸利用分塊返回可以更快加載頁面首屏不分塊返回：需等待所有后臺數據ready再發給瀏覽器分塊返回：第一時間返回頁面頭部，提前加載css，再分塊渲染頁面分塊傳輸SSR為什么需要分塊傳輸騰訊視頻首頁的分塊加載高度11007px（1080P下10屏）關鍵指標:1.首字耗

146、時47ms2.下載耗時252ms3.70ms時開始解析html，并請求css4.瀏覽器首次渲染110ms5.首屏渲染310ms線上統計效果:分塊傳輸:自動化當前分塊方案的問題及優化方案1.人力手工拆分模板2.找到模板間的異步數據依賴并維護數據間的依賴鏈3.需要描述模板與數據之間的關系問題:分塊增加開發成本方案:把臟活累活自動化1.程序分析模板的異步數據，自動拆分模板2.根據模板上下的依賴關系,自動收集數據依賴3.自動把局部模板和數據關聯自動化分塊傳輸方案:語法樹分析1.查找第一層的模板解析表達式($)節點2.分析并收集該節點下所有的與數據相關的標志符3.用Promise.all包含該節點并重命

147、名標志符TemplateLiteralexpressions表達式quasis字面量ConditionalExpressionCallExpressionTemplateElementTemplateElementPromise.all語法樹處理異步數據示意圖Promise.allparse因ES6Template的表達式，有子程序或模板故需分析局部模板和數據依賴:自動化分塊傳輸分析數據與局部模板的依賴ParseChunkPlugincodegenbabylonBabelgeneratorASTAST編譯前編譯后數據依賴收集流程圖ES6 Template不能解析 Promise等異步數據？自動

148、化分塊傳輸開始迭代模板表達式標簽函數:render$key:$value添加到數據依賴鏈fetchQueue=fetchQueue.then()=fetchingData)是否為異步數據暫存HTML到chunkCache異步處理模板fetchingData.then(data=chunk=render(data)chunkCache+=chunkawait fetchQueue response.end()結束忽略該chunkresponse.write(chunkCache)是否結束resolverejectYNNY標簽函數內處理異步數據用標簽函數支持異步數據解析:1.緩存輸出，緩存輸出，直

149、至下一個異步數據前直至下一個異步數據前 write到客戶端。到客戶端。2 構建依賴鏈構建依賴鏈自動化分塊傳輸標簽函數方案的性能*采樣對象有采樣對象有8個異步請求個異步請求,8個分塊個分塊標簽函數的方案比手寫分塊的性能低1628%新目標：性能媲美手寫分塊自動化分塊傳輸分析性能問題有性能消耗：1.構建Promsie鏈2.字符串的拷貝(chunkCache+=chunk)3.標簽函數*5個表達式的模板執行個表達式的模板執行100k次的性能，次的性能，越低性能越好越低性能越好在CentOS中純ES6 template的性能是標簽函數的4倍上面都是在運行時不變，編譯時可以確定的條件，所有都可以在編譯時計

150、算自動化分塊傳輸解決性能問題:編譯時計算運算放在編譯時:分析Templateiteral(在語法樹上表示模板字符串)節點，用異步的表達式分割模板，轉字符串拼接，分塊輸出 TemplateLiteralexpressions表達式quasis字面量E1:MemberExpressionE2:CallExpressionQ1:TemplateElementQ3:TemplateElementE3:BinaryExpressionQ2:TemplateElementQ4:TemplateElementE4:ConditionalExpressionQ5:TemplateElementsyncdata

151、async dataasync data模板語法樹分塊示意圖sync data分塊:Q1+E1+Q2分塊:await E2+Q3+E3+Q4分塊:await E4+Q5編譯時生成E2Q3E3Q4自動化分塊傳輸編譯前后對比編譯前編譯后*為了展示方便，為了展示方便，編譯后去除了異常兜底的邏輯編譯后去除了異常兜底的邏輯編譯時計算：1.構建Promsie依賴鏈(轉await)2.字符串的拷貝(轉字面量)3.標簽函數(轉拼接)自動化分塊傳輸編譯時優化后的性能：手寫分塊一樣的性能*采樣對象有采樣對象有8個異步請求個異步請求,8個分塊個分塊通過把運行時的計算放到編譯時，可以達到和手寫分塊一樣的性能在接口的平

152、均響應時間為60ms時，相比標簽函數QPS可以提升26%自動化分塊傳輸業務無關，自動分塊:非分塊一樣的開發效率編譯時開關，一鍵切換分塊/非分塊,和普通非分塊頁面一樣的開發效率，業務開發無感知業務模板代碼ES6 templateES6 Template Render FunctionAsync render FunctionServer(FAAS)autoChunked:trueautoChunked:falseengine編譯時運行時數據配置自動化分塊傳輸效果對比線上的環境較復雜，首字(TTFB)耗時分塊相對非分塊提高了47%線上實時效果對比:*后端耗時后端耗時 =responseStart-

153、requestStart自動化分塊傳輸優化前優化后1.自動管理異常和依賴：自動兜底數據請求失敗，超時等異常，分析模板數據依賴2.編譯時處理依賴鏈性能無憂：和手寫原始的分塊一樣的性能,比業務在運行時封裝的分塊性能更好3.一鍵切換分塊/非分塊：編譯時開關，一鍵切換分塊/非分塊，普通非分塊頁面一樣的開發效率，業務無感知效果對比1.人力手工拆分模板2.運行時維護異步數據間的依賴鏈3.需要描述模板與數據之間的關系。自動化分塊傳輸小結一句話說方案：由模板的語法樹，分析代碼的上下文，分析數據和模板間的依賴，用異步數據分割模板，分塊逐步輸出優化奧義：工作量大的部分的自動化，有性能損失且編譯時確定的運算放在編譯

154、時SSR現狀:效率低1.開發效率低:傳統的SSR,需要操作DOM,開發效率低，難維護3.同構服務端性能低:HTTP服務端無狀態無需狀態管理，也無需虛擬DOM2.同構的可響應時間長(TTI):由于同構需要客戶端激活DOM,可響應時間長SSR現狀:同構的SSR性能低字符串的拼接是SSR最簡單粗暴有效的方式VDOM FactoryVDOMDataHTML String由數據生成樹遍歷樹拼接字符串基于VDOM的SSR流程圖由于需要生成樹再遍歷樹基于VDOM的SSR有比較大的性能損耗Vue編譯時優化編譯時優化思路自研Vue編譯引擎：在編譯時把Vue語法轉化為字符串拼接字符串拼接字符串拼接compiler

155、engine源碼虛擬虛擬DOMASTvue-loader編譯引擎效果服務端性能比Vue基于VDOM的官方SSR方案快了20+倍(Vue2.3.4快30+倍)Vue編譯時優化Vue編譯時優化小結一句話說方案：由Vue語法樹，在編譯時生成線性字符串的拼接，無需構造和遍歷VDOM樹形性能更高.優化奧義：HTTP傳輸是字符流，HTTP協議的內容部份(HTTP2.0數據幀)都可以用字符串表達。字符串的拼接是SSR最簡單高效的方式！除了字符串拼接，其它計算放在編譯時高效開發Vue編譯器結構ASTcodegenFunctionjavascriptHTMLCSS處理生命周期函數webpack API外置模塊f

156、ilterXSS處理serverjavascript modulerenderaga-engineaga-loader組件源碼元素插件屬性插件自定義元素屬性文本插件文本插件遍歷ASTengine處理流程圖高效開發同構渲染流程serverjavascript modulestatic javascript HTML+DataVirtual DOM Vue runtime客戶端激活(Patch)NodeServerCDN1.事件掛載2.響應式數據源碼字符串拼接VDOM Configvue-loaderaga-loader同構流程示意圖高效開發目前編譯器在騰訊內部已應用在100+個頁面。效果1.編譯

157、器覆蓋了Vue 90%+的語法,統一了前后端語法3.相對當前的同構方案提供了一種簡單的Vue同構方案，不用擔心性能問題，統一服務端的模板語法。2.目標語法是ES6 Template或字符串拼接，性能高，對開發透明，支持的Serverless服務結合。高效開發不同渲染模式的特性渲染模式渲染模式首次渲染首次渲染FP首屏首屏FMP可交互可交互TTI開開發效率效率前端渲染直出頁面同構HTMLCSSJSRender(patch)同構TTI同構的可交互時間相比直出多了Patch時間可交互時間TTI比較長,如何優化？高效開發同構的問題1.有些模板就是靜態的數據和簡單的交互2.同構在客戶端有激活的計算成本，激

158、活的時間和DOM量正相關并不是所有的模塊適合用同構客戶端激活的成本高效開發局部同構的方案和性能采樣硬件：i7 16G把頁面交互多的部分用同構，其它直出實現:同一頁面只激活同構的DOM,其它DOM和直出完全一樣，不激活。方案:降低不必要的同構DOM量，可以大大提升移動端激活性能激活時間激活時間性能對比:高效開發渲染模式及適應的場景渲染模式渲染模式首次渲染首次渲染FP首屏首屏FMP可交互可交互TTI開開發效率效率適用適用場景景前端渲染需要快速上線，表單比較多，不關心首屏和SEO直出SEO,首屏快,業務簡單，交互較少全頁面同構SEO，首屏快,交互復雜局部同構SEO,局部交互多，性能相比全同構更好業務

159、開發可根據場景特點在同一項目的不同頁面選擇各自適合渲染模式。同構的TTI優化小結一句話說方案：前端激活的時間和激活的DOM量正相關，減少不必要的激活,可以加快可響應時間(TTI)優化奧義：如果減少每個單位的計算量有困難，那么就減少那些不必要的計算，減少總量SSR現狀：不能增量更新，定義切換動畫SSR頁面切換無法漸進式加載，不能定義頁面切換動畫前端路由&服務端直出無刷新切換：直出單頁應用運用前端路由管理模塊，頁面無刷新切換的頁面狀態，可自定義切換動效。一句話：直出單頁應用即有直出首屏快，SEO友好的優點，又有前端渲染頁面間切換白屏時間短，可定義動效的優點。構建高效率高性能Web同構應用1.Vue

160、編譯引擎,運行時字符串拼接性能佳，統一前后臺語法;2.前端路由管理模塊，頁面無刷新的增量更新，自定義頁面切換動畫1.自動化分塊傳輸，編譯時分析優化讓分塊和非分塊工作量一樣，比一般的封裝分塊性能更好，支持一鍵切換2.支持同構、局部同構等多種渲染模式，聲明式開發效率更高性能優化效率優化總結極致SSR段隆賢編譯優化,寫的更少,運行更好Compile-time optimization:write less,run betterQ/A難點一：渲染帶昵稱的3D勛章渲染模型：技術選型WebGLThree.js那么，應該選擇什么文件格式呢？難點一：渲染帶昵稱的3D勛章渲染模型：格式選型JSONFBX（解析后

161、）FBX（解析前）OBJ難點一：渲染帶昵稱的3D勛章渲染模型：格式選型格式格式JSONFBXOBJ+材材質貼圖質貼圖文件體文件體積積純文本，體積大二進制，中等體積中等體積通用性通用性專用格式，難導出行業通用標準行業標準復復雜雜度度內容包含較復雜嵌套內容包含較復雜嵌套內容簡單操作操作貼圖貼圖需要hook解析過程需要hook解析過程容易操作結論結論不通用可以，但不必要難點一：渲染帶昵稱的3D勛章目標：勛章刻字材材質質3D模型難點一：渲染帶昵稱的3D勛章勛章刻字：模型的組成難點一：渲染帶昵稱的3D勛章勛章刻字：模型貼圖固有色固有色貼圖貼圖深度深度貼圖貼圖光滑度光滑度貼圖貼圖(鏡鏡面面貼圖貼圖)難點一

162、：渲染帶昵稱的3D勛章勛章刻字：模型貼圖固有色貼圖深度貼圖光滑度貼圖(鏡面貼圖)難點一：渲染帶昵稱的3D勛章勛章刻字生成材生成材質質前用前用 canvas 在在貼圖貼圖上寫字上寫字文字文字應該應該寫在寫在什么位置什么位置呢？呢？難點一：渲染帶昵稱的3D勛章勛章刻字：模型的組成顏顏色、深度、色、深度、鏡鏡面面貼圖貼圖3D模型模型難點一：渲染帶昵稱的3D勛章勛章刻字：模型的組成3D模型模型網格（模型網格（模型頂頂點）點）=+UV信息（信息（貼圖貼圖坐坐標標映射）映射）難點二：制作流暢的可交互動畫什么是流暢？時間位置時間速度是不是曲線，重要的是速度速度變變化要化要連續連續難點二：制作流暢的可交互動畫

163、什么是流暢？時間位置時間速度把速度變成曲線，就能看起來更舒服？難點二：制作流暢的可交互動畫什么是流暢？時間位置時間速度難點二：制作流暢的可交互動畫什么是流暢？時間位置時間速度速度不連續難點二：制作流暢的可交互動畫什么是流暢？位移、角度變化連續這樣這樣就流就流暢暢了了嗎嗎？難點二：制作流暢的可交互動畫什么是流暢？時間位置移動不連續難點二：制作流暢的可交互動畫勛章墻要達到的效果出出場場：勻速旋：勻速旋轉轉結結束：束：彈彈性性動動畫畫如何如何讓讓兩個兩個動動畫無畫無縫銜縫銜接？接？效果簡單，不使用物理引擎結合生活中的現象，總結規律簡化規律難點二：制作流暢的可交互動畫實現總結難點二：制作流暢的可交互動

164、畫勛章旋轉效果正面正面背面背面還還有些要注意的地方：有些要注意的地方：同一同一時間時間只能有一個只能有一個彈彈簧起作用簧起作用如果如果剛剛好好處處在在臨臨界點，就往前界點，就往前轉轉，防止卡住，防止卡住勛勛章方向與正面章方向與正面/背面的背面的夾夾角角彈彈簧簧彈彈力力難點二：制作流暢的可交互動畫勛章旋轉效果加速度a=F/m速度v=v+a旋轉角度=+vF=-k勛勛章方向與正面章方向與正面/背面的背面的夾夾角角彈彈簧簧彈彈力力難點二：制作流暢的可交互動畫勛章旋轉效果胡克定律（扭胡克定律（扭轉彈轉彈簧）簧）F=-kF=-kx難點二：制作流暢的可交互動畫勛章旋轉效果胡克定律（伸胡克定律（伸縮彈縮彈簧）

165、簧）勢能動能動能勢能勢能動能動能勢能難點二：制作流暢的可交互動畫勛章旋轉效果正面正面背面背面簡簡化成化成彈彈簧就行了！簧就行了！勢能動能動能勢能勢能動能動能勢能難點二：制作流暢的可交互動畫勛章旋轉效果正面正面背面背面可以可以歸納為歸納為能量能量轉換轉換的模型！的模型！難點二：制作流暢的可交互動畫勛章旋轉效果正面正面背面背面那么，怎么用代那么，怎么用代碼碼表示表示這這種效果呢？種效果呢？曲曲線線地面模地面模擬擬？重力？重力？支持力？支持力？難點二：制作流暢的可交互動畫勛章旋轉效果正面正面背面背面速度不速度不夠時夠時，只能停留在正面，只能停留在正面難點二：制作流暢的可交互動畫勛章旋轉效果正面正面背

166、面背面小球速度小球速度夠夠快快時時，可以從正面，可以從正面轉轉到背面到背面難點二：制作流暢的可交互動畫勛章旋轉效果正面正面背面背面勛勛章的旋章的旋轉動轉動畫，有點像小球在凹凸不平的地面運畫，有點像小球在凹凸不平的地面運動動側側面面側側面面側側面面難點二：制作流暢的可交互動畫使用物理引擎？模擬物體選擇、移動模擬物體間相互作用模擬重力、支持力、摩擦力勛勛章章墻墻并不需要如此復并不需要如此復雜雜的物理效果的物理效果能不能自己能不能自己實現實現？用戶可以旋轉勛章當用戶松手后，勛章緩慢停止在正面或者方面交互動畫需要銜接自勛章旋轉的出場動畫代代碼碼怎么表達怎么表達這這種種物理物理規規律律呢？呢？慢慢慢慢轉

167、轉“用力用力”轉轉難點二：制作流暢的可交互動畫“可交互”的目標勛章墻要達到的效果勻速出勻速出場場 抖抖動結動結尾尾滑滑動動旋旋轉轉、自、自動動停止停止可交互動畫銜接流暢難點二：制作流暢的可交互動畫定制模型UV規范基于canvas在貼圖上繪制文字將繪制后的canvas使用在模型上難點一：渲染帶昵稱的3D勛章勛章刻字：方案總結難點一：渲染帶昵稱的3D勛章勛章刻字：模型的組成textCanvasPos:w:541,h:541,x:21,y:421代代碼碼中配置中配置text繪繪制區域的坐制區域的坐標標設計師建模時調整UV，保證背面在這個位置難點一：渲染帶昵稱的3D勛章勛章刻字：模型的組成正面（平坦部

168、分）QQ臉背面QQ臉邊框邊框網格（模型網格（模型頂頂點）點）UV信息（信息（貼圖貼圖坐坐標標映射）映射）正面正面背面背面MaterialDesign給開發者的建議https:/material.io/design/motion/speed.html#controlling-speed建建議議1：使用：使用緩動緩動效果效果建建議議2：緩動時緩動時要用正確的曲要用正確的曲線線連續且可導難點二：制作流暢的可交互動畫什么是流暢？位移、角度變化連續速度、角速度變化連續難點二：制作流暢的可交互動畫如何銜接出場的旋轉動畫？時間速度勻速旋轉彈性運動保持速度連續！V2初速度=V1末速度難點二：制作流暢的可交互動

169、畫流暢銜接+可交互的秘密可交互使用物理規律F=-kx保持變化連續流暢銜接V2初速度=V1末速度符合符合物理物理規規律律，就能做出好，就能做出好動動畫！畫！難點三：打破次元壁入場動畫要達到的效果從2D過渡到3D3D勛章要在蓋在2D勛章上過渡過程中，模型需要縮放和位移技技術術要點：打破次元壁要點：打破次元壁透透視視相機相機 2D 3D 坐坐標換標換算復算復雜雜 消失點？消失點？旋旋轉時轉時透透視變視變化正?；Ｕ幌鄼C正交相機 坐坐標計標計算算簡單簡單 不用考不用考慮慮消失點消失點 旋旋轉時轉時透透視變視變化奇怪化奇怪難點三：打破次元壁2種透視方案分析最終方案難點三：打破次元壁透視投影怎么讓3D

170、模型出現在2D圖片的位置？使用Three.js內置函數可以可以將2D坐標映射到3D坐標系坐標：調用1次，計算3D坐標縮放比例：調用2次，傳入2D圖片最高點和最低點位置，可以量取3D模型的縮放比例接下來，只要根據坐接下來，只要根據坐標標和和縮縮放比例放比例調調整模型就好了？整模型就好了？難點三：打破次元壁縮放模型帶來的問題1：消失點不正確總覺總覺得哪里怪怪的得哪里怪怪的透透視視相機默相機默認認的消失點是畫面中的消失點是畫面中間間！難點三：打破次元壁縮放模型帶來的問題2：渲染效果差距很大實際實際渲染效果渲染效果設計師設計師效果效果原因：原因：縮縮放后深度放后深度貼圖貼圖深度、燈光位置、燈光深度、燈

171、光位置、燈光強強度等若干參數沒有相度等若干參數沒有相應應成倍成倍通通過調過調整模型不行的整模型不行的話話，也，也許許我我們應該們應該把思路把思路轉變轉變一下，一下，調調整整攝攝像機像機難點三：打破次元壁那么，有沒有一種既能移動消失點，又能自動調整各種參數的方法呢？fullViewsubCamView難點三：打破次元壁那么，有沒有一種既能移動消失點，又能自動調整各種參數的方法呢？fullViewsubCamView難點三：打破次元壁方案總結使用透視相機，達到真實的透視效果通過.unproject計算模型初末狀態坐標、縮放比例通過.setViewOffset逐幀改變攝像機偏移難點四：渲染半透明模型

172、勛章墻預期的效果切換不同等級的勛章時，勛章需要漸漸出現只是調整透明度，有什么難度呢？難點四：渲染半透明模型有什么難點呢？直接設置canvas透明度？低端安卓不兼容直接設置材質透明度？相當于設置模型每個面的透明度，會出現重影腦補效果真實效果：飛機翅膀、引擎重影了！難點四：渲染半透明模型有什么難點呢？直接設置canvas透明度？低端安卓不兼容直接設置材質透明度？相當于設置模型每個面的透明度，會出現重影重影1：能看見“嵌入”的部分重影2：能看見被遮擋的面難點四：渲染半透明模型方案二：在畫好的模型前再畫一層“前景”只要改變前景圖層的透明度，模型看起來就像透明了一樣基于postprocessing就很簡

173、單了背景再畫一次背景DOM模型PostProcessing是什么？對渲染后的畫面做進一步調整https:/threejs.org/examples/?q=postprocessing印刷效果印刷效果濾鏡濾鏡故障故障藝術藝術(glitch art)濾鏡濾鏡眩光效果眩光效果生成全局光照生成全局光照(AO)方案總結調整模型透明度會“穿幫”用后處理器(postprocessing)渲染好的圖像上再渲染一層背景圖其他優化低端機優雅降級卡頓機器：定期采樣fps，去除深度貼圖、降低畫布尺寸不支持WebGL的機器：直接展示2D圖片線線上平均上平均fps：45+正常效果正常效果去除去除“磨砂磨砂質質感感”降低畫

174、布尺寸降低畫布尺寸模型文件cache基于localStorage緩存模型文本資源MD5命名，不需要重復加載模型文件靜態資源使用QQ離線包未來？異形屏幕手機適配使用更高效模型文件gltf壓縮文件大小，加快渲染速度騰訊騰訊教育教育 Serverless 實實踐及探索踐及探索目目錄錄/contents一、騰訊教育前端架構演變二、初探 Serverless 三、騰訊教育 在 Serverless 的實踐四、未來及展望騰訊騰訊教育前端架構演教育前端架構演變變1頁面開發 +API 數據處理 JS+HTML+CSS+Restful API騰訊教育前端架構演變開天辟地開天辟地時時代代1教育前端Server R

175、eactJS+Restful API+NodeJSLatex-RenderSSRRN2Web騰訊教育前端架構演變NodeJS 賦賦能能1ServerNodeJS教育前端IMPush管理后臺管理后臺騰訊教育前端架構演變日益增日益增長長的前端的前端業務業務1Mobile BFFPC BFFH5 BFFPUSH 通道通道日志服日志服務務NodeBFF教育大前端Server騰訊教育前端架構演變BFF&Node 應應用增用增長給長給前端前端帶帶來的成本來的成本1流量預估資源申請域名申請操作系統知識資源利用率告警和監控內存泄露問題機器擴容環境搭建備份容災騰訊教育前端架構演變Node 內存泄露內存泄露1騰訊

176、教育前端架構演變服服務務運運維維流程多流程多1應用上線網關變更NGINX 配置變更現網驗證服務監控日志檢查核心核心問題問題1大前端升級廣度廣度問題問題成本成本問題問題前端前端領領域范域范圍圍需要需要擴寬擴寬、為產為產品提供更多的品提供更多的賦賦能能廣度廣度問題問題所所帶帶來的成本和效率、成本形成矛盾來的成本和效率、成本形成矛盾騰訊教育前端架構演變初探初探 Serverless2Serverless 邏輯邏輯架構架構2Serverless=FaaS+BaaS觸觸發發器器API 網關/定時器/對象存儲/CMQ Topic/Kafka/CMQ FaaSFunction as a Service函數即

177、服務BaaSBackend As Service后端即服務，如云服務商提供的文件存儲、數據存儲、推送服務等初探 ServerlessEventSource用戶上傳代碼配置觸發器事件事件發發生生時時自自動動觸觸發發云函數平臺云函數平臺 FaaSFunction Function實例 Function實例 Function實例 Function實例 Function實例 Function實例 BaaS對象存儲云DBAIIOTCMQAPI GWCredis調用騰訊云云函數 SCF(serverless cloud function)架構邏輯初探 Serverless2SCF 架構剖析架構剖析SCF

178、BusinessRuntimeContainerComputeSubstrate初探 Serverless2SCF 執執行行過過程程1事件觸發3創建啟動云函數實例4傳入 Event 信息5執行云函數返回結果初探 Serverless22從云端存儲拉取代碼運行冷啟冷啟動優動優化化6Waiting7Waiting end銷毀容器實例若有同若有同類類事件事件傳傳入入繼續執繼續執行云函數行云函數超超過閾值過閾值未收到相同事件未收到相同事件初探 Serverless21事件觸發3創建啟動云函數實例4傳入 Event 信息5執行云函數返回結果2從云端存儲拉取代碼運行小小 tips-預連預連接接 依依賴賴加

179、加載載預處預處理理邏輯邏輯 可以?？梢员ＷC證下次下次執執行的行的時時候復用候復用Main handler1、只加載你需要的依賴2、預處理邏輯可以用來做相關 BaaS 服務的連接3、主、主邏輯邏輯中一定要小心中一定要小心預連預連接接的的資資源，要做重源，要做重試邏輯試邏輯入口文件初探 Serverless2小小 tips-臨時臨時文件存文件存儲儲4執行云函數返回結果5Waiting6Waiting end銷毀容器實例若有同若有同類類事件事件傳傳入入繼續執繼續執行云函數行云函數超超過閾值過閾值未收到相同事件未收到相同事件/tmp512M臨時臨時文文件件數據數據緩緩存存Serverless 在騰訊教

180、育上的探索2小小 tips-數據存數據存儲儲4執行云函數返回結果5Waiting6Waiting end銷毀容器實例若有同若有同類類事件事件傳傳入入繼續執繼續執行云函數行云函數超超過閾值過閾值未收到相同事件未收到相同事件/tmp512M臨時臨時文件文件數據數據緩緩存存Serverless 在騰訊教育上的探索2CloudRedisMysql高并高并發處發處理理初探 Serverless2Waiting7Waiting end銷毀容器實例若有同類事件傳入繼續執行云函數超過閾值未收到相同事件1事件觸發34傳入 Event 信息5執行云函數返回結果從云端存儲拉取代碼運行2創創建啟建啟動動云函數云函數實

181、實例例高并高并發時發時自自動創動創建多容器建多容器6傳統傳統 BFF 應應用開用開發發流程流程框架選型機器申請相關云資源相關權限配置環境搭建框架資料學習云資源配置編碼開發本地測試構建部署初探 Serverless2Serverless 賦賦能教育前端開能教育前端開發發框架選型機器申請相關云資源PASS 平臺平臺創創建函數建函數環境搭建云資源配置編碼編碼開開發發本地本地測試測試云函數部署云函數部署框架資料學習初探 Serverless2Serverless 能力能力“零”運維秒級部署自動觸發更聚焦業務彈性計算能力初探 Serverless2從從 BFF 到到 SFFPCH5RN小程序管理后臺GS

182、LB（域名解析）（域名解析）STGW（騰訊騰訊網關）網關）NGINXMobile BFFPC BFFH5 BFFOther BFFIMServer Framework(based on Koa)Container業務層接入層代理層應用層容器層API GATEWayIS Proxy (IMWeb Serverless Proxy)SCF ASCF BSCF CSCF DSCF ESCF GBaaS騰訊教育 BFF騰訊騰訊教育教育 SFF初探 Serverless2騰訊騰訊教育在教育在 Serverless 上的上的實實踐踐3Serverless 在騰訊教育上的探索3新新業務業務如何落地如何落地

183、Serverless？老老業務業務如何遷移如何遷移？Serverless 在騰訊教育上的探索老老業務業務遷移遷移-NodeServer VS SCF3NGINXAPI GateWayNode App Entrymain_handlerRouterSCF ASCF BSCF CSCF DControllerBASSSCF EMiddlewareServerless 在騰訊教育上的探索NGINXAPI GateWayNode Server Entrymain_handlerRouterSCF CSCF DMiddlewareControllerBASSSCF ESCF 兼容兼容 Node Serv

184、er(Koa or Express）代理層協議如何兼容？路由層如何改造？3Serverless 在騰訊教育上的探索代理代理層層兼容兼容NGINXAPI GateWayNode Servermain_handler流式塊狀3Serverless 在騰訊教育上的探索代理代理層層兼容兼容API GateWayNode Server Proxy 模式IMServer-Serverless3Serverless 在騰訊教育上的探索代理代理層層兼容兼容只需引用 tencent/serverless-imserver3Serverless 在騰訊教育上的探索代理代理層層兼容的兼容的優優缺點缺點優點：遷移成本

185、非常低遷移成本非常低缺點：單個云函體體積過積過大大，邏輯都在一個函數里3Serverless 在騰訊教育上的探索遷移遷移優優化方案化方案-路由路由層層改造改造API GateWayNode App EntryIMServer-ServerlessAPI GateWayIMServer-ServerlessIMServer-ProxyController ASCFController BSCFController CSCFRoterController AController B3Serverless 在騰訊教育上的探索3遷移方案遷移方案優優化化-路由路由層層改造改造API GateWayIMS

186、erver-ServerlessIMServer-ProxyController ASCFController BSCFController CSCFHTTP RPCServerless 在騰訊教育上的探索2路由路由層層改造改造 優優缺點缺點優點：改改動動適中、適中、邏輯邏輯拆分、云函數文件大小減少拆分、云函數文件大小減少缺點：需要加入一需要加入一層層 Proxy，兼容，兼容ControllerServerless 在騰訊教育上的探索3新新業務業務如何落地如何落地 Serverless？Serverless 在騰訊教育上的探索2小程序運營活動輕量級Server自動化測試管理后臺診診斷能力斷能力

187、全鏈路日志全鏈路檢索監監控能力控能力流量耗時成功率告警云監控業務業務代代碼碼業務 A業務 B業務 C基基礎組礎組件件Imserver監控日志CDNRedisCos服服務組務組件件加鎖緩存隊列安全DAO頻率控制業務組業務組件件圖片合成語音合成口語評測登錄二維碼Service BService AFAAS AFAAS BBASS 服服務務后臺服后臺服務務研研發閉環發閉環性性能能壓壓測測 /性性能能優優化化本地開發套件CI自動化測試預發集成CD線上發布和管控線上切流、灰度日志規范監控規范流程規范目錄規范運行運行時時研研發態發態線線上上監監控控/診診斷斷Serverless 在騰訊教育上的探索3新新業

188、務業務落地落地場場景景小程序運營活動服務端渲染Serverless 在騰訊教育上的探索3新新業務業務落地落地場場景景-小程序小程序企鵝背單詞騰訊課堂-新人專屬禮包Serverless 在騰訊教育上的探索23 FE developers2 Weeks50k Users240k max api call/day320ms Time per requestServerless 在騰訊教育上的探索3新新業務業務落地落地場場景景-小程序小程序STWG 接入層業務接口廣州 云函數上海 云函數天津 云函數BaaS 服務微信 APIServerless 在騰訊教育上的探索2小程序云開小程序云開發發 TCBSe

189、rverless 在騰訊教育上的探索3新新業務業務落地落地場場景景-運運營營活活動動運營活動Serverless 在騰訊教育上的探索3新新業務業務落地落地場場景景-運運營營活活動動特性特性可復用邏輯多跟業務強關聯時間要求緊Serverless 在騰訊教育上的探索2API GateWayH5APPPCCourse Info SCF ABASSCourse Info SCF B MircoServices ASCF MircoServicesB運運營營活活動動 SCF 生生態態構建構建Serverless 在騰訊教育上的探索2SFF for 運運營營活活動動API GateWayH5APPPCIM

190、SERVER-PROXYBASSBusiness ACourse ServicesFlutter小程序Business BBusiness CBusiness DOrder ServicesTeacher ServicesLive Services業務層接入層代理層業務層基礎服務層BASS 層Serverless 在騰訊教育上的探索3新新業務業務落地落地場場景景-服服務務端渲染端渲染服務端渲染Serverless 在騰訊教育上的探索3新新業務業務落地落地場場景景-服服務務端渲染端渲染頁面 AReact/Vue 單頁應單頁應用用頁面 B頁面 CCISCF ASCF BSCF CServerles

191、s 在騰訊教育上的探索3Serverless devOps Serverless 在騰訊教育上的探索2SCF DevOps開發預發布發布Git Hook部署觸發方式需求階段教育研發平臺部署流水線SCF 命名空間EDU-testEDU-Pre-ReleaseEDU-Production歸檔倉庫回回滾滾回滾流水線未來與展望未來與展望4未來與展望3擁抱 Serverless 生態未來與展望31、適用多端的 Serverless 平臺&SDK2、云開發逐漸成為前端的主流開發模式3、基于 Serverless 的可視化編排02.阿里控制臺解決方案阿里控制臺解決方案解決問題的理論和方法03.進進一步提效的

192、思考一步提效的思考還在建設中，未來可期01.控制臺系控制臺系統統的的現現狀與狀與問題問題發現問題目目錄錄Part 1:控制臺系統的現狀與問題設計品牌化 vs 組件庫UI適配能力規范一致性要求 vs 設計與開發協同的問題設計規范設計設計設計開發開發開發開發開發開發產品是否高質量？設計規范抽象是否執行了規范？差了1px左邊一點上邊一點要居中Part 2:阿里控制臺解決方案(Fusion)核心解法設計品牌化品牌化 vs 組件庫UI適配適配能力1需要一套能夠支持各部門品牌皮膚定制訴求的組件庫規范一致性一致性要求 vs 設計與開發協協同同的問題2需要一套落實品牌皮膚一致性的工作流機制案例演示：平臺主題配

193、置-by 品牌設計負責人演示站點配置平臺案例演示:頁面設計輔助工具-by 業務設計師案例演示:前端項目切換主題-by 開發者設計品牌化品牌化 vs 組件庫UI適配適配能力1需要一套能夠支持各部門品牌皮膚定制訴求的組件庫粒子設計原理粒子簡單組件復雜組件模板 頁面spacebuttonstepcheckboxrangedialogpagenation2/3 品牌品牌-設計系統產品骨架DPL主題定制 OK blockblock拖拽繪制視覺稿使用主題開發頁面工作流主題負責人前端平臺:配置主題設計工具端npmProject設計變量實時編譯修改修改變變量量替替換換 css實時實時sass編譯編譯服服務務s

194、ass 變變量量瀏覽瀏覽器器編譯編譯 css業務組業務組件件實時編譯實時編譯基基礎組礎組件件編譯編譯設計端插件核心配置平臺DesigntokenSketch設計插件FusionCoolrenderEvent基礎組件WebView圖表組件業務組件html2sketch組件通過 html2sketch 技術渲染到sketch阿里內部使用現狀3000+項項目使用目使用1000+有效主有效主題題個數個數30+服服務務BUPart 3:進一步提效的思考思路與大家一起探討完成了組件UI能力定制完成工作流串聯是否就徹底的解決了頁面問題？如何還能進一步提效？全鏈路的看工作流問題設計稿webUI 還還原原邏輯邏

195、輯填充填充/聯調聯調前端更快少寫CSS少寫DOM更快少寫邏輯少聯調如何讓UI還原更快，更少的寫 HTML/CSS 代碼？1如何讓邏輯和聯調更快？2如何讓UI還原更快，更少的寫 HTML/CSS 代碼？1組件問題-頁面問題粒子粒子基基礎組礎組件件業務組業務組件件區區塊塊 模板模板布局布局201605201805組件頁面設計設計xxxxxxxxxxxxxxxxxxxxx首首頁頁組組件件模模塊塊 模板模板 工具工具 設設置置內容區布局問題:排列問題和間距問題上下間距上下左右等距上下左右不等距離設計師視角：間間距距前端視角：margin/padding后端視角：間間距距內容區：組件之間的間距問題背景色

196、橫向模塊的間距縱向模塊的間距xxxxxxxxxxxxxx組件之間的間距鏈接之間的間距按鈕之間的間距10%15%理論持續升級:解決布局和間距之間的問題Layout/Box布局編排間距規則抽象設計配置去布局層面的膠水代碼去除組件排列的膠水代碼.btn-primary+.btn-primary margin-left:8px;.table+.pagination margin-top:10px如何讓邏輯和聯調更快？2能力復用統一工程體系和方案：有能力可用統一解決方案專項治理流程設計器Web Excel表單及設計器圖表設計器物料規范基礎組件業務通用組件商家后臺內部控制臺財務領領域域工程體系blockb

197、lockblock物料的沉淀和復用：讓大家的物料都能進來物料中心 OK blockblockOKOK Placeholder前端物料使用設計物料沉淀物料使用源碼開發 ProCode設計稿使用物料使用物料沉淀schema2code轉代碼非專業前端搭建 LowCode標準規范領域細分集團物料流通：精品物料上浮分類提供復用 分類/推薦 組織維度 存儲中心低代碼業務組件(npm+schema)區塊(schema)模板(schema)業務組件(npm)區塊(npm)模板(npm)Html2Sketch 物料中心PortalLow-code/No-code搭建平臺全域領域內細分/推薦 開放SDK&API業務身份DevToolPro-code源碼開發前端SDKWeb Design/Sketch設計工具私域HTTP 標準規范中后臺物料規范 中后臺搭建基礎協議規范設計規范124BU團隊 規范等級A類AA類AAA類 功能維度表單圖表表格 端維度PC WebMobile Web小程序 基礎框架ReactRax 組件庫FusionAntD物料研發模式NO-CodePro-Code 領域物料商品詳情店鋪彈窗Low-Code財經HSF3End