前端知識體系 JS相關 虛擬DOM和Diff演算法

virtual dom， 虛擬dom

使用js來模擬dom結構

dom變化的對比，放在js層來做（圖靈完備語言），提高效率

dom操作非常昂貴（消耗效能）

var snabbdom = window.snabbdom;

// 定義patch
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])// 定義h
var h = snabbdom.h;
var container = document.getelementbyid('container');
// 生成vnode
var vnode = h('ul#list', {}, [
h('li.item', {}, 'item 1'),
h('li.item', {}, 'item 2'),
]);patch(container, vnode)
// 修改dom內容
document.getelementbyid('btn-change').addeventlistener('click', function () , [
h('li.item', {}, 'item 1'),
// dom節點中不同的地方
h('li.item', {}, 'item b'),
h('li.item', {}, 'item 3'),
]);patch(vnode, newvnode)
})

[!note]

核心api總結：

h('《標籤名》', ， 『...』)

patch(container, vnode)

patch(vnode, newnode)

linux中： diff 檔案1.txt 檔案2.txt

git中： git diff

diff演算法實現非常複雜，實現難度很大，原始碼量很大

去繁就簡，講明白核心流程，不關心細節（非常高效的手段）

面試官也大部分不清楚細節，但是很關係核心流程的實現

dom操作是昂貴的，因此要儘量減少dom的操作

找出本次dom必須更新的節點來更新，其他的不更新

這個找出的過程，就需要使用diff演算法（找出兩個虛擬dom的差異）

前端知識體系梳理

高頻考題 盒模型 動畫 css3 預處理器 sass less postcss.基礎其他題目 書籍推薦基礎 原型 繼承 事件流 事件委託 變數 作用域 閉包 this 上下文 事件迴圈 前端快取 正則 跨域 settimeout setinterval requestanimationframe 深...

前端知識體系 CSS相關 CSS基礎知識強化

第一優先順序 無條件優先的屬性只需要在屬性後面使用 important。它會覆蓋頁面內任何位置定義的元素樣式。ie6支援上有些bug 第二等 id選擇器，如 header，權值為0100.第三等 類選擇器 如 bar，權值為0010.第四等 型別 標籤 選擇器和偽元素選擇器，如 div first ...

前端知識體系 CSS相關 CSS工程化方案

使用less，sass等css預處理器 使用postcss外掛程式 postcss import precss 使用webpack處理css css loader style loader postcss是乙個平台，具體要取決於這個平台上面的外掛程式可以做什麼 常用的外掛程式如下 1.可以新增屬性字...