当前位置: 首页 > 文档资料 > Rax 中文文档 >

渲染性能优化

优质
小牛编辑
138浏览
2023-12-01

优化提升渲染性能,不仅能让页面更快的展现、可交互,同时能提升用户操作滚动的流畅度,对提升用户体验至关重要。

避免不必要的更新对比

Rax 同 React 一样,render 时会有 vdom 对比,如果对比发现 DOM 没有变化时,不会去真正更新页面。而本身 vdom 对比也是不小的消耗,你应该避免这种不必要的更新对比,使用 shouldComponentUpdate 方法明确标识你的组件什么时候需要更新,什么时候不需要更新。或者你的组件也可以继承 PureComponent,进行简单的属性浅比较。当然对于大部分业务场景,你的组件在渲染完后并不需要更新,你最好显式的阻止更新。

不要渲染空字符串

在你需要返回或者渲染空组件时,不要使用空字符串。

<View>{name <View>{name}</View> : ''}</View>

在 Rax 中,渲染空字符串,对应 Weex 上会额外渲染一个 View,造成渲染上的浪费。你需要返回 null 来代替。

<View>{name <View>{name}</View> : null}</View>

减少 render 方法的复杂度

在 Rax/React 中,当组件状态更新时,会不断的调用 render 方法,意味着你放在 render 方法的中代码逻辑、函数调用等也是每次都会被执行,如果是跟组件状态无关的函数,建议不要放到 render 方法中。

控制嵌套层级

你需要将页面的 vdom 层级控制在 14 层以下,过大的嵌套层级会导致页面渲染时间加长,严重的会导致低端手机 crash。

在 Weex 的渲染机制下,每一个 Rax View 容器都会对应一个 Native 的 view。每多一层嵌套,Native 都要 create view,会增加主线程渲染时间和内存占用。