Update Code

zhoukekestar · Jan 11, 2024 · 9d97746 · 9d97746
1 parent 816ed10
commit 9d97746
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 116 deletions.
diff --git 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
@@ -1,16 +1,15 @@
 ---
 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)
   * https://zserge.com/posts/jvm/
 * 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
@@ -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 → _posts/2024-01~03/2024-01-10-virtualdom-3.md b/_posts/2024-01~03/2023-01-10-virtualdom.md → _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`
+  <div>
+    <h1>Hello ${name}</h1>
+  </div>`
+```
 
-![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
@@ -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/[email protected]/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)