---
title: Render Performance Optimization
docType: default
---

# Render Performance Optimization

Rendering performance affects page smoothness and responsiveness. The more complex the page structure and the more frequent the updates, the greater the rendering pressure.

## Reduce Page Node Count

Too many nodes on a page increases memory usage and layout computation time. Keep node count below 1000 per page and tree depth below 30 levels.

Common strategies:

- **Remove redundant nesting**: Eliminate unnecessary `view` wrapper layers and keep the structure flat
- **Conditional rendering**: Use `ty:if` to remove nodes that aren't needed; for elements that toggle frequently, use the `hidden` attribute instead to avoid repeatedly creating and destroying nodes

```html
<!-- ✅ Use ty:if to remove unneeded nodes -->
<view ty:if="{{showDetail}}" class="detail-content">...</view>

<!-- ✅ Use hidden for frequently toggled elements -->
<view hidden="{{!showPanel}}" class="panel">...</view>
```

## Use Scroll Event Listeners Carefully

`onPageScroll` and `scroll-view`'s `bindscroll` events fire at a very high frequency. Each trigger has cross-thread communication overhead.

Notes:

- Avoid listening to scroll events when not necessary
- Don't declare an empty `onPageScroll` handler when you don't need it
- Avoid calling `setData` or synchronous APIs frequently inside scroll callbacks

## Choose High-Performance Animation Approaches

Animations enhance interaction experience. Choosing the right animation approach ensures good visual effects without performance issues.

| Approach | Use Case | Performance | Complexity |
| -------- | -------- | ----------- | ---------- |
| CSS animation / Transition | Simple transitions (show/hide, translate, scale) | High | Low |
| GIF / Lottie | Decorative animations (loading, icon effects) | High | Low |
| `createAnimation` | Sequential animations | Medium | Low |
| SJS | High-frequency interactive animations (drag, gesture sync) | High | High |
| setData-driven | — | Low | Low |

- Prefer `transform` and `opacity` for animations — they can leverage GPU acceleration
- Avoid animating `width`, `height`, `margin`, `padding`, etc. — these trigger layout reflow

```css
/* ✅ Recommended: use transform */
.slide-in {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.slide-in.active {
  transform: translateX(0);
}

/* ❌ Avoid: use left/right */
.slide-in {
  left: -100%;
  transition: left 0.3s ease;
}
```

Avoid using `setData` to update data every frame to drive animations. At 60fps, each frame is only ~16ms; cross-thread communication overhead causes severe frame drops. Use SJS for high-frequency interactive animations (such as drag-follow) to respond to events and modify styles directly in the view layer.

## Component-Based Decomposition

Split pages into independent child components. State updates within a component only trigger that component's re-render, not the entire page:

```
Page
├── Header component (updates independently)
├── ListItem component × N (each updates independently)
└── Footer component (updates independently)
```

## Checklist

| Check Item | Optimization |
| ---------- | ------------ |
| Too many page nodes | Remove redundant nesting, simplify structure |
| Using `display:none` to hide many nodes | Switch to `ty:if` conditional rendering |
| Unnecessary scroll event listeners | Remove empty callbacks |
| Laggy animations | Switch to CSS animation or SJS |
| Page not decomposed into components | Extract independent modules as child components |