瀏覽器的渲染機(jī)制
- 解析HTML字符串構(gòu)建DOM樹
- 解析CSS樣式漩氨，產(chǎn)生CSSOM樹
- 執(zhí)行js腳本文件猴蹂，js加載完成承二，通過DOM API 和 CSSOM API 來操作DOM樹和CSSOM樹
- 瀏覽器根據(jù)DOM樹和CSSOM樹構(gòu)建渲染樹（rendering tree）凹蜂，渲染樹包括顯示的節(jié)點(diǎn)和節(jié)點(diǎn)顯示的樣式信息踊跟，如果某個(gè)節(jié)點(diǎn)設(shè)置了樣式
display: none，那么就不會(huì)在渲染樹中顯示兑燥，如果設(shè)置visibility:hidden渲染樹中存在該節(jié)點(diǎn)亮瓷，但不顯示。 - 根據(jù)渲染樹對每一個(gè)節(jié)點(diǎn)在頁面上進(jìn)行布局（文檔流降瞳、盒模型嘱支、計(jì)算元素的大小和位置）蚓胸。（reflow）
- 遍歷渲染樹，為每一個(gè)節(jié)點(diǎn)繪制（paint）對應(yīng)的樣式除师，比如邊框的顏色沛膳、文字的顏色、陰影等（repaint）
7.根據(jù)層疊關(guān)系顯示到屏幕汛聚。
reflow和repaint
在第5步和第6步中锹安，各個(gè)節(jié)點(diǎn)自身的盒模型，瀏覽器根據(jù)樣式計(jì)算該節(jié)點(diǎn)元素該放置的位置倚舀，這個(gè)過程為reflow叹哭；當(dāng)各個(gè)節(jié)點(diǎn)元素的位置、大小以及其他屬性痕貌，例如顏色风罩、字體大小等確定之后，瀏覽器將各個(gè)元素根據(jù)這些特性繪制頁面舵稠，這個(gè)過程叫repaint超升。
CSS動(dòng)畫 （transition 和 animation）
transition 只能執(zhí)行一次(必須有起始狀態(tài)，比如從hover 到非hover)
animation 可多個(gè)狀態(tài) 循環(huán)重復(fù)多次執(zhí)行
transition: 屬性名 時(shí)長 過渡方式 延遲
- property 屬性名：all（所有屬性） | css中屬性（width哺徊、color等）
- duration 時(shí)長：指定過渡時(shí)長
- 過渡方式 timing-function:linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier | step-start | step-end | steps
- 延遲delay：動(dòng)畫開始之前暫停的時(shí)間
并不是所有屬性都能過渡室琢！
display:none =>display:block;無法過渡，一般改成visibility:hidden =>visible
animation: name duration timing-function delay iteration-count direction fill-mode; - 動(dòng)畫名name:
- 時(shí)長duration :1s或者1000ms
- 過渡方式 timing-function:linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier | step-start | step-end | steps
- 是否延遲delay:0s默認(rèn)不延遲 | 其他數(shù)值時(shí)間
- 次數(shù) iteration-count: infinite | 數(shù)字
- 方向direction :normal | alternate | reverse | alternate-reverse
- 填充模式fill-mode: none | forwards | backwards | both
