千亿体育

智博足跡
News新聞資訊
滄州網站建設: 網頁渲染的基本過程
Tag:智博網絡 瀏覽次數:1496

網頁(ye)渲染的(de)基本過程。瀏覽器的(de)主要作(zuo)用(yong)是(shi)(shi)將用(yong)戶輸(shu)入(ru)的(de)網站“URL”轉變成可視(shi)化的(de)圖像。這(zhe)其中(zhong)包含兩個過程,一是(shi)(shi)網頁(ye)加載(zai)過程,從(cong)“URL”到(dao)構建DOM(Document Object Model,文檔對象模(mo)型)樹;二是(shi)(shi)網頁(ye)渲染過程,從(cong)DOM樹到(dao)生(sheng)成可視(shi)化圖像,即我們看(kan)到(dao)的(de)頁(ye)面效果。

網頁渲染(ran)的(de)過(guo)程其實就是(shi)將URL對應的(de)各(ge)種資源,通(tong)過(guo)瀏覽(lan)器渲染(ran)引擎的(de)解析,輸出可視化的(de)圖(tu)(tu)像。根據數據的(de)流向,瀏覽(lan)器的(de)渲染(ran)過(guo)程可以分成三(san)個階段(duan)(以WebKit內核瀏覽(lan)器為例): 從(cong)網頁的(de)URL到構建(jian)完(wan)DOM樹(shu);從(cong)DOM樹(shu)到構建(jian)完(wan)WebKit的(de)繪(hui)圖(tu)(tu)上(shang)下文;從(cong)繪(hui)圖(tu)(tu)上(shang)下文到生成最終圖(tu)(tu)像。

1.jpg

瀏覽(lan)器(qi)(qi)渲(xuan)染引擎主(zhu)要(yao)(yao)包括HTML解(jie)(jie)(jie)釋(shi)器(qi)(qi)、CSS解(jie)(jie)(jie)釋(shi)器(qi)(qi)、布(bu)局(ju)和JavaScript(以下簡稱JS)解(jie)(jie)(jie)釋(shi)器(qi)(qi)。其中,HTML解(jie)(jie)(jie)釋(shi)器(qi)(qi)主(zhu)要(yao)(yao)作(zuo)用是(shi)將HTML文本解(jie)(jie)(jie)釋(shi)成(cheng)DOM樹(shu)(shu);CSS解(jie)(jie)(jie)釋(shi)器(qi)(qi)作(zuo)用是(shi)為(wei)DOM中各(ge)元(yuan)素對象計算出(chu)樣式信(xin)息(xi)(xi);布(bu)局(ju)則是(shi)指在DOM樹(shu)(shu)創建之后形成(cheng)一個內(nei)部(bu)表示模型,這個模型將HTML元(yuan)素與CSS樣式結合起來,計算出(chu)元(yuan)素的(de)具體(ti)大小和位置等布(bu)局(ju)信(xin)息(xi)(xi);JS解(jie)(jie)(jie)釋(shi)器(qi)(qi)能夠解(jie)(jie)(jie)釋(shi)JS代碼并(bing)通過DOM接(jie)口和CSSOM接(jie)口來修改(gai)網(wang)頁內(nei)容和樣式信(xin)息(xi)(xi),從而改(gai)變渲(xuan)染的(de)結果。隨著JS解(jie)(jie)(jie)釋(shi)器(qi)(qi)越來越重要(yao)(yao),JS解(jie)(jie)(jie)釋(shi)器(qi)(qi)逐漸脫離(li)出(chu)來成(cheng)為(wei)獨立的(de)JS引擎。


0
Copyright ? 2020 千亿体育
千亿体育