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

資訊專欄INFORMATION COLUMN

衣食父母-瀏覽器

wizChen / 1818人閱讀

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

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

1、背景

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

主流瀏覽器

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

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

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

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

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

渲染主流程

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

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

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

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

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

2、css阻塞

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

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

3、javascript阻塞

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

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

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

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

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

相關(guān)文章

  • 衣食父母-瀏覽器

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

    icyfire 評論0 收藏0

  • 衣食父母-瀏覽器

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

    stormjun 評論0 收藏0

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

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

    Lycheeee 評論0 收藏0

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

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

    walterrwu 評論0 收藏0

發(fā)表評論

0條評論

wizChen

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<