网站建设问答小编今天给大家整合了一篇有关《小程序分屏加载实践》的文章，关于小程序分屏加载实践的详细内容欢迎往下阅读，下面就由小编一一给大家介绍，一起去了解吧！

　　在小程序不断迭代的时候，很容易遇到首屏渲染问题。这种问题，可能出现的原因是：小程序包太大，资源需要加载；网络环境太差，下载速度太慢；渲染节点太多，渲染耗时。

　　针对小程序首次加载包的问题，小程序提出了分包加载的功能，这里不做详细描述，可以去看下官方文档

　　这里我选择的是针对渲染节点去做优化。

　　在微信的API文档里面，有一个判断节点与可视区域的API

　　IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见

　　这个时候就在想，能不能建立 IntersectionObserver 跟组件之间的关系，使得组件进入可视区域的时候，就显示自己的内容，否则隐藏自己，这样达到动态加载模块的目的。

　　建立了基本技术方案之后，就开始到代码层面了

　　你们以为这就完了么，并没有。

　　对于一个小程序页面，它是可以由template或者Component组成的。对于template来说，需要在Page里面定义，而且如果观察的东西比较多的话，需要设置 observeAll:all ，但是官方文档里面有说同时选中过多节点，将影响渲染性能。

　　对于组件开发来说，如果每个组件都这样写的话，是否也会跟 observerAll:all 一样影响渲染性能，还不清楚，如果确实会影响的话也只能减少观察对象，或者把做一个大容器去观察。但是如果每个组件都这样写的话也会非常的繁琐。

　　这个时候，组件的好处就来了。在定义组件的时候，有一个很神奇的属性，他就是 behaviors。简单点说，他其实就是一个代码复用机制。直接使用 behaviors 可以使得组件自动获得某些方法，属性。利用这个特性，就可以在组件里面少写很多代码了。

　　或者你可以把整个observer做成组件，这样去减少observer的数量，内聚一些模块

　　需要注意的是对于组件来说，如果observer的话就需要一个观察节点，并且这个观察节点必须是高度不为0的可视对象，如果又想有高度又不想影响页面位置的话可以用一些hack的方法

　　在使用 IntersectionObserver 的时候，有试过用 hidden 属性。但是实际上， hiiden 也是会被渲染出来的，只是不显示而已，并不会造成页面加载速度的提升

　　这里是随便拿的一个demo去弄的，需要的话可以点击 这里

　　或者浏览小程序代码片段 https://developers.weixin.qq.com/s/oV1RFfmY7H4W

　　使用之前

　　使用之后

　　如果图片不动的话可以点击查看 可以看得出是提升是相当明显的

　　image有一个 lazy-load 的属性，但是它只能在page以及在scroll-view使用，如果在其他地方的话是不是也可以用这个去做呢

  目前，《小程序分屏加载实践》页面仍在完善中，后续将为您提供丰富、全面的关于《小程序分屏加载实践》的最佳回答，小编将持续从百度问答、百度百科、搜狗问答、搜狗百科、微博问答、头条百科、悟空问答、知乎热门问答以及部分合作站点渠道收集和补充完善信息。

  深圳蚂蚁网络网站建设公司提供，系统定制，微信开发、小程序定制、微商城开发、网站建设、网站排名优化推广等互联网项目定制开发服务。版权声明：如发现内容存在版权问题，烦请提供相关信息发邮件至3310459304@qq.com，我们将及时沟通与处理。本站内容均来源于网络，涉及言论、版权与本站无关。