游客

标题:Weex 长列表的复用方案 <recycle-list>
正文:
Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面，然后编译成一段 JavaScript 代码，形成 Weex 的一个 JS bundle；在云端，开发者可以把生成的 JS bundle 部署上去，然后通过网络请求或预下发的方式传递到用户的移动应用客户端；在移动应用客户端里，WeexSDK 会准备好一个 JavaScript 引擎，并且在用户打开一个 Weex 页面时执行相应的 JS bundle，并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践；同时，如果用户没有安装移动应用，他仍然可以在浏览器里打开一个相同的 web 页面，这个页面是使用相同的页面源代码，通过浏览器里的 JavaScript 引擎运行起来的。需求背景 长列表（无限列表）在移动端很常见，会消耗大量渲染时间和内存，通常是性能瓶颈。 虽然列表中的内容很长，但是结构都比较相似，只是内容有差异，很适合复用。 长列表中有大量节点不在可视区，回收并复用这些节点可以减少内存占用和创建新节点时的开销。在列表变得特别长的时候，尤其是列表包含了大量图文视频的时候，即使做了懒加载优化了渲染效率，超长列表内存的占用量也很难优化。如果能复用列表中相似的模板结构，由数据来驱动原生组件的渲染，节点离屏之后将模板回收，将会大幅优化长列表的渲染性能和内存使用量。图中的 JSFM 为 JS Framework 的简写。下面以 Vue.js 为例，详细介绍一下常规组件的渲染过程。如上图所示，前端框架中的 Template 不再需要数据，而是直接展开成一种纯静态的模板结构，结构中包含了模板渲染逻辑，格式仍然是 VNode。然后经过 JS Framework 转换成 Weex 支持的 Element，其中也包含了模板的原生渲染指令。客户端解析出可复用的模板结构，由数据驱动模板渲染，这个模板结构和前端组件中的定义是一致的。这个过程除了要把模板发给客户端，还得带上模板的渲染逻辑，告诉客户端如何根据数据来渲染模板。为了描述这些渲染逻辑，就得设计一套面向原生渲染引擎的模板渲染指令。当列
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页