什么是Doctype及作用拭卿？
- DTD（document type definition集灌，文檔類型定義）是一系列的語法規(guī)則随珠，用來定義XML或（X）HTML的文件類型蝶俱。瀏覽器會(huì)使用它來判斷文檔類型，決定使用何種協(xié)議來解析彼棍，以及切換瀏覽器模式灭忠；
- DOCTYPE是用來聲明文檔類型和DTD規(guī)范的膳算，一個(gè)主要的用途便是文件的合法性驗(yàn)證座硕。如果文件代碼不合法，那么瀏覽器解析時(shí)便會(huì)出一些差錯(cuò)涕蜂；
- HTML4.01 有個(gè)嚴(yán)格模式和傳統(tǒng)模式华匾。
瀏覽器渲染過程？
- 構(gòu)建DOM樹(DOM tree)：從上到下解析HTML文檔生成DOM節(jié)點(diǎn)樹（DOM tree）机隙，也叫內(nèi)容樹（content tree）蜘拉；
- 構(gòu)建CSSOM(CSS Object Model)樹：加載解析樣式生成CSSOM樹；
- 執(zhí)行JavaScript：加載并執(zhí)行JavaScript代碼（包括內(nèi)聯(lián)代碼或外聯(lián)JavaScript文件）有鹿；
- 構(gòu)建渲染樹(render tree)：根據(jù)DOM樹和CSSOM樹,生成渲染樹(render tree)旭旭；
渲染樹：按順序展示在屏幕上的一系列矩形，這些矩形帶有字體葱跋，顏色和尺寸等視覺屬性持寄。- 布局（layout）：根據(jù)渲染樹將節(jié)點(diǎn)樹的每一個(gè)節(jié)點(diǎn)布局在屏幕上的正確位置；
- 繪制（painting）：遍歷渲染樹繪制所有節(jié)點(diǎn)娱俺，為每一個(gè)節(jié)點(diǎn)適用對(duì)應(yīng)的樣式稍味，這一過程是通過UI后端模塊完成；
重排Reflow： DOM 結(jié)構(gòu)中的各個(gè)元素都有自己的盒子模型荠卷，這些都需要瀏覽器根據(jù)各種樣式來計(jì)算并根據(jù)計(jì)算結(jié)果將元素放到它該出現(xiàn)的位置模庐，這個(gè)過程稱之為reflow。
- 觸發(fā)Reflow油宜？
當(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í)候
放你修改網(wǎng)頁的默認(rèn)字體時(shí)
重繪Repaint： 當(dāng)各種盒子的位置、大小以及其他屬性悴了，例如顏色搏恤、字體大小等都確定下來后，瀏覽器于是便把這些元素都按照各自特性繪制一遍湃交，于是頁面的內(nèi)容出現(xiàn)了熟空，這個(gè)過程稱之為Repaint。
- 觸發(fā)Repaint搞莺？
DOM和css改動(dòng)
- 如何避免Reflow或Repaint息罗？
- 先將元素從document中刪除，完成修改后再把元素放回原來的位置才沧；
- 將元素的display設(shè)置為”none”迈喉，完成修改后再把display修改為原來的值 ；
- 如果需要?jiǎng)?chuàng)建多個(gè)DOM節(jié)點(diǎn)温圆，可以使用DocumentFragment創(chuàng)建完后一次性的加入document挨摸；
- 盡可能少的修改元素style上的屬性；
- 盡量通過修改className來修改樣式岁歉；
- 通過cssText屬性來設(shè)置樣式值得运；
如果此文對(duì)你有用請(qǐng)動(dòng)動(dòng)你的小手點(diǎn)個(gè)贊！謝謝９啤Ｈ鄄簟！
