渲染引擎
渲染引擎的工作主要是翔忽。闪水。渲染慷丽，用來在屏幕上顯示的內(nèi)容烙荷。主流的瀏覽器乍丈，Chrome和Safari用的是開源的Webkit,Firefox使用的是Gecko叨粘。
DOM解析
DOM樹由元素和值構(gòu)成的各個(gè)節(jié)點(diǎn)組成虹茶。比如一個(gè)HTML DOM樹如下：
<html>
<html>
<head>
<title>Web page parsing</title>
</head>
<body>
<div>
<h1>Web page parsing</h1>
<p>This is an example Web page.</p>
</div>
</body>
</html>
HTML會(huì)被解析成疑故，如下：
dom-tree
CSSRuleTree
css-tree
主要的渲染流程
- 解析HTML來構(gòu)造成DOM樹
- 渲染樹構(gòu)造
- 渲染樹布局
- 繪制整個(gè)渲染樹
render-flow
Reflow和Repaint
- Repaint——屏幕的一部分要重畫撮奏，比如某個(gè)CSS的背景色變了俏讹。但是元素的幾何尺寸沒有變。
- Reflow——意味著元件的幾何尺寸變了畜吊，我們需要重新驗(yàn)證并計(jì)算Render Tree泽疆。
Reflow的成本比Repaint的成本高得多的多。下面這些動(dòng)作有很大可能會(huì)是成本比較高的玲献。
當(dāng)你增加殉疼、刪除、修改DOM結(jié)點(diǎn)時(shí)捌年，會(huì)導(dǎo)致Reflow或Repaint
當(dāng)你移動(dòng)DOM的位置瓢娜，或是搞個(gè)動(dòng)畫的時(shí)候。
當(dāng)你修改CSS樣式的時(shí)候礼预。
當(dāng)你Resize窗口的時(shí)候（移動(dòng)端沒有這個(gè)問題）眠砾，或是滾動(dòng)的時(shí)候。
-
當(dāng)你修改網(wǎng)頁的默認(rèn)字體時(shí)托酸。
