前端知識普及之HTML

時間 2019-11-06

標籤前端知識普及 html 欄目 HTML 简体版

原文原文鏈接

本文采用問答模式,目的是深刻HTML內部，去學習一些咱們不常常關注，但卻實實在在存在的problem. 文章內容略顯裝逼，若是你們受不了，請帶好護目鏡。php

什麼是Doctype?能吃嗎？

我想使用過sublime的同窗，應該會有一個snippets。css

!+[TAB]

結果就是:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

沒錯，不知不覺中，!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前端

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

使用上述的DOCTYPE，就能夠告訴瀏覽器用什麼文檔格式進行解析。
一般來講，咱們前端寶寶並不懂什麼意思啊喂。其實選擇不一樣的文檔類型，會表示你的HTML中的標籤的支持數.
好比已經廢棄的< dir>標籤.android

DOCTYPE	dir
H5	X
XHTML1.1	X
HTML 4.01<br/>Transitional	Y

說白了，DTD就是制定你文檔中的標籤可以被瀏覽器識別。
可是，奇葩的是H5如今並不依賴於SGML了，也就是說，你能夠已定義一些tag, 而不須要對內部進行更改了。web

<jimmy>My name is jimmy</jimmy> //H5正常顯示

因爲各大瀏覽器廠商已經對H5有了完美的支持，因此，上文介紹的都已經成爲歷史，此致緬懷咱們已經逝去的SGML。shell

扒扒瀏覽器內核

What's make of browser?
browser = shell + kernel
也就是，咱們如今全部所見的browsers都是由着兩部分構成，shell就是咱們的GUI界面，讓咱們可以所見即所得的操做瀏覽器，而內部shell就是調用kernel來進行相關的操做的。其實，這個就和咱們前端寶寶，和後臺寶寶是同樣的。咱們前端要什麼東西，任性的告訴後臺.
前端: 帥哥，我要作這個，你幫我執行一下後臺命令哦
後臺: 好的~
也就是，shell給kernel穿了一件美麗的clothers讓他的交互變得更加容易。
但說到底，瀏覽器自己的注重點就是在kernel上。
在前幾年的瀏覽器中，因爲js並無獲得充分的利用，因此，大部分的時候，瀏覽器的內核是有兩部分構成:渲染引擎和JS引擎。這時候，前端到了蒸汽時代，js快速發展，碾壓了世界上其餘的語言。segmentfault

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
最後繪製到頁面上
上述就是內核的核心部分. 內核還有其餘的不少部分，好比鏈接顯示器，打印機，電子郵件系統等模塊。這裏因爲和前端寶寶們的關係不太大，我就不過多贅述了。

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。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。