自学《小程序性能优化实践》的笔记(一)

一、课程链接：https://developers.weixin.qq.com/community/business/doc/0002ce57c346300cccdd3ad835280
二、课程源码链接：https://gitee.com/geektime-geekbang_admin/weapp_optimize
三、了解一些概念
1、小法式优化，主如果指从小法式起头启动到首页完全衬着显现(Page.onReady事务派发)，这个进程之间的一个优化。


2、冷启动，小法式在用户装备上是第一次翻开，大概是烧毁后再次翻开。小法式第一次启动及冷启动30分钟今后被系统接管重新再启动，都是冷启动。
3、热启动，相对于冷启动而言，是小法式启动的一种优化机制。小法式进入背景30分钟之内再次进入前台，可间接从背景状态规复到前台。一些一次性流程都不会有了，如App.onLanuch、Page.onLoad及Page.onReady事务的派发。
四、小法式在启动(冷启动或热启动)流程中的一些优化要点以。
1、页面起头衬着(Page.onLoad事务派发)到首屏衬着完成(Page.onReady事务派发)这中心触及到的静态数据加载，其加载的数据量有几多，收集请求所需时候是几多，图片等静态资本加载需要的时候有几多，城市影响首屏衬着时候。此时可以利用以下来合适现实启动时辰的需求：
1）代码按需注入，小法式仅注入当前拜候页面所需的自界说组件和页面代码。（懒加载）
  ①app.json中需要设置"lazyCodeLoading": "requiredComponents"。
  ②启用按需注入后，页面json设置的一切组件和app.json中的全局自界说组件，城市被注入和加载（所以，不用什么组件都写在app.json中）。
  ③插件包和扩大库今朝暂不支持按需注入。假如需要实现插件按需加载，可以斟酌将插件置于一个分包，并经过「分包异步化」的形式异步引入。
2）用时注入 ，可以指定一部分自界说组件不在小法式启动时注入，而是在真正衬着的时辰才停止注入。
① app.json中需要设置"lazyCodeLoading": "requiredComponents"。
②为自界说组件设置占位组件，组件就会自动被视为用时注入组件：
   a）每个页面内，第一次衬着该组件前，该组件都不会被注入；
   b）每个页面内，第一次衬着该组件时，该组件会被衬着为其对应的占位组件，衬着流程竣事后起头注入；
   c）注入竣事后，占位组件被替换回对应组件。
3）利用自力分包和分包预加载
① 利用分包 | 微信开放文档
② 自力分包，自力于主包和其他分包运转。从自力分包中页面进入小法式时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。

1. app.json中增加设置
2. "subpackages": [
3.    {
4.      "root":"goods", // 分包的地址
5.      "pages": [ // 指定页面，是分包地址下面的相对地址
6.        "pages/detail/index"
7.       ],
8.      "independent": true // 加上这个设置就是自力分包，不加普通分包。
9.    }
10. ]

复制代码

一）影响 ，a）利用getApp()接口的时辰，取不到全局的利用实例了，在分包的页面的js文件中顶部增加：

1. const app = getApp({ allowDefault: true })
2. // 自力分包中getApp为空，这里设备默许值，答应界说默许的内容
4. /*app.globalData = {
5.   Custom:{width:87,height:32,left:320,top:24,right:407},
6.   CustomBar:60,StatusBar:40,tabbar_bottom: "n"
7. }*/
8. app.globalData ={StatusBar:40}
9. Page({
10. data: {
11.    StatusBar: app.globalData.StatusBar+6,
12.   }
13. })

复制代码

可以只界说，自己需要的信息： app.globalData ={StatusBar:40}。
b）从自力分包的页面跳到主页面的时辰，这个时辰主包与主页面也会加载，小法式会帮我们把自力分包中getApp界说默许的内容与原本的信息停止合并
c）作为一个自力的分包，它被加载的时辰，主包及主页面还有其他页面实在是不加载的。主包中的组件也是不加载的。
二）自力分包里面利用占位组件，进一步削减自力分包代码包的一个体积以及在主页中利用占位组件。
占位组件，就是给自界说组件放置一个替人，在实在的自界说组件加载并注入之前先用替人展现，以此来进一步优化启动的性能。
a)组件的分包异步化及主页中占位组件的利用。将首页里面用到的一切的自界说组件全数移到一个分包里面，然后再利用占位组件提早加载它们，这样便可以进一步进步主页的加载速度了。
i. app.json中设置

1. "subpackages": [
2.    {
3.      "root":"index_addons",
4.      "pages": []
5.    }
6. ]

复制代码

ii. 将组件由全局援用改成页面援用，而且停止占位的组件声明。页面或自界说组件对应的 JSON 设置中的componentPlaceholder字段用于指定占位组件

1. {
2.   "usingComponents": {
3.       "stopwatch":"/index_addons/components/stopwatch_nw/index",
4.   },
5.   "componentPlaceholder": {
6.     "stopwatch": "view"
7. // view是作占位组件的一个称号,占位组件我们可以利用标准组件，也可以利用自界说组件，
8. // 在利用自界说组件的时辰也要求我们先在usingComponents列表内先声明，
9. // 在stopwatch组件的真身被从index_addons分包里边加载完成之前，它将以view的一个形式停止展现，
10. // view在这里它是一个万能的占位组件,利用它我们不需要额外的界说,它默许也有一个slot插槽可以包容一些简单的文本 一些组件
11. // 一般利用view即可
12.   }
13. }

复制代码

b）利用封面页，是一种非技术的优化首页加载性能的方式。它的感化是加载封面页地点的主包里边的一切的根本内容，包括类库，插件和自界说组件等，加载完成以后，跳转到实在的产物首页。它位于主包内，而实在的首页则移动到别的的一个代码包index里面。这类优化方式出格适用于产物比力复杂，分包共用的根本库又比力大，只能放在主包中这样的一个产物小法式。(课程代码小节：5.1)
三）JS代码的分包异步化，小法式供给的分包异步化才能不但针对组件代码，插件也可以异步化一言以蔽之，另一个分包内的一切，只要我们想利用，都可以经过异步加载的方式拿过来利用。
③分包预加载
在分包的页面，假如想要拜候主页，就在该分包里面开启对主包的一个分包预加载，提早加载，方便用户的后续的一个快速拜候。

1. app.json中增加设置
2. "preloadRule":{
3.    "goods/pages/detail/index":{  // 页面做key, 分包的root/分包里面的页面的地址
4.       "network": "all", // 一切收集情况都可以分包预加载，如wifi
5.       "packages": ["__APP__"] // 对哪些分包实现预加载，此时代表主包
6.   }
7. }

复制代码

④总结，a）小法式默许的tabBar以及经过app.json设置文件设置的自界说tabBar都要求图标必须放在当地，不能停止收集化，再加上tabBar页面只能利用wx.switchTab接口停止跳转等等这些缘由，tabBar导航栏最好是利用自界说的这类方式去实现。 (课程代码小节：4)  b）一切在项目根目录下的子目录以及文件假如没有被分包朋分的话，默许城市打包到主包里面，包括app.json中启用的全局插件 组件及第三方的类库等等这些也城市打包到主包里边，所以主包一般情况下只放一个首页以及根本的不能再根本不能再删减的内容，像其他的这些页面其他的这些自界说组件，在分包理论里面完全可以移到分包里面去。c）对于分包的一个设置只需要指定一个root目录，该目录下一切的文件它城市自动被朋分到这个分包里面，对于预备在微信平分享的相对自力的页面，预备在微信里 微信群 朋友圈 然后分享传布的这些页面合适界说为自力分包。d）自力分包有返回主页的按钮，假如用户对当前这个产物他感爱好，他返回首页的几率会比力大，所以在这类情况下，一般我们在自力分包里面设备对主包的一个分包预下载。e）对于预备随时用于交际传布的页面，它代码包的体积是越小越好。
4）
利用骨架屏，页面的内容和衬着的时候并没有削减，用户期待的时候还是那末多，只是增加了用户期待时辰的体验。（静态导航页合适利用初始衬着缓存，静态详情页合适利用骨架屏；用了骨架屏今后就不要再利用初始衬着缓存了。反之也是一样的。）
5）初始衬着缓存，骨架屏是在页面完全加载今后，由微信开辟者工具负责天生的一个色块状页面结构，在运转时与骨架屏对应的还有一项技术就是初始衬着缓存。
① 初始衬着缓存，在小法式页面的第一次被翻开的时辰，微信就将这个页面的初始衬着的成果记录下来，然后写入到一个姑且的缓存地区里面，在这个页面第二次翻开的时辰，微信它检察缓存里面有没有这个页面，假如是有 间接就把这个页面展现给用户，缓存的页面它是没法响利用户的交互事务的，需要等到这个页面实在衬着完成今后这个页面才可以一般拜候。
一切的原生组件它都不在这个缓存之列。
初始衬着缓存只合适这个页面节点数目比力少、比力简单、内容不经常变化、用户又经常拜候同时wxml节点的结构又很是简单的这样的一些进口页面去利用。
用了骨架屏今后就不要再利用初始衬着缓存了。反之也是一样的。
用于供给导航功用的一个首页大概是二级页面，一般合适利用初始衬着缓存。而这个页面经常变化的时辰，时效性较高的静态详情页面，这类页面它合适利用骨架屏，固然了假如这个页面想让用户尽早看到内容的话。（静态导航页合适利用初始衬着缓存，静态详情页合适利用骨架屏）
② 在页面json文件中设置静态初始衬着缓存 "nitialRenderingCache":"static" 。静态初始缓存以页面初始的data数据与页面里面的wxml标签代码配合衬着成一个页面在当地缓存，鄙人一次用户拜候页面的时辰，不必等逻辑层代码初始化终了它就会将缓存的页面内容先发给用户展现，在一定水平上，初始衬着缓存的页面相当因而一个静态化的当地化的骨架屏页面。
③  在页面json文件中设置静态初始衬着缓存"nitialRenderingCache":"dynamic"。在页面加载完成今后，经过挪用setInitialRenderingCache的一个方式设备需要静态缓存的数据。

1. onReady(){
2.   // 拉取轮播图数据
3.   ;(()=>{
4.     wx.request({
5.         url,
6.         success: res=>{
7.           if(res.errMsg==='requset:ok'){
8.                const {swipers} = res.data.data
9.                 this.setData({swiperlist:swipers})
10.                    // 数据加载完成今后 ,设备静态缓存数据
11.                    this.setInitialRenderingCache({
12.                         swiperlist:swipers // swiperlist 是在data{}中声明的变量。
13.                    })
14.                }
15.             }，
16.         fail:console.log
17.      })
18.   })
19. }

复制代码

6）对于长列表页面，用户第一次仅需看到上面的首屏内容，下面需要滑动才能看到的内容是没有需要一次性衬着给用户的。
利用recycle-view组件衬着长列表内容
五、运转时的视图衬着优化要点
1）重衬着与自界说组件优化
重衬着机制经过setData传递数据，它不但遭到底层传输通道局促的限制，它还遭到装备衬着才能的一个限制。这个数据越大节点越多越复杂。它衬着也就越慢，而衬着一慢在用户侧看来它表示起来就是卡顿，操纵反应不实时。是以我们可以将这个界面功用停止组件化处置，将频仍变化的数据封装在一个个的零丁的组件里边，同时去掉一些不需要的数据设备，削减每次setData传递的一个数据量，也可以提升这个视图的衬着效力，还有经过wxs剧本改写组件，让可以在这个视图层里面完成的代码逻辑，就在这个视图层里面停止完成。
2）利用页面庞器
，利用这个组件，在iOS用户做出左滑手势及Android用户单击物理返回键以及在代码里边挪用了wx.navigateBack接口的时辰仅是封闭这个容器，它并不会跳出当前这个页面。它可以放在自界说的组件里面，像一个自力的组件那样去界说和利用。
3）优化视图页动画结果
第一种是利用Animation工具，实现了一个CSS动画；
第二种是利用页面或组件工具，具有的animate方式实现的关键帧动画；
第三种是利用转动事务驱动的响应式动画；
最初一种是经过WXS剧本，实现了一个款式动画。
对于第一种是小法式最早支持的一种动画方式，它的效力是最低的。第二种以animate方式实现的关键帧动画，它具有更好的性能和更轻易控制的接口，它是今朝保举挑选的方式，从效力上来说，它并不是最高效的一种方式。第三种以转动事务驱动的响应式动画，它的用户体验感最好，利用也简单，是一种保举的低本钱建立响应式页面结果的一种方式。第四种也是最初一种，经过WXS剧本实现款式动画，这类方式效力最高，由于它不需要逻辑层的介入改变视图层组件的款式，在视图层里边便可以自己完成动画了。