前端知識普及之HTML
來自： https://segmentfault.com/a/1190000004451497
本文采用問答模式,目的是深入HTML內部，去學習一些我們不經常關注，但卻實實在在存在的problem. 文章內容略顯裝逼，如果大家受不了，請帶好護目鏡。
什么是Doctype?能吃嗎？
我想使用過sublime的同學，應該會有一個snippets。
!+[TAB]
結果就是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html></pre>
沒錯，不知不覺中，!DOCTYPE html已經變為標準了。 沒錯，就是因為H5的出現。
Doctype就是用來告訴browser用什么文檔標準來解析這個文檔. 而!DOCTYPE html就是告訴瀏覽器使用h5的標準來解析文檔。
說起DocType的內容，這應該算是一段血淚史。 一開始HTML是基于SGML來進行編譯的，通過指定DTD，我們告訴瀏覽器使用哪一種DTD來對文檔進行解析。在HTML5以前的title上，我們都需要指定某一個DTD。
以前比較流行的有:HTML 4.01/XHTML. 分別各有3中。
常見的就是比較寬松的DTD：
比如:HTML4.01 Transtional
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
使用上述的DOCTYPE，就可以告訴瀏覽器用什么文檔格式進行解析。
通常來說，我們前端寶寶并不懂什么意思啊喂。 其實選擇不同的文檔類型，會表示你的HTML中的 標簽的支持數 .
比如已經廢棄的< dir>標簽.
</div>
DOCTYPE
dir
H5
X
XHTML1.1
X
HTML 4.01<br/>Transitional
Y
說白了，DTD就是制定你文檔中的標簽能夠被瀏覽器識別。但是，奇葩的是H5現在并不依賴于SGML了， 也就是說，你可以已定義一些tag, 而不需要對內部進行更改了。
<jimmy>My name is jimmy</jimmy> //H5正常顯示
由于各大瀏覽器廠商已經對H5有了完美的支持，所以，上文介紹的都已經成為歷史，此致緬懷我們已經逝去的SGML。
扒扒瀏覽器內核
What's make of browser?
browser = shell + kernel
也就是，我們現在所有所見的browsers都是由著兩部分構成，shell就是我們的GUI界面，讓我們能夠所見即所得的操作瀏覽器，而內部shell就是調用kernel來進行相關的操作的。 其實，這個就和我們前端寶寶，和后臺寶寶是一樣的。 我們前端要什么東西，任性的告訴后臺.
前端: 帥哥，我要做這個，你幫我執行一下后臺命令哦
后臺: 好的~
也就是，shell給kernel穿了一件美麗的clothers讓他的交互變得更加容易。
但說到底，瀏覽器本身的注重點就是在kernel上。
在前幾年的瀏覽器中，由于js并沒有得到充分的利用，所以，大部分的時候，瀏覽器的內核是有兩部分構成:渲染引擎和JS引擎。 這時候，前端到了蒸汽時代，js快速發展，碾壓了世界上其他的語言。
php是世界上最好的語言，但是js將統治全宇宙
而且得力于Chrome的V8, 使得js變得奇快無比。 現在，瀏覽器的內核，只能包括渲染引擎。 JS引擎已經獨立出來了(最著名的就屬V8)。 所以，現在，我們經常所說的瀏覽器的引擎，就是渲染引擎。當今比較流行的引擎有(2015-2-17)
內核
瀏覽器
Trident
IE系列
Gecko
firefox
Webkit
Safari,Android
blink
Chrome,Opera
大致就這幾種。壯士，莫慌，我這里還有小道消息。 如果知道webview的同學一定會想要追著微信，QQ打。
tm,我怎么調試，md...你這又不支持。你的文檔嘞~ flex你支持不全面，出bug了呀~
上述，僅供意淫。因為騰訊在前端時間出了 X5的內核 。 結果，業界一片嘩然，本著支持國產的心態去試一試。結果，蠢哭了~ X5原來是基于android 4.2的webkit. 其實就相當于早期的IE。不過好像已經換掉了，忽略掉吧。
另外,Mozilla公司最近正在開發一個新的引擎 Servo ，聽風好像很好用的，可以多核喲~
好了，基本情況就說到這，關于瀏覽器內核的風風雨雨都是浮云，我們來看一看，內核的基本運作吧。
當瀏覽器就收到你的HTML文件和CSS文件時，觸發過程是這樣的.
首先Parse對文件進行解析
然后將對應的HTML生成為DOM
CSS解析為CSS Object Model.
然后兩者合并進行render
最后繪制到頁面上
上述就是內核的核心部分. 內核還有其他的很多部分，比如連接顯示器，打印機，電子郵件系統等模塊。 這里由于和前端寶寶們的關系不太大，我就不過多贅述了。
</div>
JS引擎怎么工作的？
首先，通過上文，我們已經明白了. 瀏覽器的引擎是指渲染引擎，JS引擎是獨立出來的一部分。那JS引擎是怎么和瀏覽器引擎相互工作的呢？實際上，JS引擎要比瀏覽器引擎高一級。
-
獲得文件時，瀏覽器開始解析文檔
-
解析到script標簽時，則會暫停解析，將控制權給JS引擎
-
如果script引用的是外部資源，則會發起請求進行加載，然后執行
-
執行完畢后再將控制權還給渲染引擎，然后繼續解析。
但，就是由于瀏覽器會將控制權交給JS引擎，所以如果你的加載的資源過長，網頁就死在哪里，一動也不動，直到你加載好為止。所以，通用的做法就是將js文件放到body底部，保證DOM樹的完整渲染。
但是，實事情況并不是這么簡單，源于JS優化加載這一塊，也是有很多優化的點的。大家有興趣，可以參閱js文件加載優化
另外，我們還需要掌握一個小tip. 瀏覽器最多能同時下載幾個文件呢？
答案是，不確定，通常來說是6個，而IE11則是13個。這里的文件，不僅僅指js和css而是指，一切通過請求發送的，都算一份文件。所以，通常的做法就是，合并腳本，CDN優化，資源分布防止。
什么是重流||重繪？
通常頁面在加載你的js,css,img等文件時，引擎會對文件加以解析，最終生成兩顆樹，渲染樹和DOM樹. DOM樹中的需要顯示節點在渲染樹中都會存在,但是display:none的則不會存在。 可以說，渲染樹是指定DOM顯示的真實節點，而DOM樹則是頁面顯示的HTML結構。 在渲染樹中，常常將節點成為幀或者盒子。這里，也可以理解為渲染樹，其實就是css文件指定節點的樣式表。
當渲染樹和DOM樹都已經完成的時候，則開始將頁面顯示到桌面上了。
這時候，如果你改變頁面的DOM結構，瀏覽器則會重新改動涉及到的DOM. 此時你的渲染樹和DOM樹就會發生改變。
瀏覽器會重新計算出渲染樹這一過程叫做重流(重排).
將更新后的結構重新渲染到頁面這一過程叫做重繪。
整個流程就是這個圖
對于重流重繪，這里也有非常多的優化點可以參閱。 如果有興趣的同學，可以看看我的另一篇，優化你的DOM。
</div>
本文由用戶 RalRIK 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！