溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

前端基本知識(shí)

發(fā)布時(shí)間：2020-07-04 07:30:24 來(lái)源：網(wǎng)絡(luò) 閱讀：956 作者：夢(mèng)想代碼 欄目：web開(kāi)發(fā)

什么是Doctype?


!+[TAB]

結(jié)果就是:

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

!DOCTYPE html已經(jīng)變?yōu)闃?biāo)準(zhǔn)了。 沒(méi)錯(cuò)，就是因?yàn)镠5的出現(xiàn)。
Doctype就是用來(lái)告訴browser用什么文檔標(biāo)準(zhǔn)來(lái)解析這個(gè)文檔. 而!DOCTYPE html就是告訴瀏覽器使用h6的標(biāo)準(zhǔn)來(lái)解析文檔。 
說(shuō)起DocType的內(nèi)容，這應(yīng)該算是一段血淚史。 一開(kāi)始HTML是基于SGML來(lái)進(jìn)行編譯的，通過(guò)指定DTD，我們告訴瀏覽器使用哪一種DTD來(lái)對(duì)文檔進(jìn)行解析。在HTML5以前的title上，我們都需要指定某一個(gè)DTD。
以前比較流行的有:HTML 4.01/XHTML. 分別各有3中。
常見(jiàn)的就是比較寬松的DTD：
比如:HTML4.01 Transtional

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

使用上述的DOCTYPE，就可以告訴瀏覽器用什么文檔格式進(jìn)行解析。
通常來(lái)說(shuō)，我們前端寶寶并不懂什么意思啊喂。 其實(shí)選擇不同的文檔類(lèi)型，會(huì)表示你的HTML中的標(biāo)簽的支持?jǐn)?shù).
比如已經(jīng)廢棄的< dir>標(biāo)簽.

DOCTYPEdir
H5X
XHTML1.1X
HTML 4.01<br/>TransitionalY

說(shuō)白了，DTD就是制定你文檔中的標(biāo)簽?zāi)軌虮粸g覽器識(shí)別。 
但是，奇葩的是H5現(xiàn)在并不依賴(lài)于SGML了， 也就是說(shuō)，你可以已定義一些tag, 而不需要對(duì)內(nèi)部進(jìn)行更改了。

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

由于各大瀏覽器廠商已經(jīng)對(duì)H5有了完美的支持，所以，上文介紹的都已經(jīng)成為歷史，此致緬懷我們已經(jīng)逝去的SGML。

扒扒瀏覽器內(nèi)核

What's make of browser?
browser = shell + kernel
也就是，我們現(xiàn)在所有所見(jiàn)的browsers都是由著兩部分構(gòu)成，shell就是我們的GUI界面，讓我們能夠所見(jiàn)即所得的操作瀏覽器，而內(nèi)部shell就是調(diào)用kernel來(lái)進(jìn)行相關(guān)的操作的。 其實(shí)，這個(gè)就和我們前端寶寶，和后臺(tái)寶寶是一樣的。 我們前端要什么東西，任性的告訴后臺(tái).
前端: 帥哥，我要做這個(gè)，你幫我執(zhí)行一下后臺(tái)命令哦
后臺(tái): 好的~
也就是，shell給kernel穿了一件美麗的clothers讓他的交互變得更加容易。
但說(shuō)到底，瀏覽器本身的注重點(diǎn)就是在kernel上。
在前幾年的瀏覽器中，由于js并沒(méi)有得到充分的利用，所以，大部分的時(shí)候，瀏覽器的內(nèi)核是有兩部分構(gòu)成:渲染引擎和JS引擎。 這時(shí)候，前端到了蒸汽時(shí)代，js快速發(fā)展，碾壓了世界上其他的語(yǔ)言。

php是世界上最好的語(yǔ)言，但是js將統(tǒng)治全宇宙

而且得力于Chrome的V8, 使得js變得奇快無(wú)比。 現(xiàn)在，瀏覽器的內(nèi)核，只能包括渲染引擎。 JS引擎已經(jīng)獨(dú)立出來(lái)了(最著名的就屬V8)。 所以，現(xiàn)在，我們經(jīng)常所說(shuō)的瀏覽器的引擎，就是渲染引擎。
當(dāng)今比較流行的引擎有(2015-2-17)

內(nèi)核瀏覽器
TridentIE系列
Geckofirefox
WebkitSafari,Android
blinkChrome,Opera

大致就這幾種。壯士，莫慌，我這里還有小道消息。 如果知道webview的同學(xué)一定會(huì)想要追著微信，QQ打。

tm,我怎么調(diào)試，md...你這又不支持。你的文檔嘞~ flex你支持不全面，出bug了呀~

上述，僅供意淫。因?yàn)轵v訊在前端時(shí)間出了X5的內(nèi)核。 結(jié)果，業(yè)界一片嘩然，本著支持國(guó)產(chǎn)的心態(tài)去試一試。結(jié)果，蠢哭了~ X5原來(lái)是基于android 4.2的webkit. 其實(shí)就相當(dāng)于早期的IE。不過(guò)好像已經(jīng)換掉了，忽略掉吧。 
另外,Mozilla公司最近正在開(kāi)發(fā)一個(gè)新的引擎Servo，聽(tīng)風(fēng)好像很好用的，可以多核喲~
好了，基本情況就說(shuō)到這，關(guān)于瀏覽器內(nèi)核的風(fēng)風(fēng)雨雨都是浮云，我們來(lái)看一看，內(nèi)核的基本運(yùn)作吧。
當(dāng)瀏覽器就收到你的HTML文件和CSS文件時(shí)，觸發(fā)過(guò)程是這樣的.
前端基本知識(shí)
首先Parse對(duì)文件進(jìn)行解析
然后將對(duì)應(yīng)的HTML生成為DOM
CSS解析為CSS Object Model.
然后兩者合并進(jìn)行render
最后繪制到頁(yè)面上
上述就是內(nèi)核的核心部分. 內(nèi)核還有其他的很多部分，比如連接顯示器，打印機(jī)，電子郵件系統(tǒng)等模塊。 這里由于和前端寶寶們的關(guān)系不太大，我就不過(guò)多贅述了。

JS引擎怎么工作的？

首先，通過(guò)上文，我們已經(jīng)明白了. 瀏覽器的引擎是指渲染引擎，JS引擎是獨(dú)立出來(lái)的一部分。那JS引擎是怎么和瀏覽器引擎相互工作的呢？ 
實(shí)際上，JS引擎要比瀏覽器引擎高一級(jí)。

  1. 獲得文件時(shí)，瀏覽器開(kāi)始解析文檔

  2. 解析到script標(biāo)簽時(shí)，則會(huì)暫停解析，將控制權(quán)給JS引擎

  3. 如果script引用的是外部資源，則會(huì)發(fā)起請(qǐng)求進(jìn)行加載，然后執(zhí)行

  4. 執(zhí)行完畢后再將控制權(quán)還給渲染引擎，然后繼續(xù)解析。

但，就是由于瀏覽器會(huì)將控制權(quán)交給JS引擎，所以如果你的加載的資源過(guò)長(zhǎng)，網(wǎng)頁(yè)就死在哪里，一動(dòng)也不動(dòng)，直到你加載好為止。所以，通用的做法就是將js文件放到body底部，保證DOM樹(shù)的完整渲染。
但是，實(shí)事情況并不是這么簡(jiǎn)單，源于JS優(yōu)化加載這一塊，也是有很多優(yōu)化的點(diǎn)的。大家有興趣，可以參閱js文件加載優(yōu)化
另外，我們還需要掌握一個(gè)小tip. 瀏覽器最多能同時(shí)下載幾個(gè)文件呢？
答案是，不確定，通常來(lái)說(shuō)是6個(gè)，而IE11則是13個(gè)。這里的文件，不僅僅指js和css而是指，一切通過(guò)請(qǐng)求發(fā)送的，都算一份文件。所以，通常的做法就是，合并腳本，CDN優(yōu)化，資源分布防止。

什么是重流||重繪？

通常頁(yè)面在加載你的js,css,img等文件時(shí)，引擎會(huì)對(duì)文件加以解析，最終生成兩顆樹(shù)，渲染樹(shù)和DOM樹(shù). DOM樹(shù)中的需要顯示節(jié)點(diǎn)在渲染樹(shù)中都會(huì)存在,但是display:none的則不會(huì)存在。 可以說(shuō)，渲染樹(shù)是指定DOM顯示的真實(shí)節(jié)點(diǎn)，而DOM樹(shù)則是頁(yè)面顯示的HTML結(jié)構(gòu)。 在渲染樹(shù)中，常常將節(jié)點(diǎn)成為幀或者盒子。這里，也可以理解為渲染樹(shù)，其實(shí)就是css文件指定節(jié)點(diǎn)的樣式表。
當(dāng)渲染樹(shù)和DOM樹(shù)都已經(jīng)完成的時(shí)候，則開(kāi)始將頁(yè)面顯示到桌面上了。
這時(shí)候，如果你改變頁(yè)面的DOM結(jié)構(gòu)，瀏覽器則會(huì)重新改動(dòng)涉及到的DOM. 此時(shí)你的渲染樹(shù)和DOM樹(shù)就會(huì)發(fā)生改變。
瀏覽器會(huì)重新計(jì)算出渲染樹(shù)這一過(guò)程叫做重流(重排). 
將更新后的結(jié)構(gòu)重新渲染到頁(yè)面這一過(guò)程叫做重繪。
整個(gè)流程就是這個(gè)圖
前端基本知識(shí)


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手