一淑廊、原理：
我們知道DOM是一個(gè)js對(duì)象，操作這個(gè)對(duì)象后特咆，會(huì)觸發(fā)一些瀏覽器行為季惩，比如 layout（布局），paint（繪制）腻格，這就是我們說的引起性能變化的原因画拾。
二、瀏覽器的渲染引擎工作機(jī)制：
瀏覽器有很多模塊（引擎）菜职，其中呈現(xiàn)頁面就是渲染引擎模塊青抛。
渲染引擎工作過程：
解析HTML，并生成DOM樹 ?=====》 ?解析各種樣式酬核，合并DOM樹蜜另，生成render tree =====》 ?對(duì)render tree各個(gè)節(jié)點(diǎn)計(jì)算布局信息，比如box的位置嫡意，尺寸等 ? ======》 根據(jù)render tree并利用瀏覽器的UI層進(jìn)行繪制頁面
其中DOM tree和Render tree上的節(jié)點(diǎn)并不是一一對(duì)應(yīng)的举瑰，比如 “display：none”的節(jié)點(diǎn)只會(huì)在DOM tree上的，而不會(huì)出現(xiàn)在 render tree上的蔬螟，因?yàn)檫@個(gè)節(jié)點(diǎn)不需要被繪制此迅。
繪制paint是一個(gè)耗時(shí)的過程，layout更耗時(shí)旧巾，并且layout無法確定其規(guī)則（自上而下還是自下而上耸序？），每一次layout會(huì)牽涉文檔的重新計(jì)算鲁猩，但是我們無法避免這個(gè)過程坎怪，提高性能的原理也只能是盡量減少layout。
三绳匀、最優(yōu)的layout方案：批量讀芋忿，一次性寫炸客。先對(duì)一個(gè)不在render tree上的節(jié)點(diǎn)進(jìn)行操作疾棵，再把這個(gè)節(jié)點(diǎn)添加回render tree。這樣只會(huì)觸發(fā)一次DOM操作痹仙。使用requestAnimationFrame()是尔，吧任何導(dǎo)致重繪的操作放入requestAnimationFrame
四、vue的虛擬dom原理
基于上面的分析：通過js操作DOM开仰，但是性能差拟枚，所以virtual dom應(yīng)運(yùn)而生薪铜。
原理:在js模擬DOM樹并對(duì)DOM樹操作的一種技術(shù)。virtual DOM是一個(gè)純js對(duì)象（字符串對(duì)象）恩溅，所以對(duì)他操作會(huì)高效隔箍。
