360 PC 小程序底层架构的演进与探索.pptx

1、360 PC 程序 底层架构的演进与探索录1. 360PC程序底层架构演进及技术1.1. 单线程架构1.2. 双线程架构1.3. 单线程 + ShadowDOM 架构1.4. 双线程 + 单 WebView 架构1.5. 双线程 + 多 WebView 架构2. 底层技术的应场景2.1. 360导航2.2. 其他应场景底层架构的演进程序？SP360安全浏览器单应single-page applicationUI渲染事件交互Web技术拥有OS的能使Vue.js开发程序开发体验完全与We很快有了新需求不希望开发者使某些（iframe）标签希望命周期与微信程序保持致类似Polyfill的法 能有限改

2、造Vue.js同步Vue.js修复的bug较难Fork第步：把Vue.js装 node_modules改造Vue.js第步：为模块打包器设置上别名第三步：把需要修改的代码，copy到项中修改module.exports = vue$: path.resolve(_dirname, ./src/web/entry-runtime-with-compiler),compiler: vue/src/compiler,core: vue/src/core,shared: vue/src/shared,web: path.resolve(_dirname, ./src/web),weex: vue/sr

3、c/platforms/weex,server: vue/src/server,sfc: vue/src/sfcmodule.exports = test: path.resolve(_dirname, ./src/test)b.jsmy-project：a.jsb.jsc.jsd.jsnode_modules：import x from test/b.js这就是单线程架构下的程序很快就遇到了问题.我们希望：程序对户是安全的eval(MINIAPP_CODE)如何安全运程序代码？是什么导致安全问题？eval(1000 * 60 * 60 * 24)eval(document.cookie)Ja

4、vaScript不定危险，危险的是它可以访问输和输出。输&输出：络DOM存储（例如：Cookie）Location全局变量其他未知危险API隐藏全局变量iframeWeb Workers沙箱RealmsWebAssembly其他.双线程架构下的程setAttribute渲染层逻appendChildUI渲染Event媒体createElement指令API控制 码控制createTextNodeSlaveMasterinsertBeforremoveChild似乎挺完美.两个常致命的缺陷：性能原能受限性能问题FP,FCP,FMP = 4.7screateElementsetAttribute逻

5、辑层渲染层指令createTextNodeinsertBefor指令时间渲染原能受限渲染层逻UI渲染Event媒体户代码平台组件官API受到限制API框架（Vue.js）控制控制指令SlaveMaster不改变架构的解决案渲染层逻UI渲染户代码控制控制数据数据平台组件平台组件真实功能与开发者交互官API官API官开发成本太（组件架构有问题总之，这个案不适合我们回归+单 S线ha程dowDOMconst root= document.body.attachShadow(mode: closed);渲染层User Code框架（Vue.js）DOMBOM指令ShadowDOM Close（Body

6、可视区）双线程下遇到的问题：性能问题原能受限单线程下遇到的问题：安全问题重新思考真正的程序应该怎样做什么是程序MiniApp & MiniProgra免安装具备通过宿主APP访问OS的能安全 稳定性能 简单回归双线程渲染层逻安全问题UI 代 户 码 代 （ 码JS）平台组件官APIEvent户代码（HTML&CSS）原能 受限问题API框架框架（Vue.js）控制指 数 令 据SlaveMaster性能问题路由问题：前个状态丢失（滚动条位置、数据单应多 WebviewebviewbviewiframeS PA双线程 + 多 Webview通信模型渲染层逻辑层Page 1Page 2Page 3

7、13_1Web Worker= componentiframe3_2 3_32 3 找到对应的组件实例 发送数据Master渲染流程tag: div,children: text: Hello World模板msgdivDOM VirtualDOMtag: div,children: Hello WorldMiniApp Hello World数据msg: MiniApptext: MiniApp命周期PageWeb WorkerInitedInitInitInitedbeforeCreatecreatedRenderInitial DataCreateComponentReadyonRead

8、yonHideRerenderRerenderSend DataSend DataAliveonHideonShowonShow路由渲染层逻辑层Page 1Page 2Web Workeriframe 回退 打开新 创建完成 创删建除iframe 创建组件Master屏渲染性能4663ms50003750250012500239ms屏渲染往返性能6.5ms75.253.51.72ms1.750往返原能受限安全 稳定性能 简单状态丢失底层技术的应场导航IDE插件Figma插件系统TrelloPower-Ups360PC程序其他总结：OS能 + SPA OS能 + SPA + 沙箱 OS能 + SPA + ShadowDOM（Close） OS能 + 多iframe + 沙箱单线程双线程单线程 + ShadowDOM双线程 + 多WebView