本文包含两个部分。第一部分是百度智能迷你程序的总体框架和演变。它主要讨论了百度小程序开发，百度智能框架和百度 -Host操作保证的完整过程；第二部分是 该程序框架的性能优化主要是谈论整个小程序的启动过程，从开发人员的角度来看，有哪些重要的优化点。

百度智能计划的整体框架和进化

整个移动互联网一直在寻找NA和H5之间的权衡。 NA具有良好的表现和强大的能力； H5更灵活。我认为渲染分为两个派系，一个派系是NA渲染学校，另一个派别称为H5渲染学校。 NA渲染学校是RN等代表性的。网络渲染学校，例如百度的光线应用程序和稍后进行的小程序。

1。开发完整的过程概述

曾经制作的Web渲染派别的三种代表性产品是轻型应用程序，直接覆盖范围和小程序。

小程序受到限制有两个主要原因：

如何受到限制，有两个要点：

写作语言不再直接写HTML，而是使用自定义语言天鹅写作。

2。智能小程序框架

（1）整个开发和操作的过程

让我们简要介绍整个百度智能迷你计划的开发过程。

（2）百度智能迷你计划框架swan

上图是智能小程序的框架，该小程序在内部被命名为天鹅。

分层结构如下：

3。核心结构

（1）前角

让我们从正面的角度看一下双堆结构。主机客户可以运行多个小计划并保持一段时间的生存状态。每个小程序都有执行框架JS和开发人员的JS，一个对应于多个（表示用户可见界面）本质

（2）客户角度

从客户端的角度来看，上图所示的双堆结构负责执行JS，有两种实现方法，或JS （V8/），JS引擎更有效； ， 放;以及通过消息总线的通信。

它不支持BOM，DOM和Web-API。小程序只能呼吁向外界开放的能力。

（3）小程序NA组件与界面之间的关系

从经验的角度来看，小程序的体验比H5更好，其中一个是小程序将某些NA功能和UI集成到小程序中。小程序的主体渲染仍然基于H5技术。接下来，让我们谈谈如何将NA元素集成到UI接口中。

Na元素和H5之间有两个关系，与贴片和同一层之间的关系。

模式关系：Na元素在H5中不在同一层上，Na浮在H5上方，H5的所有元素都不能放在Na元素上。因为它不在一楼，所以有必要处理滚动连锁。当检测到滚动N像素时，NA元素也需要滚动N像素。

相同的层关系：Na元素在H5层上，并且可以将天然H5按在Na元素上。

贴片和同一层的接口 - 级树与上面相同。

让我们举一个相同层的视频组件的示例。视频组件相对复杂，有4层。第一层是视频层，即原始视频的图像，第二层是弹片层，第三层是用于视频控制的控制层（例如开始，按钮的悬架） ，插槽层的第四层以及视频上方的视频漂移。 H5元素将放在此层上。

在同一层处理机制中，首先在H5上播放特殊的标签和属性（开发人员写为H5）。该区域将被插入播放器，以便将玩家直接绘制在其到达同一层上。上述弹幕，控制和插槽由H5层实现。插槽层可以视为一个容器，例如编写一个容器，其所有子元素都将放在插槽上。

NA组件的技术解决方案与同一级别不同，和iOS也不同。例如，在iOS上，如果设置了某些组件过度流量，则自然会支持这组东西，但是需要浏览器核心来支持它。

4。迷你计划多宿主操作保证

百度智能迷你程序是一个开放系统，可以在主机上方运行。如何确保多主机上的小程序操作经验的一致性？

在每个主机集成了我们的小程序框架之后，我们必须首先运行CTS测试。通过它后，您可以获得一个小程序列表以进行分发。

对于可选功能，并非每个主机的所有功能都需要实现。例如，一些AI功能，推动功能。

如果小程序使用可选能力怎么办？

这两种方法是和主机之间的两种选择机制。小程序可以选择我要分发的平台，并且主机还有权选择要分发的主机。第二个是小程序兼容。

机制

上图是标记为红色的机制。当主机有一些自定义要求时，可以使用此机制。作为主持人，您需要做两件事。一种是在JS层上写一组接口。另一个是在接口实现层中实现一组功能。如果主机认为这种能力是一般的，则可以反馈提案。批准审查后， MINI计划团队将将该提案合并到开源框架中。

5。节摘要

百度智能迷你计划框架绩效优化实践

首先从用户的角度看一个小程序的加载过程。

1。智能迷你程序加载过程

以微博为例，如上图所示。

2。百度智能迷你计划

（1）性能基线

百度迷你计划在2019年底建立了FMP索引。开发人员平台上显示的名称是“上级”。

我们在线计算一个80点点，需要1.9。什么是80分？例如，有100个请求，然后我们对请求的时间消耗进行排序。第80请求消耗80点。

（2）性能历史曲线

如上图所示，2019年百度迷你程序性能优化的历史曲线。FP框架层始终优化了近3s的当前1.1。百度迷你计划的目标是让小程序无线接近NA体验。

3。开始过程

接下来，从开发人员的角度来看，我们还能优化什么？

让我们首先查看启动过程，然后所有启动逻辑简单的串行列表（实际上有一些并行的步骤）。

4。性能优化

开发人员可以做到两个主要的优化。一个是一个小程序包的卷，另一个是业务数据。

接下来，我使用三点来解释开发人员可以做什么。

（1）软件包卷优化

建议将包装的体积保持在1m之内。为什么？

因为我们有一个统计，如果您需要在打开下载程序包时打开下载软件包，则此发布时间将占我们整个长度的60％。 1M软件包，80点速度需要1S+才能下载。因此，请控制自己的袋子的体积。我们只是在看80分。当我们拉到90分和99分时，这是一个非常陡峭的曲线，非常严重。

优化机制

有两种技术：一种是分包技术和独立的分包技术，另一种是资源压缩。

小程序有很多页面，但并非所有页面都是高光伏页面。用户很少单击许多页面。这些页面可以放在我们的分包合同上，主袋放在我们的高光伏页面上。

分包合同不能独立操作。例如，从搜索饲料分配中，它需要在运行时下载我们的主袋，但是由于概率较低，它不会影响大部分情况。简而言之，非关键页面用于使用分包技术剥离非临界页面。

在剥离非临界页面后剥离非临界页面后，小程序包的音量剥离后，该怎么办？

SO称为独立性意味着您可以在下载此软件包后不下载主要软件包后运行。此时主包和独立分包合同之间的区别在于，小程序必须始终具有入口。此入口的独立分包商称为主包。

通过这两种技术，可以减少袋子的尺寸，并将其保持在1m之内。

我们已经分析了一些小程序，发现一些尸体包含PC图片，这无疑会增加袋子的体积。该建议如下：

APP-JS需要通过子包装解决。我们最终必须达到什么目标？

（2）数据拉

数据图的目的是快速允许接口具有内容并减少用户的白色屏幕时间。即使用户与断开连接，某些数据也会脱机缓存。

如上图所示，提到了业务骨架屏幕和框架骨架屏幕。现在，许多小程序将参考H5的实现，并将H5的逐渐加载骨架屏幕用于我们的小程序。使用此技术后，它将减慢实际内容显示。我们的统计数据可能延迟了。本质

为了解决骨架屏幕内容显示的延迟，我们制作了骨架屏幕机构的框架层。为了根据我们的机制获得屏幕，将大大降低对性能的影响。在执行方面，加载框架骨架屏幕可以并行执行。

它在编写业务骨架屏幕时何时显示？

如上图所示，当您获得应用程序时，您将渲染业务骨架屏幕，并将其通知渲染线程。当然，这个过程非常慢。尽管您使用骨架屏幕，但在骨架屏幕和用户点击期间，有很多白色屏幕时间。使用框架骨架屏幕，将解决白色屏幕时间问题。使用框架屏幕，将需要一些或多或少的时间。尽管它是平行的，但仍在抓住手机的资源。

因此，总的来说，我们不建议从客户的角度或站在框架上使用，但我们不反对它。如果要使用它，请使用框架骨架屏幕最小化效果。

我摘要的优化主要是两个点。第一个是较早的，第二个是较少的。

首先是提早发送，请求为时已晚，当然显示相对较慢。建议将网络请求提交其中。这是我们向小程序开放的第一个事件。许多小程序将放置在页面中，这相对较慢。这两次是在线上的80分，关于差异〜。第二个没有阻止。我经常看到一些小程序。聚在一起后，它必须等待用户的授权和定位。通常，定位涉及XY坐标，但是一旦定位涉及高度，就需要打开GPS，因此性能将较慢2s至3s。如果您不需要高度，请不要设置它，否则它非常慢。其他微型程序将允许用户在使用时授权。如果可能的话，建议在需要授权时提示用户，以使用户不喜欢它并可以加快启动加快。

小程序运行后，可能会有数十个甚至数百个网络请求。除了自己的业务外，可能还必须播放小程序，这将在很大程度上影响我们的网络速度。因为一般主机将在底部网络库中设置一个线程池，如果您问太多，则必须排队。 不知道请求是核心请求还是非核心请求，并且只能排队。如果提出一些要点，则业务将被阻止。简而言之，首先需要在整个页面上显示的数据首先显示，而非临界请求则延迟。第二个是仅拉一个屏幕并加载段。

（3）渲染

该操作更昂贵，最小化数据的数量和数量。

如上图所示，它是非常核心的API。当网络数据返回时，内容只能在驱动器渲染后才显示在接口上。

上图是优化前后优化的比较。我们可以看到，即使1K数据也需要约20ms。如果JS用于执行，首先，A JS，A线程，线程和变为C层，然后通过Java将其变成Java。然后，我必须在到达后逆转，所以我无法得到。尽管我们进行了一些优化，但使其优化并通过内核进行切换非常昂贵。

发现在使用过程中使用了一些小程序，并且使用不当。以下是要注意的要点。

5。绩效自我检查

性能自我检查的三个阶段，即开发阶段，测试阶段和发布之后。

6。章节部分

总体评论如下。

推荐

在“ Vue ”的视频类中，讲师Tang 将教您开发一个基于Vue的完整大型开源 Pro，从开发，测试，包装到最终发布，并努力将其构建成一个10,000个标准的项目，因此您可以独立于Vue -End项目！

现在，拼写一个组+密码[]，您可以享受折叠，节省40！限于前50名！

扫描代码审判阅读