渲染性能优化
优质
小牛编辑
135浏览
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,会增加主线程渲染时间和内存占用。