San Framework Performance Evolution: A MVVM Framework's Optimization Journey

This article details the performance optimization journey of San, Baidu's MVVM framework. The author shares performance optimization techniques that apply to both application development and foundational libraries.

View Creation Process:

The framework performs template parsing when the first component instance is created, converting the template into an ANode (Abstract Node Tree) containing all template declaration information including tags, text, interpolation, data binding, conditions, loops, and events. The preheat operation generates a hotspot object that pre-computes information to avoid repetitive work during rendering and updating. Key optimizations include using cloneNode for element creation, caching property handlers, and pre-selecting node types during preheat to avoid type checking during creation.

View Update Process:

Data changes are observable through the data layer, triggering fire events that can be listened via the listen method. View updates are asynchronous and batched in nextTick. The update traverses the node tree top-down, with each node receiving data change information through the _update method. A key optimization is traversal interruption: using hotspot.data to compare with change information, allowing the framework to skip entire subtrees when data changes don't affect them. This is similar to React's shouldComponentUpdate but automatically handled by the framework.

List Update Optimizations:

ForNode handles list rendering with several optimizations: placeholder values for new items during change processing, efficient deletion using removeChild on root elements only, violent clear for complete list clearing, and trackBy optimization using head/tail traversal to minimize comparison scope.

Micro-optimizations:

The framework avoids call/apply, reduces intermediate object creation, minimizes function calls by using direct for loops instead of each methods, and avoids for...in loops and extend operations.

Code examples demonstrate these concepts:

const MyApp = san.defineComponent({
template: `
<div>
<h3>{{title}}</h3>
<ul>
<li s-for="item,i in list">{{item}} <a on-click="removeItem(i)">x</a></li>
</ul>
</div>
`,
initData() {
return {
title: 'List',
list: []
};
}
});