Vue.js设计与实现读书有感第一章 权衡的艺术

Posted by Xiaosa's Blog on March 16, 2022

与jQ方式相比较:

声明式代码性能不优于命令式代码。 声明式性能消耗=找出差异的性能消耗+直接修改的性能消耗(最优解时) vDom就是为了最小化找出差异的性能消耗

(jQ方式)使用innerHTML创建页面的性能: html字符串拼接的计算量+innerHTML的DOM计算量 (框架方式)vDom创建页面的性能:创建js对象的计算量+创建真实DOM的计算量

对于创建页面而言 vDom方式效率不会比jQ方式高 但是在更新页面时,vDom方式的性能消耗更小

因为innerHTML方式相当于销毁所有DOM节点,然后重新创建. 而vDom方式只需要更新某些节点,不需要销毁和重建.

纯运行时:直接为render函数提供一个树形结构的数据对象 无法分析用户提供的内容.

运行时+编译时: 接受树形结构的数据对象直接给render函数 或者接受html字符串,将其编译成数据对象后交给运行时处理.这个过程可以再运行时之前,也可以在构建中完成. 可以分析用户提供的内容,看看哪些内容将来可能会改变,这样我们就可以在编译时提取这些信息,然后将其传递给render函数,以便进一步的优化. vue,react都是这种,但是React的编译时很薄,基本只是编译JSX语法. 还有一个SolidJS则采用了类似Svelte的方案:在编译时,将状态更新编译为独立的DOM操作方法。做到了一定条件下的体积优势和更快的更新速度.详情可见 https://zhuanlan.zhihu.com/p/385841019

纯编译时:编译器把HTML字符串直接编译成命令式代码. 代表: svelte 性能最优 但是灵活性不足.用户提供的内容必须编译后才能使用