virutal dom patch

今天想到一个对于virtual dom的重要改进方法:可以用高阶函数来预求值diff和patch,这样可以避免运行时间对View求diff和patch,因此性能会优化很大

太极真人 2014/12/14 9:32:43

就象微积分

太极真人 2014/12/14 9:33:46

微分函数是原函数的高一阶函数
9:35:49
太极真人 2014/12/14 9:35:49

View是初始状态连续依据diff应用patch,就是积分

太极真人 2014/12/14 9:36:49

先求微分再求积分也就复原了view函数

太极真人 2014/12/14 9:37:20

恒等式
9:44:00
寸志
2014/12/14 9:44:00

是那么回事,不知道怎么实现
9:46:30
太极真人 2014/12/14 9:46:30

先得让view函数可微

太极真人 2014/12/14 9:47:14

比如常数函数,线性函数

太极真人 2014/12/14 9:48:14

再求这些函数的组合函数的微分
9:48:48
太极真人 2014/12/14 9:48:48

比如if,for,repeat

太极真人 2014/12/14 9:50:34

如果实在无法预求值就fallback到现在的方式
9:51:22
太极真人 2014/12/14 9:51:22

还可以利用缓存机制

太极真人 2014/12/14 9:53:06

常数函数的微分是0,补丁就是空操作
9:55:31
太极真人 2014/12/14 9:55:31

{{x}}相当于线性函数,补丁就是加上差值,实际操作用新值更新就可以了
9:57:14
太极真人 2014/12/14 9:57:14

if则如果测试值不变,补丁就为空,否则用另一分支替换现有分支

太极真人 2014/12/14 9:58:40

repeat则根据模型值进行增删改

11:01:51
Sune
2014/12/14 11:01:51

太极真人厉害

时间: 2024-10-11 03:50:52

virutal dom patch的相关文章

2015-2016前端知识体系

一.框架与组件 ?bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset.按钮.图片.菜单.表单 组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组.面包屑.分页.标签.轮播.弹出框.列表.多媒体.警告 响应式布局:布局.结构.样式.媒体.javascript响应式 第三方插件:插件管理 ?jQuery.zepto使用原理以及插件开发 支持amd.cmd.全局变量的模块化封装 $.fn.method = function(){} ?mvc/mvv

yahoo对flux dispatcher的实现,dispatchr

facebook的react是非常出色的一个想法.为什么这么说呢?让我们先看看针对javascript的一些"创新"方法: 1.用javascript本身来实现,比如ember,angular 2.通过最终编译成js的方式,比如gwt,clojurescript. 3.还有服务器一侧计算js的,vaalidan,https://vaadin.com/home react采用在浏览器内用virutal dom方式,所有的变化都在浏览器内存中,用它的算法计算出最后的给浏览器使用的html,

2015-2016前端知识体系(转)

一.框架与组件 bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset.按钮.图片.菜单.表单 组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组.面包屑.分页.标签.轮播.弹出框.列表.多媒体.警告 响应式布局:布局.结构.样式.媒体.javascript响应式 第三方插件:插件管理 jQuery.zepto使用原理以及插件开发 支持amd.cmd.全局变量的模块化封装 $.fn.method = function(){} mvc/mvvm框架

JavaScript之jsx&react

1.Virtual DOM 1.将网页所有内容映射到一颗树形结构的层级对象模型上,浏览器提供对dom的支持,用户可以是用脚本调用dom,api来动态修改dom节点,从而达到修改网页目的,这种修改是浏览器完成的,浏览器会根据dom的改变重新绘制改变的dom节点部分 2.修改dom重新绘制渲染的代价太高,前端框架为了提高效率,尽量减少dom的重绘,提出了Virtual DOm,所有的修改都是在Virutal DOM上进行的,通过比较算法,找出浏览器dom之间的差别,使用这个差异操作dom,浏览器只需

阿里前端大牛分享的技能整理

前端工程师技能整理 一.框架与组件 ? bootstrap等UI框架设计与实现 [ ] 伸缩布局:grid网格布局 [ ] 基础UI样式:元素reset.按钮.图片.菜单.表单 [ ] 组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组.面包屑.分页.标签.轮播.弹出框.列表.多媒体.警告 [ ] 响应式布局:布局.结构.样式.媒体.javascript响应式 [ ] 第三方插件:插件管理 jQuery.zepto使用原理以及插件开发 [ ] 支持amd.cmd.全局变量的模块化封装 [

你不能不知道的前端知识体系

一.框架与组件 bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset.按钮.图片.菜单.表单 组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组.面包屑.分页.标签.轮播.弹出框.列表.多媒体.警告 响应式布局:布局.结构.样式.媒体.javascript响应式 第三方插件:插件管理 jQuery.zepto使用原理以及插件开发 支持amd.cmd.全局变量的模块化封装 $.fn.method = function(){} mvc/mvvm框架

虚拟DOM

DOM(Document Object Model)是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需要DOM操作. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差:有了jQuery强大的选择器以及高度封装的API,我们可以更方便的操作DOM,jQuery帮我们处理兼容性问题,同时也使DOM操作变得简单:MVVM使用数据双向绑定,使得我们完全不需要

如何实现一个 Virtual DOM 及源码分析

Virtual DOM算法 web页面有一个对应的DOM树,在传统开发页面时,每次页面需要被更新时,都需要手动操作DOM来进行更新,但是我们知道DOM操作对性能来说是非常不友好的,会影响页面的重排,从而影响页面的性能.因此在React和VUE2.0+引入了虚拟DOM的概念,他们的原理是:把真实的DOM树转换成javascript对象树,也就是虚拟DOM,每次数据需要被更新的时候,它会生成一个新的虚拟DOM,并且和上次生成的虚拟DOM进行对比,对发生变化的数据做批量更新.---(因为操作JS对象会

Virtual DOM 虚拟DOM的理解(转)

作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异应用到真正的DOM树上 5 结语 6 References 1 前言 本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐述清楚.希望在阅读本