百度开源小程序框架的架构演进和性能优化实践
<img src="https://mmbiz.qpic.cn/mmbiz_jpg/XIibZ0YbvibkUicFUbic5jFN2pWr6J87ntZofBVRDDWPicp83OozxXVYsiaGJ0TwjgaGqdf70IvmSSNlaKNPJhiaXJ6nQ/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">作者 | 百度智能小程序<span style="color: black;">开发</span>部</p>本文转载自公众号百度架构师本文共<span style="color: black;">包括</span>两部分，<span style="color: black;">第1</span>部分是百度智能小程序整体的框架及演进，<span style="color: black;">重点</span>讲百度小程序<span style="color: black;">研发</span>全流程概况、百度智能小程序框架，以及百度小程序多宿主运行<span style="color: black;">保证</span>；第二部分是百度小程序框架的性能优化，<span style="color: black;">重点</span>讲<span style="color: black;">全部</span>小程序的<span style="color: black;">起步</span>过程，以及从<span style="color: black;">研发</span>者<span style="color: black;">方向</span>，有<span style="color: black;">那些</span><span style="color: black;">要紧</span>的优化点。<span style="color: black;">百度智能程序整体框架及演进</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">全部</span>移动互联网<span style="color: black;">始终</span>是在 NA 和 H5 之间寻找权衡，NA 的性能好、能力强；H5 灵活性更高。我认为渲染分为两派，一派<span style="color: black;">便是</span> NA 渲染派，一派叫做 H5 渲染派。NA 渲染派，比较有<span style="color: black;">表率</span>性的如 RN 、 Flutter ；Web 渲染派，<span style="color: black;">例如</span>百度的轻应用，以及之后做的小程序。</p><span style="color: black;">1. <span style="color: black;">研发</span>全流程概览</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4QMg2AiayHIVPVKWsaqp9w6R4pAMc9jKkCiaweK8GnzImptLGTRiaVQia09g/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">百度曾经做过的 Web 渲染派的三个<span style="color: black;">表率</span><span style="color: black;">制品</span>，分别是轻应用、直达号和小程序。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">轻应用，是 H5 + 端能力。它是一个标准的 H5，<span style="color: black;">增多</span>了<span style="color: black;">有些</span> NA 的 API，<span style="color: black;">例如</span>定位等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">直达号，在技术层面跟轻应用是<span style="color: black;">同样</span>的。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">小程序，本质上是一个受限的 H5 + <span style="color: black;">海量</span>丰富的 API + UI 组件。<span style="color: black;">此刻</span><span style="color: black;">咱们</span>给小程序<span style="color: black;">供给</span>的 API 有 300 多个，组件有 30 多个，组件是有界面的。<span style="color: black;">例如</span>，视频、地图 。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">为何</span>小程序要受限，<span style="color: black;">重点</span>有两个<span style="color: black;">原由</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">保持体验的一致性。H5 太过灵活，JS 随时<span style="color: black;">能够</span>去改变界面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">安全<span style="color: black;">思虑</span>。<span style="color: black;">由于</span><span style="color: black;">咱们</span><span style="color: black;">供给</span>了<span style="color: black;">海量</span> API 和组件，且这些都是很底层的<span style="color: black;">有些</span>能力，<span style="color: black;">例如</span><span style="color: black;">tel</span>号码、账号，肯定<span style="color: black;">不可</span>轻易开放给<span style="color: black;">大众</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">怎么受限，<span style="color: black;">重点</span>有两点：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">编写语言，<span style="color: black;">再也不</span>是直接写 HTML ，而是用自定义语言 swan 来编写 。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">runtime 层有两个栈，一个是渲染栈，一个是 JS 执行栈，这两个栈从<span style="color: black;">理学</span>上隔离，以<span style="color: black;">保证</span>安全性。</p><span style="color: black;">2. 智能小程序框架</span> （1）<span style="color: black;">研发</span>运行全流程<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4QFbvJ2qQEQic6ko7RYnsA30Dfq65LcrTSlTeic8PkbPaoBwtlxCY8NXww/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">先简单介绍一下<span style="color: black;">全部</span>百度智能小程序的<span style="color: black;">研发</span>流程。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span><span style="color: black;">研发</span>者用 swan 写布局；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接着<span style="color: black;">经过</span><span style="color: black;">研发</span>者<span style="color: black;">工具</span>打包，上传到<span style="color: black;">咱们</span>的小程序 B 端服务器；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>是小程序的审核流程，有机审、人审；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后是用户点击小程序时，客户端请求小程序 C 端服务器，C 端服务器再从 B 端服务器获取小程序包。<span style="color: black;">全部</span>过程都是加密传输，<span style="color: black;">能够</span><span style="color: black;">保准</span>代码的安全。</p>（2）百度智能小程序框架 -SWAN<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4Qn7z0zVjeVNkOFaw1FuIuI2jdN0wJICsn0H4b1gPVNMxFvZjmlaC2Ow/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上图是一个百度智能小程序的框架，<span style="color: black;">咱们</span>内部命名为 SWAN。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">分层结构如下：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最上层是<span style="color: black;">研发</span>者<span style="color: black;">基本</span>库，命名为 swan-js ，<span style="color: black;">研发</span>者直接和这层打交道。swan-js 负责两件事情：即 swan 代码转为 HTML，变成 WebView 可运行程序；客户端端能力的封装暴露。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">再下一层是 swan-native。<span style="color: black;">这儿</span>面最核心的是 API 和组件的 NA 实现。其中双栈管理<span style="color: black;">亦</span>在这一层，<span style="color: black;">另一</span>标红的 Extension 用于<span style="color: black;">研发</span>者宿主<span style="color: black;">自己</span>能力扩展<span style="color: black;">运用</span>，<span style="color: black;">例如</span>，贴吧宿主期望<span style="color: black;">增多</span>个发帖能力，就<span style="color: black;">能够</span><span style="color: black;">经过</span>此机制。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">再下面这层叫 Porting Layer。这层是百度小程序为了实现开源，<span style="color: black;">增多</span>的一层与宿主的接口层。最下面这一层是宿主<span style="color: black;">基本</span>能力层。<span style="color: black;">倘若</span>宿主<span style="color: black;">无</span>这些能力，<span style="color: black;">能够</span>参考百度开源的参考实现，可直接集成到宿主<span style="color: black;">运用</span>。</p><span style="color: black;">3. 核心结构</span> （1）前端<span style="color: black;">方向</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4Qd6ufcV6IvmvPqMIeAvQSk8QFFOskQK8kmhSzglXG019rVbDrXlY7Aw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>从前端的视角来<span style="color: black;">瞧瞧</span>双栈结构。一个宿主客户端<span style="color: black;">能够</span>运行多个小程序，并且在一段时间内保持存活状态，<span style="color: black;">每一个</span>小程序都有一个 master 执行框架 JS 和小程序<span style="color: black;">研发</span>者的 JS，一个 master 对应多个 slave（slave <span style="color: black;">表率</span>一个用户可见的界面）。</p> （2）客户端<span style="color: black;">方向</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4QxpFGeYQTgHY9c1OibWersVGDXDfeWibwXbOD16ren32z2mQsy1qFic0pQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从客户端<span style="color: black;">方向</span>来看双栈结构，如上图所示，master 负责执行 JS，<span style="color: black;">能够</span>有两种实现方式，WebView 或 JS 引擎（V8/jscore），JS 引擎的效率更高；slave 的展现有 WebView，为了加快 WebView 的创建速度，设置 cache；master 和 slave 的通信<span style="color: black;">经过</span><span style="color: black;">信息</span>总线。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">master 不支持 BOM、DOM 和 WEB-API，小程序只能调用对外开放的能力。</p> （3）小程序 NA 组件与界面关系<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4QibMRH8mKmOrrjsuMsHDd11cKyHExUJXMeDrvaQ3v3Kx3HjnpGPGsSqQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从体验上看，小程序的体验要好于 H5，其中有一点<span style="color: black;">便是</span>小程序会把<span style="color: black;">有些</span> NA 的能力和 UI 融合到小程序里面去。小程序的主体渲染还是基于 H5 技术，接下来<span style="color: black;">咱们</span>讲一下 NA 元素<span style="color: black;">怎样</span>融入 UI 界面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">NA 元素与 H5 的关系有两种，贴片关系、同层关系。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">贴片关系：NA 元素在 H5 不在同一层，NA 浮在 H5 之上，H5 所有元素都不<span style="color: black;">能够</span>放到 NA 元素之上。<span style="color: black;">由于</span>不在一层，就<span style="color: black;">必须</span>处理滚动联动，当检测到 WebView 滚动 n 个像素， NA 元素<span style="color: black;">亦</span><span style="color: black;">必须</span>滚动 n 个像素。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">同层关系：NA 元素在 H5 这一层，H5 的原生<span style="color: black;">能够</span>压在 NA 元素之上。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4Q83NBlVZSVeFX5gjrSX2Fpu4R14wJVIDC8BQiaz9e421jGqclQwulOfA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">贴片、同层的界面层级树如上。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4QITmw8TQ5InLNKAGoR7ClSC351UPbDfRIeINa9AZtZGiaCgVzQ9Lu6icQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>举一个视频组件同层的例子。视频组件比较<span style="color: black;">繁杂</span>，有 4 层。第 1 层是视频层，即原始视频的图像，第 2 层是弹幕层，第 3 层是用于视频<span style="color: black;">掌控</span>的控件层（<span style="color: black;">例如</span>，<span style="color: black;">起始</span>、暂停按键），第 4 层 Slot 层，视频上面漂的 H5 元素将被放到这层。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">同层处理机制，先在 H5（<span style="color: black;">研发</span>者写的 swan 会被转为 H5） 上打一个特殊的标记先占位，属性 inline；浏览内核把这个区域的 surface 拿出来给到 NA 层；<span style="color: black;">而后</span>，小程序框架会把这个区域 surface 塞给播放器，让播放器直接在 surface 上面绘制，达到同层。上面的弹幕、控件、 Slot ，都是 swanjs 层 H5 实现 ，Slot 层<span style="color: black;">能够</span>认为是一个容器，例如写一个 video，其所有的子元素都会放在 Slot。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">NA 的组件同层的技术<span style="color: black;">方法</span>还不太<span style="color: black;">同样</span>，安卓和 iOS <span style="color: black;">亦</span>是有些区别的。像在 iOS 上，<span style="color: black;">倘若</span>有些组件设置 over-flow ，它会天然支持这一套东西，<span style="color: black;">然则</span>安卓就<span style="color: black;">必须</span>浏览器内核来支持。</p><span style="color: black;">4. 小程序多宿主运行<span style="color: black;">保证</span></span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4QiaIzfBDIIiaMEuBp5YIuKK0TdSAtlLIBWZzS3fYxIR6hicfIPphm6Z2qw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">百度智能小程序是开放系统，<span style="color: black;">能够</span>运行在多宿主之上，那<span style="color: black;">怎样</span>在多宿主上<span style="color: black;">保准</span>小程序运行体验的一致性呢？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">各个宿主集<span style="color: black;">成为了</span><span style="color: black;">咱们</span>的小程序框架后，<span style="color: black;">首要</span>要跑 CTS 测试，<span style="color: black;">经过</span>之后才<span style="color: black;">能够</span>拿到小程序列表进行分发。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>可选能力部分，各个宿主不是所有的能力都<span style="color: black;">必须</span>实现。<span style="color: black;">例如</span>，<span style="color: black;">有些</span> AI 能力、push 能力。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>一个小程序用到了可选能力怎么办？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">两个办法，一是小程序和宿主之间的双向<span style="color: black;">选取</span>机制，小程序<span style="color: black;">能够</span><span style="color: black;">选取</span>我要分发到<span style="color: black;">那些</span>平台，宿主<span style="color: black;">亦</span>有权利<span style="color: black;">选取</span>要分发到<span style="color: black;">那些</span>宿主。二是，小程序做兼容。</p> Estension 机制<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4QRicbCw1qSAnuiadLH8XV3U6YJia72csFd9HwwibBTKrCGRmBdxr35ia7TXQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上图所示，标红的是 Extension 机制，当宿主有<span style="color: black;">有些</span>定制化的<span style="color: black;">需求</span>时，<span style="color: black;">能够</span><span style="color: black;">运用</span>此机制。<span style="color: black;">做为</span>宿主，<span style="color: black;">必须</span>做两件事情，一是在 JS 层<span style="color: black;">必须</span>写一套接口；二是在 Porting Layer 接口实现层实现一套能力。<span style="color: black;">倘若</span>宿主觉得这个能力是通用的，<span style="color: black;">能够</span>反馈提案，审核<span style="color: black;">经过</span>后，百度小程序团队会将提案合并到开源框架里。</p><span style="color: black;">5. 章节小结</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4QgrCt5dVLI8KNzhFpAd4UKv7JJYobcXTVpwfdnrF7QR0Q1xbiaRsFzhA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p><span style="color: black;">百度智能小程序框架性能优化实践</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>从用户视角<span style="color: black;">瞧瞧</span>一个小程序的加载过程。</p><span style="color: black;">1. 百度智能小程序加载分<span style="color: black;">周期</span>过程</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4QxUO836SShsCsDR4juEicibibAXCSd7uMNDgkv6UoVt57o7cQngde0Hjpw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">拿<span style="color: black;">博客</span>举例，如上图所示。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>小程序被<span style="color: black;">起步</span>后，先是一个 Loading 的过程，上面的 title 和下面的 tab（框架 NA 实现）<span style="color: black;">表示</span>出来。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第二张<span style="color: black;">照片</span><span style="color: black;">咱们</span>定义为 FP（First Paint ）<span style="color: black;">周期</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第三张图下面有搜索框了，这其实是小程序包里面的内容。它是<span style="color: black;">经过</span> initdate 接口初始化渲染出来的，此<span style="color: black;">周期</span><span style="color: black;">咱们</span>定义为 FCP（ First Contentfull Paint ）<span style="color: black;">周期</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">第四张图，是小程序从网上拉到了实时的内容，<span style="color: black;">而后</span>更新到界面，<span style="color: black;">咱们</span>将其定义为 FMP（First Meaningful Paint） <span style="color: black;">周期</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后一张图，所有的元素都<span style="color: black;">已然</span>拉下来并展示了，用户<span style="color: black;">能够</span>操作任何一个位置，<span style="color: black;">咱们</span>将其定义为 TTI (Time to Interative) <span style="color: black;">周期</span>。</p><span style="color: black;">2. 百度智能小程序</span> （1）性能基线<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">百度小程序在 2019 年底<span style="color: black;">创立</span>了 FMP 指标，它在<span style="color: black;">研发</span>者平台展示的名字为“上屏时间”。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>统计了线上的一个 80 分位点，耗时是 1.9s。什么是 80 分位点？<span style="color: black;">例如</span>，有 100 个请求过来了，<span style="color: black;">而后</span><span style="color: black;">咱们</span>把请求的耗时排序，第 80 个请求的耗时，<span style="color: black;">咱们</span>就认为是 80 分位点。</p> （2）性能历史曲线<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8qgHhXPHt0t39ayvgcOh4Qp3okEWI0U5xseyRTN4L8KBtHSsDpxN88XMTx7YL5rWGBeQtkcp7BKw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如上图所示， 2019 年百度小程序性能优化的历史曲线。FP 框架层从接近 3s <span style="color: black;">始终</span>优化了<span style="color: black;">此刻</span>的 1.1s <span style="color: black;">上下</span>。百度小程序的<span style="color: black;">目的</span>是让小程序<span style="color: black;">没</span>线接近 NA 体验。</p><span style="color: black;">3. <span style="color: black;">起步</span>流程</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接下来，<span style="color: black;">咱们</span>从<span style="color: black;">研发</span>者<span style="color: black;">方向</span>看，还能优化什么？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>先看一下<span style="color: black;">起步</span>流程，所有的<span style="color: black;">起步</span><span style="color: black;">规律</span>简单串行<span style="color: black;">陈列</span>（<span style="color: black;">实质</span>是有<span style="color: black;">有些</span>步奏是并行的）。</p><span style="color: black;">4. 性能优化</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">研发</span>者能够做的性能优化<span style="color: black;">重点</span>有两部分。一是小程序包的体积，二是业务数据。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接下来，我用三点<span style="color: black;">来讲</span>明<span style="color: black;">研发</span>者<span style="color: black;">能够</span>做什么。</p> （1）包体积优化<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">意见</span>包体积保持在 1M 以内，<span style="color: black;">为何</span>呢？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">由于</span><span style="color: black;">咱们</span>统计了一下，<span style="color: black;">倘若</span>打开当次<span style="color: black;">必须</span>下载包，则这次的<span style="color: black;">起步</span>时长会占到<span style="color: black;">咱们</span><span style="color: black;">全部</span>时长的 60%。1M 的包，80 分位速度<span style="color: black;">必须</span> 1s+ 才能下载完成。<span style="color: black;">因此</span>要<span style="color: black;">掌控</span>自己的包的体积。<span style="color: black;">况且</span><span style="color: black;">咱们</span><span style="color: black;">此刻</span>还只是看 80 分位，当<span style="color: black;">咱们</span>拉到 90 分位，99 分位，这个是一个非常陡的曲线，恶化很严重。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">包体优化机制</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有两个技术：一是分包技术和独立分包技术，二是资源压缩。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">分包技术 & 独立分包技术分包技术</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个小程序有<span style="color: black;">非常多</span>页面，但不是所有的页面都是高 PV 页面。<span style="color: black;">非常多</span>页面是用户很少点到的，<span style="color: black;">能够</span>把这些页面放到<span style="color: black;">咱们</span>的分包去，主包放<span style="color: black;">咱们</span>高 PV 的页面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">分包<span style="color: black;">不可</span>够独立运行，<span style="color: black;">例如</span>，从搜索 feed 分发过去，它运行时<span style="color: black;">必须</span>把<span style="color: black;">咱们</span>主包下载下来，<span style="color: black;">然则</span><span style="color: black;">由于</span>它的概率低，不会影响绝大<span style="color: black;">都数</span><span style="color: black;">状况</span>。简而言之，<span style="color: black;">便是</span>用分包技术把非<span style="color: black;">重要</span>的页面剥离出去。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用分包技术把非<span style="color: black;">重要</span>的页面剥离出去之后小程序包的体积还是大的话怎么办？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">独立分包技术</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">所说</span>独立，<span style="color: black;">便是</span>说下载完这个包之后就<span style="color: black;">能够</span>运行，<span style="color: black;">没</span>需下载主包。此时的主包和独立分包的区别<span style="color: black;">便是</span>，小程序总要有一个入口，这个入口的独立分包，<span style="color: black;">咱们</span>就命名为主包。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>这两项技术来减小<span style="color: black;">咱们</span>的包体<span style="color: black;">体积</span>，将其保持在在 1M 以内。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">资源压缩</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>分析过<span style="color: black;">有些</span>小程序，<span style="color: black;">发掘</span>有的包体里<span style="color: black;">包括</span> PC <span style="color: black;">照片</span>，这<span style="color: black;">没</span>疑<span style="color: black;">增多</span>了包的体积。<span style="color: black;">意见</span>如下：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">把<span style="color: black;">照片</span>放到服务器，不要放在包里面。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">压缩<span style="color: black;">照片</span>体积，<span style="color: black;">例如</span>，把 png 改为 jpeg 格式<span style="color: black;">这般</span>体积<span style="color: black;">能够</span>减少 90%（不<span style="color: black;">思虑</span>透明度<span style="color: black;">状况</span>）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">剔除<span style="color: black;">没</span>用资源。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">App-js <span style="color: black;">必须</span><span style="color: black;">经过</span>分包来<span style="color: black;">处理</span>，<span style="color: black;">最后</span><span style="color: black;">咱们</span>要达到什么<span style="color: black;">目的</span>？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">单个包<span style="color: black;">掌控</span>在 1M 以内。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">文件数<span style="color: black;">掌控</span>在 200 个以内。</p> (2) 数据拉取<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">数据拉取的目的是快速让界面有内容，减少用户的白屏时间。即<span style="color: black;">运用</span>户是断网的，<span style="color: black;">亦</span>给他离线缓存<span style="color: black;">有些</span>数据。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如上图所示，<span style="color: black;">这儿</span>面<span style="color: black;">说到</span>了业务骨架屏和框架骨架屏。<span style="color: black;">此刻</span><span style="color: black;">非常多</span>小程序都会参考 H5 的实现，把 H5 的渐进式加载骨架屏用到<span style="color: black;">咱们</span>的小程序里面，用了这种技术之后，反而会让真实的内容展示的速度变慢，<span style="color: black;">咱们</span>统计大概有 300ms 延迟。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为<span style="color: black;">认识</span>决骨架屏<span style="color: black;">引起</span>的内容展示延迟，<span style="color: black;">咱们</span>做了一套框架层的骨架屏机制。<span style="color: black;">根据</span><span style="color: black;">咱们</span>这个机制来实现骨架屏，对性能的影响就会大大减少。策略上<span style="color: black;">便是</span>在 master 做 appjs 执行时，就让 slave 加载框架骨架屏，并行执行。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">自己写的业务骨架屏，它什么时候才展示？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如上图所示，当你把 App 、page、waitNotify <span style="color: black;">通告</span>到渲染线程，到了 Ready firstRender 的时候才会渲染自己做的业务骨架屏，这个过程当然很慢。虽然你用了骨架屏，<span style="color: black;">然则</span>骨架屏和用户点击的这段时间还有<span style="color: black;">海量</span>的白屏时间。用框架骨架屏，白屏时间问题就会<span style="color: black;">处理</span>。用框架骨架屏，或多或少都会耗一点时间，虽然是并行的，<span style="color: black;">然则</span>依然在抢占手机的资源。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span>整体来看，站在客户端<span style="color: black;">或</span>站在框架的<span style="color: black;">方向</span>，<span style="color: black;">咱们</span>是不<span style="color: black;">意见</span>用，<span style="color: black;">然则</span><span style="color: black;">亦</span>不反对用。<span style="color: black;">倘若</span>要用就用框架骨架屏，影响最小。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">request 的优化，我总结<span style="color: black;">重点</span>是两点，<span style="color: black;">第1</span>要早，第二要少。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">“早”又<span style="color: black;">能够</span>分两部分<span style="color: black;">来讲</span>，一是提早发，二是不阻塞。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>是提早发，请求得太晚，展示当然比较慢了。<span style="color: black;">意见</span>把网络请求放在 onlaunch 里面，这是<span style="color: black;">咱们</span>给小程序开放的<span style="color: black;">第1</span>个事件，<span style="color: black;">非常多</span>小程序会放到 page unload 里面，这个就比较慢了。这两个时间在线上 80 分位，大概差 200ms～300ms。第二个是不阻塞，经常看到<span style="color: black;">有些</span>小程序，<span style="color: black;">一块</span>来以后，它要等用户的授权、定位。<span style="color: black;">一般</span>定位<span style="color: black;">触及</span> XY 坐标，<span style="color: black;">然则</span>定位一旦<span style="color: black;">触及</span>高度，就<span style="color: black;">必须</span>打开 GPS，<span style="color: black;">这般</span>性能又会慢 2s～3s。<span style="color: black;">倘若</span>不<span style="color: black;">必须</span>高度就不要去设置，否则非常慢。还有的小程序在<span style="color: black;">运用</span>的时候会让用户授权，<span style="color: black;">倘若</span>不授权下面什么<span style="color: black;">亦</span>不展示，阻塞了。<span style="color: black;">倘若</span><span style="color: black;">能够</span>的话，<span style="color: black;">意见</span>在<span style="color: black;">必须</span>授权的时候再提示用户，<span style="color: black;">这般</span>用户<span style="color: black;">亦</span>不反感，<span style="color: black;">亦</span>能加快<span style="color: black;">起步</span>的速度。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">“少”，主要分为两点，一是非<span style="color: black;">重要</span>请求延后，二是只拉取一屏数据。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个小程序运行后，可能有几十<span style="color: black;">乃至</span>上百个网络请求，小程序除了自己的业务还要打点，这会很大程度上影响<span style="color: black;">咱们</span>的网络速度。<span style="color: black;">由于</span><span style="color: black;">通常</span>的宿主在底层的网络库都会设置线程池，请求多了就要排队。小程序框架<span style="color: black;">基本</span>不<span style="color: black;">晓得</span>某个请求是核心请求还是非核心请求，只能排队。要是一上来全是<span style="color: black;">有些</span>打点的，业务就阻塞了。总之，<span style="color: black;">全部</span>页面<span style="color: black;">必须</span><span style="color: black;">表示</span>的数据先请求，非<span style="color: black;">重要</span>请求延后。二是只拉一屏数据，分段加载。</p> （3）渲染<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">setData 操作是较为昂贵的，<span style="color: black;">尽可能</span>减<span style="color: black;">少许</span>据量和次数。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如上图所示，setData 是一个非常核心的 API， 当网络数据回来，<span style="color: black;">仅有</span>经过 setData 驱动渲染，内容<span style="color: black;">才可</span><span style="color: black;">表示</span>到界面上。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上图是一个优化前和优化后的对比。<span style="color: black;">咱们</span><span style="color: black;">能够</span>看到，即使是 1K 的数据，<span style="color: black;">亦</span><span style="color: black;">必须</span> 20ms <span style="color: black;">上下</span>的时间。<span style="color: black;">倘若</span> js 是用 WebView 来执行，<span style="color: black;">首要</span>一个 JS string，到了浏览器有 Renderer 线程、Browser 线程，变为 C 层的 string，<span style="color: black;">而后</span>再到<span style="color: black;">咱们</span> NA ，<span style="color: black;">经过</span> Java interface，变成一个 Java string。<span style="color: black;">而后</span>到了 slave 以后还要再反过来，<span style="color: black;">因此</span>快不了。虽然<span style="color: black;">咱们</span>做了<span style="color: black;">有些</span>优化，<span style="color: black;">经过</span>内核让它变成一个内存指针优化切换，<span style="color: black;">然则</span>还是很昂贵。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">发掘</span>有些小程序在<span style="color: black;">运用</span>的过程中， setData <span style="color: black;">运用</span>有<span style="color: black;">非常多</span><span style="color: black;">欠妥</span>之处，以下是<span style="color: black;">运用</span> setdata 要<span style="color: black;">重视</span>的几点 。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">减少调用 setData 次数。goodcase：将多次 setData 合并成一次 setData 调用。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">减少 setData 数据量。badcase：新一页数据添加上之前页面数据后再调用 setData。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">变量变化只更新变量不更新对象。</p><span style="color: black;">5. 性能自查</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">性能自查<span style="color: black;">重点</span>有三个<span style="color: black;">周期</span>，即<span style="color: black;">研发</span><span style="color: black;">周期</span>、测试<span style="color: black;">周期</span>和上线后。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在<span style="color: black;">研发</span><span style="color: black;">周期</span>这部分，<span style="color: black;">咱们</span>有三个手段去性能自查，分别是工<span style="color: black;">详细</span>验评分、性能面板（在客户端上性能面板<span style="color: black;">能够</span>提示<span style="color: black;">全部</span>性能<span style="color: black;">起步</span>的耗时）以及打点系统。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在测试<span style="color: black;">周期</span><span style="color: black;">咱们</span>有两个手段，一是录屏，二是高速摄像头，这两个手段<span style="color: black;">能够</span>真实地反应用户的体验。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上线之后，有<span style="color: black;">研发</span>者平台。<span style="color: black;">怎样</span>获取技术的官方支持途径？<span style="color: black;">意见</span>去<span style="color: black;">研发</span>者文档和社群去获取技术支持。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p><span style="color: black;">6. 章节小节</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">研发</span>者可从包体积、数据请求、渲染三方面去优化性能。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">包体：1M 内。分包技术、压缩<span style="color: black;">照片</span>、<span style="color: black;">没</span>用资源剔除。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">骨架屏：<span style="color: black;">倘若</span>要<span style="color: black;">运用</span>，<span style="color: black;">意见</span>采用框架骨架屏。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">setData：减少频度、减<span style="color: black;">少许</span>据量。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">整体回顾如下图。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="data:image/svg+xml,%3C%3Fxml version=1.0 encoding=UTF-8%3F%3E%3Csvg width=1px height=1px viewBox=0 0 1 1 version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink%3E%3Ctitle%3E%3C/title%3E%3Cg stroke=none stroke-width=1 fill=none fill-rule=evenodd fill-opacity=0%3E%3Cg transform=translate(-249.000000, -126.000000) fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" style="width: 50%; margin-bottom: 20px;"></p> 活动<span style="color: black;">举荐</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">《Vue <span style="color: black;">研发</span>实战》视频课里，讲师唐金州会教你基于 Vue <span style="color: black;">研发</span>一个完整的大型开源项目 Ant Design Pro，从<span style="color: black;">研发</span>、测试、打包构建到<span style="color: black;">最后</span>的上线，并<span style="color: black;">奋斗</span>将它打<span style="color: black;">导致</span>一个万星项目，让你具备独立负责 Vue 前端项目的能力！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">现拼团 + 口令【<span style="color: black;"><strong style="color: blue;">happy2021</strong></span>】<span style="color: black;">就可</span>尽享折上折，立省<span style="color: black;"><strong style="color: blue;">￥40</strong></span> 元！仅限前 <strong style="color: blue;"><span style="color: black;">50</span></strong> 名！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">扫码试读 可以发布外链的网站 http://www.fok120.com/ 你的见解独到，让我受益匪浅，非常感谢。 可以发布外链的网站 http://www.fok120.com/
页:
[1]