iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
10
Software Development

來做個網路瀏覽器吧!Let's build a web browser!系列 第 1

做一個瀏覽器之前,先來認識瀏覽器

  • 分享至 

  • xImage
  •  

本系列目錄 《來做個網路瀏覽器吧!》文章列表

Why

很久以前就想寫關於瀏覽器的系列文章了,至於多久以前,其實大概也才幾個月吧。幾個月前我突然想往開源社群發展,誤打誤撞便開始了我對 Mozilla 的 Servo 專案的貢獻之路。Servo 專案是新一代瀏覽器引擎,強調平行化處理,因此速度會更快。在上面我也算是活躍社群貢獻者,幾個月下來對瀏覽器引擎開發也算或多或少有了解。事實上我更想從網路上吸取大量相關知識,可惜瀏覽器不是顯學,幾乎沒什麼資料可以參考,有也就那幾篇。而我專門挑中文資料缺少的領域寫文章,雖然其實這次英文資料也少得可憐,如果能讓中文界對於瀏覽器的了解更深一步,我很樂意寫文章彌補一點缺憾!系列大概分兩大主軸,其一是輕鬆簡單的原理和背景知識,其二則是比較進階的實作方式。

What

何謂瀏覽器,大家每天都在用,感覺我都不需要說明了呢!你每天用的 Chrome、Firefox 就是瀏覽器,你操作的是他的使用者介面,也就是網頁的畫面呈現好了,你還可以使用一些介面上功能,例如書籤、歷史紀錄、回到上一頁等等之類的東西,方便你瀏覽網頁。但是在你看到「看得到的」網頁之前,網頁都只是冰冷的程式碼,這就要靠瀏覽器引擎來做處理,讓程式碼變成一塊一塊的圖形和文字。一個好的瀏覽器要兼具使用介面友善跟程式處理快速,簡單來說就是你使用起來覺得很直觀很方便,瀏覽網站的時候覺得速度很快。在排除網路速度、電腦規格的情況下,好的瀏覽器帶你上天堂,爛的瀏覽器讓你生不如死。

How

簡單來說,瀏覽器會先從對方的伺服器(也就是網址,像是 https://tigercosmos.github.io)下載網頁的原始碼,網頁原始碼通常會有很多檔案,但最簡單來說就是 htmljscss,下載完之後,瀏覽器會解析原始碼生成 dom tree、rule tree 和 rendering tree。最後把 layout 渲染在你所看到的螢幕畫面。
有點玄? 我們仔細來分析。

下載

瀏覽器首先向你在上面搜尋欄位輸入的網址(URL)提出請求,對方伺服器就會把第一份檔案 index.html 傳給你。這邊要說一下伺服器原理,當你輸入網址的時候,伺服器收到訊息說有人向他要檔案,但是這時候伺服器只會給你一個「最原始的 html」,這跟網頁的形成架構有關係,因為一個網頁是由第一個 html 去連結更多的 htmljscss。當下載完 index.hmtl 之後,瀏覽器會根據這份文件去把其他檔案,以及其他檔案連結的更多檔案通通下載下來。
雖然說網路速度影響這步驟很多,但別小看這步驟,如何下載也是有學問的,比方說你要是能提早知道該下載,那不就變快了嗎?這部分還牽扯到網站的優化以及 HTTP 協定,甚至更多細節。

解析

網頁原始碼中,我們把 html 稱之為 DOM tree,而 css 可以稱為 rule tree,兩者結合起來稱為 render tree。 DOM 可以想像成網頁中的一塊一塊元素,rule 則是賦予一塊一塊元素形狀、大小、顏色等等,因為靠這前兩者的結合我們可以把畫面弄出來,進而可以渲染,所以叫 render tree。
js 的功能則是去變化 DOM tree 和 rule tree,並且是「事後改變」,比方說按按鈕之後增加元素,送出資料改變畫面部分內容之類的。

Layout & Render

在前一個步驟解析完之後,瀏覽器就知道這個網站的 tree 長怎樣,計算完每個 tree 節點的位子和大小形狀顏色,進而可以依照 render tree 順序把網站畫出來。網頁的元素是照順序排列,從左到右,從上到下,任一元素變化都會造成其他元素移位,就像是搭捷運人擠人那樣,這種情況稱為 reflow。而當 render tree 有變化時候,layout 便會被從新計算,進而重新 render(reflow)。

解析和渲染可以說是瀏覽器最最關鍵的部分,效能好不好,速度快不快基本上就靠這邊的技術了,而之後也會針對這幾個主題詳細討論。今天就到這邊囉~大家明天見!


關於作者

劉安齊

軟體工程師,熱愛寫程式,更喜歡推廣程式讓更多人學會


下一篇
先來看看瀏覽器內核長怎樣吧!
系列文
來做個網路瀏覽器吧!Let's build a web browser!35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
r567tw
iT邦研究生 5 級 ‧ 2017-12-12 09:17:59

終於等到大大的文章了! 謝謝你的講解,身為一個web 工程師,對於瀏覽器不瞭解好像也說不過去哈哈,有點好奇,之後你將用甚麼程式語言做網路的瀏覽器呢?

看更多先前的回應...收起先前的回應...
微中子 iT邦新手 4 級 ‧ 2017-12-12 09:24:49 檢舉

之後文章應該會介紹一下市面上的瀏覽器怎樣寫的
目前貢獻的 Servo 是用 Rust 語言寫的

r567tw iT邦研究生 5 級 ‧ 2017-12-12 11:31:07 檢舉

所以如果沒有rust 語言基礎的有需要先去把rust 學看看嗎? 還是只要有程式基礎就可以呢?

微中子 iT邦新手 4 級 ‧ 2017-12-12 14:57:32 檢舉

有程式基礎可以看懂邏輯,想實際寫出來還是要研究一下語言

r567tw iT邦研究生 5 級 ‧ 2017-12-12 19:57:31 檢舉

謝謝你的建議喔!

0
konekoya
iT邦新手 5 級 ‧ 2017-12-12 09:18:29

https//:tigercosmos.github.io 網址錯了喔

微中子 iT邦新手 4 級 ‧ 2017-12-12 09:23:41 檢舉

謝謝提醒 打太快沒發現 lol

konekoya iT邦新手 5 級 ‧ 2017-12-12 09:27:58 檢舉

期待後面的文章 :) Rust 最近蠻常在社群看到的

我要留言

立即登入留言