天天看點

前端基本知識

結果就是:

!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中的标簽的支援數.

比如已經廢棄的< dir>标簽.

doctype

dir

h5

x

xhtml1.1

html 4.01<br/>transitional

y

說白了,dtd就是制定你文檔中的标簽能夠被浏覽器識别。 

但是,奇葩的是h5現在并不依賴于sgml了, 也就是說,你可以已定義一些tag, 而不需要對内部進行更改了。

由于各大浏覽器廠商已經對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打。

上述,僅供意淫。因為騰訊在前端時間出了x5的核心。 結果,業界一片嘩然,本着支援國産的心态去試一試。結果,蠢哭了~ x5原來是基于android 4.2的webkit. 其實就相當于早期的ie。不過好像已經換掉了,忽略掉吧。 

另外,mozilla公司最近正在開發一個新的引擎servo,聽風好像很好用的,可以多核喲~

好了,基本情況就說到這,關于浏覽器核心的風風雨雨都是浮雲,我們來看一看,核心的基本運作吧。

當浏覽器就收到你的html檔案和css檔案時,觸發過程是這樣的.

前端基本知識

首先parse對檔案進行解析

然後将對應的html生成為dom

css解析為css object model.

然後兩者合并進行render

最後繪制到頁面上

上述就是核心的核心部分. 核心還有其他的很多部分,比如連接配接顯示器,列印機,電子郵件系統等子產品。 這裡由于和前端寶寶們的關系不太大,我就不過多贅述了。

首先,通過上文,我們已經明白了. 浏覽器的引擎是指渲染引擎,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樹就會發生改變。

浏覽器會重新計算出渲染樹這一過程叫做重流(重排). 

将更新後的結構重新渲染到頁面這一過程叫做重繪。

整個流程就是這個圖

前端基本知識