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

上传人(卖家):无敌的果实 文档编号:2527340 上传时间:2022-04-29 格式:PPTX 页数:74 大小:12.05MB
下载 相关 举报
360 PC 小程序底层架构的演进与探索.pptx_第1页
第1页 / 共74页
360 PC 小程序底层架构的演进与探索.pptx_第2页
第2页 / 共74页
360 PC 小程序底层架构的演进与探索.pptx_第3页
第3页 / 共74页
360 PC 小程序底层架构的演进与探索.pptx_第4页
第4页 / 共74页
360 PC 小程序底层架构的演进与探索.pptx_第5页
第5页 / 共74页
亲,该文档总共74页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述

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

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 办公、行业 > 常用办公文档
版权提示 | 免责声明

1,本文(360 PC 小程序底层架构的演进与探索.pptx)为本站会员(无敌的果实)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|