從 URL 輸入到頁面展現(xiàn)的過程


基本的名詞概念:

URL:統(tǒng)一資源定位符。用于定位互聯(lián)網(wǎng)上的資源
協(xié)議:http https ftp file
IP:每個處于互聯(lián)網(wǎng)的機器都有一個IP
127.0.0.1代表本機的IP
DNS
服務(wù)器:服務(wù)器是一臺安裝系統(tǒng)的服務(wù)器缀皱,常見的系統(tǒng)如 Linux系統(tǒng)里安裝的處理請求的應(yīng)用叫Web server
Web server: 接受用戶的請求斗这,返回給網(wǎng)站的代碼

從URL輸入到頁面展示的過程:

1.在瀏覽器里輸入URL
2.域名解析

把域名解析成IP。域名存在的作用就是方便記憶啤斗。
域名解析的流程:
(1)在瀏覽器里找緩存:瀏覽器會緩存DNS一段時間
(2)在系統(tǒng)緩存里查找:從 Host文件查找是否有該域名對應(yīng)的IP
(3)在路由器緩存里查找:一般的路由器也會緩存域名
(4)在ISPDNS緩存里查找
(5)在根域名服務(wù)器查找域名對應(yīng)的IP

3.服務(wù)器處理

web server接受用戶的請求表箭,并返回代碼
web server 擔任管控的角色,對于不同用戶發(fā)送的請求钮莲,會結(jié)合配置文件免钻,把不同請求委托給服務(wù)器上處理對應(yīng)請求的程序進行處理(例如CGI腳本,JSP腳本臂痕,servlets伯襟,ASP腳本,服務(wù)器端JavaScript握童,或者一些其它的服務(wù)器端技術(shù)等),然后返回后臺程序處理產(chǎn)生的結(jié)果作為響應(yīng)肥卡。

4.網(wǎng)站處理流程

網(wǎng)站處理,就是實際后臺處理的工作氛琢。后臺開發(fā)現(xiàn)在有很多框架,但大部分都還是按照MVC設(shè)計模式進行搭建的撮奏。
MVC是一個設(shè)計模式,將應(yīng)用程序分成三個核心部件:模型(model)-- 視圖(view)--控制器(controller),它們各自處理自己的任務(wù)株依,實現(xiàn)輸入恋腕、處理和輸出的分離获高。

(1)淤井、視圖(view)

視圖是用戶看到并與之交互的界面。這是前端工作的主力部分漩绵。

(2)侨糟、模型(model)

模型是將實際開發(fā)中的業(yè)務(wù)規(guī)則和所涉及的數(shù)據(jù)格式模型化蕴忆,應(yīng)用于模型的代碼只需寫一次就可以被多個視圖重用。在MVC的三個部件中卓鹿,模型擁有最多的處理任務(wù)澜倦。一個模型能為多個視圖提供數(shù)據(jù)。

(3)桩卵、控制器(controller)

控制器接受用戶的輸入并調(diào)用模型和視圖去完成用戶的需求钩乍。Controller處于管理角色,從視圖接收請求并決定調(diào)用哪個模型構(gòu)件去處理請求排作,然后再確定用哪個視圖來顯示模型處理返回的數(shù)據(jù)楞件。

五、瀏覽器處理

通過后臺處理返回的html字符串結(jié)果會被瀏覽器讀取解析,對應(yīng)就是html頁面加載、解析拓轻、渲染的工作。
1溢十、加載
瀏覽器對一個html頁面的加載順序是從上而下的宗挥,并在加載過程并行進行解析渲染處理瞒大。在這個過程中遇到link標簽踢械、image標簽、script標簽時嫩与,瀏覽器會再次向服務(wù)器發(fā)送請求獲取css文件埃篓、圖片資源、js文件胶征,并執(zhí)行js代碼,同步進行加載解析。
2、解析、渲染
解析的過程,其實就是生成解析樹且警,即dom樹杏头。dom樹是由dom元素及屬性節(jié)點組成厦画,加上css解析的樣式對象和js解析后的動作實現(xiàn)。而渲染怖糊,就是將DOM樹進行可視化表示扰魂。下一步就來到了繪制網(wǎng)頁的工作階段。

六、繪制網(wǎng)頁

瀏覽器通過上面步驟計算得到渲染樹初斑,是DOM樹的可視化表示乎澄,構(gòu)建渲染樹使頁面以正確的順序繪制出來浙于,遵循一定的渲染規(guī)則胸竞,經(jīng)過一系列的渲染工作剃盾,實現(xiàn)網(wǎng)站頁面的繪制,由此最終完成了頁面展示。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市慌烧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌肉瓦,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钉疫,死亡現(xiàn)場離奇詭異备燃,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門讶隐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來畏妖,“玉大人玻熙,你說我怎么就攤上這事。” “怎么了概而?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵集惋,是天一觀的道長厚脉。 經(jīng)常有香客問我鸯匹,道長,這世上最難降的妖魔是什么尔苦? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮屋讶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘挤土。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著踊挠,像睡著了一般模蜡。 火紅的嫁衣襯著肌膚如雪则披。 梳的紋絲不亂的頭發(fā)上阱洪,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天,我揣著相機與錄音菠镇,去河邊找鬼冗荸。 笑死,一個胖子當著我的面吹牛利耍,可吹牛的內(nèi)容都是我干的蚌本。 我是一名探鬼主播盔粹,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼程癌!你這毒婦竟也來了舷嗡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤嵌莉,失蹤者是張志新(化名)和其女友劉穎咬崔,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體烦秩,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年郎仆,在試婚紗的時候發(fā)現(xiàn)自己被綠了只祠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡扰肌,死狀恐怖抛寝,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情曙旭,我是刑警寧澤盗舰,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站桂躏,受9級特大地震影響钻趋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜剂习,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一蛮位、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鳞绕,春花似錦失仁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至冤竹,卻和暖如春拂封,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背贴见。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工烘苹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人片部。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓镣衡,卻偏偏與公主長得像霜定,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子廊鸥,可洞房花燭夜當晚...
    茶點故事閱讀 45,685評論 2 360

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