瀏覽器渲染頁面

1 .瀏覽器渲染引擎從網(wǎng)絡(luò)層求的文檔,一般情況下文檔會(huì)被分成8kb的大小傳輸万皿。
2 .對(duì)html進(jìn)行解析摧找。解析出Dom Tree

1.解析算法:不是使用常見的自上而下,或者是自下而上的方法進(jìn)行分析牢硅。
2.解析過程需要反復(fù)蹬耘。html是動(dòng)態(tài)代碼。例如腳本元素中的代碼可能會(huì)修改html代碼
3.容錯(cuò)機(jī)制的實(shí)現(xiàn)唤衫,原則上是不規(guī)范的標(biāo)簽也是可以顯示的婆赠。
4.將文本的html文檔,提煉出關(guān)鍵信息佳励,嵌套層級(jí)的樹形結(jié)構(gòu)休里,便于計(jì)算擴(kuò)展
5.dom樹的構(gòu)建是一個(gè)深度遍歷的過程,及當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)赃承。

3 .css解析出Style Rules

1.也是一個(gè)樹形結(jié)構(gòu)妙黍,根據(jù)css文件整理出來的類似dom Tree的樹形結(jié)構(gòu)
2.將多個(gè)css文件中的樣式合并解析出具有樹形結(jié)構(gòu)的style Rules.

4 .將二者關(guān)聯(lián)成Render Tree

1.是一個(gè)計(jì)算好樣式,與html對(duì)應(yīng)的tree瞧剖。
2.在webkit中拭嫁,解析樣式和創(chuàng)建呈現(xiàn)器的過程被稱為附加。每個(gè)DOM節(jié)點(diǎn)都由一個(gè)‘a(chǎn)ttach’方法抓于,附加是同步進(jìn)行的做粤,將節(jié)點(diǎn)插入DOM樹需要調(diào)用新的節(jié)點(diǎn)“attach”方法。
3.樣式計(jì)算捉撮。瀏覽器的默認(rèn)樣式怕品,自定義樣式表,inline樣式元素巾遭,html可視化屬性肉康。
4.規(guī)則的權(quán)重順序。style-id-class-h1

5 .Layout根據(jù)render Tree計(jì)算每個(gè)節(jié)點(diǎn)的信息

1.通過計(jì)算渲染樹中渲染對(duì)象的信息灼舍,計(jì)算出每一個(gè)渲染對(duì)象的位置和尺寸吼和,將其安置在瀏覽器窗口的正確位置,有時(shí)我們修改了dom骑素,可能還需要重新布局
2.對(duì)渲染樹的布局分為全局和局部炫乓,全局對(duì)整個(gè)渲染樹進(jìn)行重新布局,局部布局可以對(duì)渲染樹的某個(gè)部分進(jìn)行重新布局
3.布局是一個(gè)從上到下,從內(nèi)到外的遞歸過程厢岂,從根渲染光督,然后渲染下一級(jí)元素

6 .Painting:根據(jù)計(jì)算好的信息繪制整個(gè)頁面

1.繪制工作是使用用戶界面基礎(chǔ)組件完成的阳距。
2.repaint塔粒,屏幕的一部分要重畫,比如某個(gè)css的背景顏色發(fā)生改變筐摘,但是元素的幾何尺寸沒有變卒茬。
3.reflow,元素的幾何尺寸變了,我們需要重新計(jì)算render tree咖熟。
4.修改網(wǎng)頁的字體的時(shí)候也會(huì)觸發(fā)reflow圃酵。

7 .解析中出現(xiàn)的其他操作

1.瀏覽器解析文檔的時(shí)候,的那個(gè)碰到j(luò)s文件的時(shí)候會(huì)立即停止解析腳本馍管,停止解析文檔郭赐。如果腳本是外部的,會(huì)等待腳本下載完畢确沸,在繼續(xù)解析文檔捌锭。
2.如果腳本解析在解析文檔的時(shí)候請求dom樣式信息,那么這里如果沒有加載和解析樣式罗捎,腳本就會(huì)得到錯(cuò)誤的回復(fù)观谦,解決的辦法就是:放在樣式表加載和解析的時(shí)候,禁止所有的腳本桨菜,而對(duì)于webkit瀏覽器豁状,僅當(dāng)腳本嘗試訪問樣式屬性可能未受到加載的樣式表影響時(shí),才會(huì)禁止該腳本倒得。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末泻红,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子霞掺,更是在濱河造成了極大的恐慌谊路,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,464評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件根悼,死亡現(xiàn)場離奇詭異凶异,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)挤巡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門剩彬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人矿卑,你說我怎么就攤上這事喉恋。” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵轻黑,是天一觀的道長糊肤。 經(jīng)常有香客問我,道長氓鄙,這世上最難降的妖魔是什么馆揉? 我笑而不...
    開封第一講書人閱讀 59,979評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘巫延。我一直安慰自己,他們只是感情好噩茄,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著复颈,像睡著了一般绩聘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上耗啦,一...
    開封第一講書人閱讀 52,584評(píng)論 1 312
  • 那天凿菩,我揣著相機(jī)與錄音,去河邊找鬼芹彬。 笑死蓄髓,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的舒帮。 我是一名探鬼主播会喝,決...
    沈念sama閱讀 41,085評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼玩郊!你這毒婦竟也來了肢执?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤译红,失蹤者是張志新(化名)和其女友劉穎预茄,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體侦厚,經(jīng)...
    沈念sama閱讀 46,555評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡耻陕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了刨沦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诗宣。...
    茶點(diǎn)故事閱讀 40,769評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖想诅,靈堂內(nèi)的尸體忽然破棺而出召庞,到底是詐尸還是另有隱情岛心,我是刑警寧澤,帶...
    沈念sama閱讀 36,439評(píng)論 5 351
  • 正文 年R本政府宣布篮灼,位于F島的核電站忘古,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏诅诱。R本人自食惡果不足惜髓堪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逢艘。 院中可真熱鬧旦袋,春花似錦骤菠、人聲如沸它改。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽央拖。三九已至,卻和暖如春鹉戚,著一層夾襖步出監(jiān)牢的瞬間鲜戒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來泰國打工抹凳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留遏餐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓赢底,卻偏偏與公主長得像失都,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子幸冻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容