成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

衣食父母-瀏覽器

stormjun / 3330人閱讀

摘要：我覺(jué)得文章題目起的挺現(xiàn)實(shí)，在大行其道的今天，瀏覽器作為一款軟件已經(jīng)是很多程序員兄弟的衣食父母，所以了解一下瀏覽器是很必要的。

我覺(jué)得文章題目起的挺現(xiàn)實(shí)，在BS大行其道的今天，瀏覽器作為一款window軟件已經(jīng)是很多程序員兄弟的衣食父母，所以了解一下瀏覽器是很必要的。

1、背景

作為前端程序員一定要好奇從地址欄輸入地址后到底發(fā)生了什么

主流瀏覽器

IE、Firefox、Safari、Chrome、Opera五大家族, Firefox、Chrome是開(kāi)源的完全開(kāi)源的，safari部分開(kāi)源

瀏覽器的主要構(gòu)成

用戶界面、瀏覽器引擎、渲染引擎、網(wǎng)絡(luò)、js解釋器、UI后端、數(shù)據(jù)存儲(chǔ)，google為每個(gè)tab頁(yè)分一個(gè)渲染引擎，
注：瀏覽器引擎和渲染引擎的區(qū)別
(1) 瀏覽器引擎是一個(gè)主進(jìn)程、用來(lái)管理渲染引擎所在的進(jìn)程，渲染引擎對(duì)應(yīng)的進(jìn)程可能只屬于一個(gè)tab頁(yè)（chrome），而瀏覽器進(jìn)程屬于整個(gè)瀏覽器
(2) 渲染引擎沒(méi)有訪問(wèn)操作系統(tǒng)的權(quán)限（文件、網(wǎng)絡(luò)、設(shè)備）而瀏覽器引擎有，這樣的目的是有惡意網(wǎng)站時(shí)不會(huì)損害整個(gè)瀏覽器或者操作系統(tǒng)
(3) 當(dāng)用戶在地址欄輸入網(wǎng)址請(qǐng)求網(wǎng)頁(yè)時(shí)，渲染引擎向?yàn)g覽器引擎發(fā)出請(qǐng)求:依次調(diào)用網(wǎng)絡(luò)獲取資源，請(qǐng)求的資源到達(dá)后，瀏覽器引擎把資源傳給渲染

   渲染引擎，渲染引擎將獲取的資源進(jìn)行解析(html css js),有一些組件（布局進(jìn)程就屬于其中的某個(gè)組件）格式化后傳給瀏覽器引擎，瀏覽器在界面中將界面呈現(xiàn)出來(lái)
渲染引擎

渲染引擎有兩種Mozilla和webkit,熟悉css的同學(xué)可能感覺(jué)這倆外國(guó)字挺熟悉，對(duì)啊css兼容性的屬性都會(huì)加這倆前綴，渲染引擎就是將請(qǐng)求的資源在瀏覽器中呈現(xiàn)出來(lái)

渲染主流程

首先是獲取請(qǐng)求的文檔，文檔由8kb的數(shù)據(jù)塊構(gòu)成，8kb的大小是由tcp缺省緩沖區(qū)的大小決定的。構(gòu)建成dom樹(shù)->構(gòu)建render樹(shù)->布局render樹(shù)->繪制render樹(shù)。

(1) 渲染引擎從瀏覽器引擎獲取html文檔后開(kāi)始解析，進(jìn)行詞法分析（將輸入分成可以理解的單詞）和語(yǔ)法分析（對(duì)應(yīng)語(yǔ)言的語(yǔ)義規(guī)則，描述文檔內(nèi)容），最終根據(jù)文檔標(biāo)簽構(gòu)建一棵DOM樹(shù)(可以理解成c++的一種數(shù)據(jù)結(jié)構(gòu)),解析過(guò)程如果碰到了行內(nèi)、內(nèi)聯(lián)、外聯(lián)的css，對(duì)應(yīng)的子進(jìn)程著手cssom樹(shù)的構(gòu)建(可以理解成c++的一種數(shù)據(jù)結(jié)構(gòu)，描述樣式規(guī)則)，由于是兩個(gè)進(jìn)程所以沒(méi)有阻塞的問(wèn)題，如果解析過(guò)程中碰到了javascript，那么DOM，并且javascript的執(zhí)行需要等到cssom構(gòu)建完畢，下一步構(gòu)建渲染樹(shù)是需要兩個(gè)樹(shù)都是在完成構(gòu)建的狀態(tài)。

(2) 此時(shí)要構(gòu)建渲染樹(shù)了，先從DOM樹(shù)的根節(jié)點(diǎn)開(kāi)始逐層遍歷，然后依次在cssom中找到對(duì)應(yīng)的樣式并合并到渲染樹(shù)，如果碰到了隱藏樣式那么
直接在渲染樹(shù)種忽略。

(3) 對(duì)渲染樹(shù)進(jìn)行"布局"，之前的所有操作都沒(méi)涉及瀏覽器窗口，他們就是在這個(gè)階段聯(lián)系起來(lái)的，這樣渲染樹(shù)才能適應(yīng)不同大小的窗口，這時(shí)所有的位置和尺寸都被轉(zhuǎn)換為像素(px)

(4) 最后是將布局樹(shù)轉(zhuǎn)換格式傳給瀏覽器引擎，在瀏覽器窗口繪制。

2、css阻塞

從上文中我們知道css是阻塞的也是非阻塞的，阻塞渲染樹(shù)的構(gòu)建，但是對(duì)于dom樹(shù)的構(gòu)建是不阻塞的。如果在構(gòu)建渲染樹(shù)時(shí)是不阻塞的會(huì)發(fā)生什么，我們會(huì)看到"純html"沒(méi)有任何樣式，這樣是不友好的，但是某些時(shí)候我們確實(shí)想讓它是不阻塞的，比如涉及打印的樣式，在特定大屏上的樣式，因?yàn)樗麄儗?duì)渲染的影響比較小，此時(shí)可以采用媒體屬性(media)

注： 不阻塞不是不下載，只是在首次合成渲染樹(shù)時(shí)不受它的阻塞

3、javascript阻塞

從衣食父母-瀏覽器中我們知道javascript腳本的執(zhí)行是會(huì)阻塞DOM樹(shù)的構(gòu)建的，并且在cssom構(gòu)建完畢前停止執(zhí)行，這樣會(huì)有很大的性能開(kāi)銷(xiāo)，有沒(méi)有不阻塞的方法呢？
1、外部js異步加載

2、 內(nèi)聯(lián)js異步執(zhí)行

function h () {
    console.log(document.querySelectorAll("h1"))
}
setTimeout(h, 0)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53781.html

相關(guān)文章

  • 衣食父母-瀏覽器

    摘要：我覺(jué)得文章題目起的挺現(xiàn)實(shí)，在大行其道的今天，瀏覽器作為一款軟件已經(jīng)是很多程序員兄弟的衣食父母，所以了解一下瀏覽器是很必要的。 我覺(jué)得文章題目起的挺現(xiàn)實(shí)，在BS大行其道的今天，瀏覽器作為一款window軟件已經(jīng)是很多程序員兄弟的衣食父母，所以了解一下瀏覽器是很必要的。 1、背景 作為前端程序員一定要好奇從地址欄輸入地址后到底發(fā)生了什么 主流瀏覽器 IE、Firefox、Safari、Ch...

    wizChen 評(píng)論0 收藏0

  • 衣食父母-瀏覽器

    摘要：我覺(jué)得文章題目起的挺現(xiàn)實(shí)，在大行其道的今天，瀏覽器作為一款軟件已經(jīng)是很多程序員兄弟的衣食父母，所以了解一下瀏覽器是很必要的。 我覺(jué)得文章題目起的挺現(xiàn)實(shí)，在BS大行其道的今天，瀏覽器作為一款window軟件已經(jīng)是很多程序員兄弟的衣食父母，所以了解一下瀏覽器是很必要的。 1、背景 作為前端程序員一定要好奇從地址欄輸入地址后到底發(fā)生了什么 主流瀏覽器 IE、Firefox、Safari、Ch...

    icyfire 評(píng)論0 收藏0

  • 【機(jī)器學(xué)習(xí)】線性回歸原理介紹

    摘要：機(jī)器學(xué)習(xí)線性回歸原理介紹機(jī)器學(xué)習(xí)線性回歸實(shí)現(xiàn)機(jī)器學(xué)習(xí)線性回歸實(shí)現(xiàn)通常我們學(xué)習(xí)機(jī)器學(xué)習(xí)都是從線性回歸模型開(kāi)始的。這就是種使身高回歸于中心的作用。均方誤差作為線性回歸模型的代價(jià)函數(shù)。為了方便，這里以單變量線性回歸為例。 【機(jī)器學(xué)習(xí)】線性回歸原理介紹 【機(jī)器學(xué)習(xí)】線性回歸python實(shí)現(xiàn) 【機(jī)器學(xué)習(xí)】線性回歸sklearn實(shí)現(xiàn) 通常我們學(xué)習(xí)機(jī)器學(xué)習(xí)都是從線性回歸模型開(kāi)始的。線性回歸模型形...

    Lycheeee 評(píng)論0 收藏0

  • 大家都有自己的事情要做

    摘要：她知道，大家都有自己的事情要做，不可能經(jīng)常陪著自己。小鐵匠的腳步踏破了清晨的寧?kù)o。女老板趕走了小鐵匠。小鐵匠陶醉了，在想象的世界里，他的手指在琴弦上飛動(dòng)。哦那美妙的聲音產(chǎn)生了美妙的變奏，小鐵匠不敢相信自己的耳朵，他真的聽(tīng)到了隱隱的歌聲。 夜幕，又一次降臨。窗外，風(fēng)呼呼的刮著，她窩在墻角，蜷縮成一只貓，望著那無(wú)邊無(wú)際的黑暗，淚水終于沖破了最后的防線，她沒(méi)有去擦，任它從臉頰上滑落。五年前，...

    walterrwu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<