1、目目录录/contentsFlutter简介实践框架及页面栈管理性能优化Flutter For WebFlutter简简介介1Flutter简介跨平台跨平台16Web页页面面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：要（而且要求快！）PM：很简单吧，下午给我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、00charCodeWASM与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、上报数据也同样不影响主线程执行。主动上报日志，收集白屏现场的日志监监控异常控异常主主动动上上报报日志日志日志分析日志分析优优化解决化解决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算子的步骤转灰度图高斯滤波器计算图像梯度非极大值抑制双阈值检测和链接025758500758080900758080500703901520Sobel算子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）计算哈希值的相似性00000000000000000000000000000000000010

106、000设计稿转界面代码的方案常规方法对方案的解决计算机视觉技术（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/“是时候表演真正的技术了。”5分钟上手第一步：安装 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、局部更新可能需要传输大量不变动的数据。方案二536456将每

129、个节点作为根节点，拆出至多两层的子树方案二自定义组件自定义组件自定义组件自定义组件自定义组件自定义组件setDatasetDatasetDatasetDatasetDatasetData将各子树传递给与根节点对应的自定义组件方案二优势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 坐坐标换标换算复算复杂杂 消失点？消失点？旋旋转时转时透透视变视变化正常化正常正交相机正交相机 坐坐标计标计算算简单简单 不用考不用考虑虑消失点消失点 旋旋转时转时透透视变视变化奇怪化奇怪难点三：打破次元壁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、加载载预处预处理理逻辑逻辑 可以保可以保证证下次下次执执行的行的时时候复用候复用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