diff --git a/_posts/2023-10~12/2023-12-30-virtualdom-2.md b/_posts/2023-10~12/2023-12-30-virtualdom-2.md index 6ac06b5..7cb558e 100644 --- a/_posts/2023-10~12/2023-12-30-virtualdom-2.md +++ b/_posts/2023-10~12/2023-12-30-virtualdom-2.md @@ -93,90 +93,5 @@ render(helloTemplate('foo', 'bar'), document.body) ### 其他 -[Ember Glimmer]() +[Ember Glimmer](https://zhoukekestar.github.io/notes/2024/01/09/ember-glimmer.html) -# 编写 DOM:HTML 的进化 - -### 模板语言时代 - -* JavaScript Template Eengine - * [mustache](https://github.com/janl/mustache.js) - - ![](https://cloud.githubusercontent.com/assets/288977/8779228/a3cf700e-2f02-11e5-869a-300312fb7a00.gif) - - * [handlebars](https://handlebarsjs.com/zh/) -* Handlebars -* JSX -* Template - - - -# Virtual DOM 核心作用 - -![image](https://github.com/zhoukekestar/notes/assets/7157346/9db66f3b-d2f0-4797-b407-e1e1862e1c88) - -from: -* https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ -* https://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html - - - -* DSL vs JSX -* Ecosystem - * Three.JS - * -* - -> The big improvements that React brought to the mainstream were componentization, and popularizing declarative rendering. -> https://news.ycombinator.com/item?id=34621279 - -> For some reason I thought the virtual DOM was a native feature of the browser -> https://news.ycombinator.com/item?id=34633339 - -# VDom is not just VDOM - -> Note that a virtual DOM is pure overhead if you already have a real DOM to work with. -> https://news.ycombinator.com/item?id=34616031 -> - - -# Steps - -* diff - * https://github.com/Matt-Esch/virtual-dom/blob/master/vtree/diff.js -* patch - - - -# Diff Alogrithm - -### RTED - -> RTED requires O(n2) space as the most space-efficient competitors, and its runtime complexity of O(n3) in the worst case is optimal. - - -# Virtual DOM 简写 - - 使用 JSX 简写 - - -# References - -* https://news.ycombinator.com/item?id=34612162 -* https://svelte.dev/blog/virtual-dom-is-pure-overhead -* https://github.com/mbasso/asm-dom -* https://github.com/patrick-steele-idem/morphdom -* https://zhoukekestar.github.io/notes/2017/08/07/webcomponents-demo.html -* https://zhoukekestar.github.io/notes/2017/08/07/beyond-framework.html -* https://github.com/WebReflection/hyperHTML -* https://github.com/AFASSoftware/maquette - -* https://en.wikipedia.org/wiki/Virtual_DOM - * https://svelte.dev/blog/virtual-dom-is-pure-overhead - * https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ - - -* [RTED: A Robust Algorithm for the Tree Edit Distance](https://vldb.org/pvldb/vol5/p334_mateuszpawlik_vldb2012.pdf) -* [Minimal Edit-Based Diffs for Large Trees](https://dl.acm.org/doi/pdf/10.1145/3340531.3412026) -* [Detecting Changes in XML Documents](https://people.cs.rutgers.edu/~amelie/papers/2002/diff.pdf) -* [Google String diff-match-patch](https://github.com/google/diff-match-patch) diff --git a/_posts/2024-01~03/2023-12-30-jvm.md b/_posts/2024-01~03/2023-12-30-jvm.md index 7b21e1c..0fe3ee2 100644 --- a/_posts/2024-01~03/2023-12-30-jvm.md +++ b/_posts/2024-01~03/2023-12-30-jvm.md @@ -1,11 +1,11 @@ --- layout: post -title: "再谈 Virtual DOM(二)" -date: 2023-12-30 +title: "JVM" +date: 2024-01-05 tags: [note] --- - + [mini-jvm](https://github.com/guxingke/mini-jvm) * [Toy JVM by Go](https://github.com/zserge/tojvm/blob/master/vm.go) @@ -13,4 +13,3 @@ tags: [note] * https://github.com/tdiant/TinyJVM * https://github.com/Anilople/javajvm * https://github.com/guxingke/mini-jvm -* diff --git a/_posts/2024-01~03/2024-01-09-ember-glimmer.md b/_posts/2024-01~03/2024-01-09-ember-glimmer.md index a87fbeb..e49abce 100644 --- a/_posts/2024-01~03/2024-01-09-ember-glimmer.md +++ b/_posts/2024-01~03/2024-01-09-ember-glimmer.md @@ -1,6 +1,6 @@ --- layout: post -title: "lit SSR" +title: "Ember Glimmer" date: 2024-01-09 tags: [note] --- diff --git a/_posts/2024-01~03/2023-01-10-virtualdom.md b/_posts/2024-01~03/2024-01-10-virtualdom-3.md similarity index 80% rename from _posts/2024-01~03/2023-01-10-virtualdom.md rename to _posts/2024-01~03/2024-01-10-virtualdom-3.md index fb8eaa2..2f937ca 100644 --- a/_posts/2024-01~03/2023-01-10-virtualdom.md +++ b/_posts/2024-01~03/2024-01-10-virtualdom-3.md @@ -1,12 +1,14 @@ --- layout: post -title: "再谈 Virtual DOM(二)" +title: "再谈 Virtual DOM(三)" date: 2024-01-10 tags: [note] --- - 接上次 [再谈 Virtual DOM(一)](https://zhoukekestar.github.io/notes/2023/12/20/virtualdom.html) + 接上次 +* [再谈 Virtual DOM(一)](https://zhoukekestar.github.io/notes/2023/12/20/virtualdom.html) +* [再谈 Virtual DOM(二)](https://zhoukekestar.github.io/notes/2023/12/30/virtualdom-2.html) # 编写 DOM:HTML 的进化 @@ -86,21 +88,27 @@ ServerSide Template Engine 因为页面大部分是前端的领域,而且随着 [前后端分离](https://www.google.com.hk/search?q=frontend+backend+separate) 的兴起,此方式受到了广泛的欢迎。 + 但本质上,JSX 已不再是模板语言,而是 JS 代码。所以,灵活性和模板语言已不可同日而语,其灵活性所带来的问题,也导致其优化的上限。 -* https://github.com/facebook/jsx +* [facebook/jsx](https://github.com/facebook/jsx) ### Template Literals & Tagged templates -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates -* +```js +// Template Literals +`Hello ${name}` -# Virtual DOM 核心作用 +// Tagged templates +html` +
+

Hello ${name}

+
` +``` -![image](https://github.com/zhoukekestar/notes/assets/7157346/9db66f3b-d2f0-4797-b407-e1e1862e1c88) +* [tagged_templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) +* [ecmascript-language-lexical-grammar](https://tc39.es/ecma262/multipage/ecmascript-language-lexical-grammar.html#sec-template-literal-lexical-components) -from: -* https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ -* https://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html +# Virtual DOM 核心作用 @@ -116,22 +124,7 @@ from: > For some reason I thought the virtual DOM was a native feature of the browser > https://news.ycombinator.com/item?id=34633339 -# VDom is not just VDOM - -> Note that a virtual DOM is pure overhead if you already have a real DOM to work with. -> https://news.ycombinator.com/item?id=34616031 -> - - -# Steps - -* diff - * https://github.com/Matt-Esch/virtual-dom/blob/master/vtree/diff.js -* patch - - -# Diff Alogrithm ### RTED diff --git a/_posts/2024-01~03/2024-01-11-virtualdom-4.md b/_posts/2024-01~03/2024-01-11-virtualdom-4.md new file mode 100644 index 0000000..8ce0ee8 --- /dev/null +++ b/_posts/2024-01~03/2024-01-11-virtualdom-4.md @@ -0,0 +1,96 @@ +--- +layout: post +title: "再谈 Virtual DOM(二)" +date: 2024-01-10 +tags: [note] +--- + +# Virtual DOM + + +### 典型 VirtualDOM + + 典型的 [virtual-dom](https://github.com/Matt-Esch/virtual-dom) 主要包含以下步骤: + +* `createElement` 创建 `VNode`,并通过 `children` 关联生成一个 `VTree` +* `render` 将组件渲染成 `VirtualDOM` + * 首次渲染,调用 `document.createElement` 创建 `RealDOM` + * 二次渲染 + * `render` 生成第二棵 `VirtualDOM 2` + * `diff` 计算两棵 `VirtualDOM 1` 和 `VirtualDOM 2` 的差异 + * `patch` 将差异 批量 应用到 `RealDOM` + +缺点: +* 运行内存占用较多,并有两颗 VirtualDOM 树 + +![image](https://github.com/zhoukekestar/notes/assets/7157346/9db66f3b-d2f0-4797-b407-e1e1862e1c88) + +* https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ +* https://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html + + +### Preact + + [Preact Build](https://unpkg.com/browse/preact@1.2.0/src/preact.js#L273) + +* `createElement` 创建 `VNode`,并通过 `children` 关联生成一个 `VTree` +* `render` 将组件渲染成 `VirtualDOM` + * 首次渲染,调用 `document.createElement` 创建 `RealDOM` + * 二次渲染 + * `render` 第二次生成 `VirtualDOM`(注意:此处是第二次,不是第二棵) + * `build` 计算 `RealDOM` 和 `VirtualDOM` 的差异并依次更新(注意:此处是依次更新,不是批量更新) + +优点: +* 策略简单,内存占用少 + + +### React + +* https://github.com/maoxiaoxing/react-study/tree/master/Fiber +* https://juejin.cn/post/6993973502852202503 + + +# Diff 算法 + +### 典型 XML Diff + + 一个典型的 Diff 算法复杂度为 O(n^3) + +* [https://github.com/acdlite/react-fiber-architecture](https://github.com/acdlite/react-fiber-architecture) +* [https://legacy.reactjs.org/docs/reconciliation.html](https://legacy.reactjs.org/docs/reconciliation.html) +* [https://github.com/facebook/react/issues/6170](https://github.com/facebook/react/issues/6170) +* [A Survey on Tree Edit Distance and Related Problems](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) + + +# 权衡 + + React 引入 VirtualDOM 及其出现,另外一个主要原因是 [React Native](https://reactnative.dev/docs/handling-text-input) 的存在。 + + 由于 VirtualDOM 的存在,使得 React UI 描述成为一种更为通用的存在,比如:NodeJS、Web、iOS、Android、PC Native 等等,可以做到 Learn once, write anywhere. + + 这是【跨端需求、多端开发效率】与【单端性能、单端开发效率】之间平衡,并没有绝对的优劣,正如 VirtualDOM 的一棵树和二棵树的区别,也是一种平衡。 + +> Note that a virtual DOM is pure overhead if you already have a real DOM to work with. +> https://news.ycombinator.com/item?id=34616031 + + +# References + +* https://news.ycombinator.com/item?id=34612162 +* https://svelte.dev/blog/virtual-dom-is-pure-overhead +* https://github.com/mbasso/asm-dom +* https://github.com/patrick-steele-idem/morphdom +* https://zhoukekestar.github.io/notes/2017/08/07/webcomponents-demo.html +* https://zhoukekestar.github.io/notes/2017/08/07/beyond-framework.html +* https://github.com/WebReflection/hyperHTML +* https://github.com/AFASSoftware/maquette + +* https://en.wikipedia.org/wiki/Virtual_DOM + * https://svelte.dev/blog/virtual-dom-is-pure-overhead + * https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ + + +* [RTED: A Robust Algorithm for the Tree Edit Distance](https://vldb.org/pvldb/vol5/p334_mateuszpawlik_vldb2012.pdf) +* [Minimal Edit-Based Diffs for Large Trees](https://dl.acm.org/doi/pdf/10.1145/3340531.3412026) +* [Detecting Changes in XML Documents](https://people.cs.rutgers.edu/~amelie/papers/2002/diff.pdf) +* [Google String diff-match-patch](https://github.com/google/diff-match-patch)