如果你喜歡這內容的話幫我在 Twitter 和 Threads 上面分享給其他正在前端這條路上努力的朋友們，也別忘了訂閱我們電子報收到第一手消息喔 🚀
今天想聊聊很多面試會問的問題 瀏覽器怎麼運作的
很多人喜歡問這題來大概知道面試者的程度大概在哪裡
輸入google.com 瀏覽器會經過DNS lookup來找到google server在哪裡
然後經過一些驗證確認這個google是正確的google
最後瀏覽器會顯示https google.com而且google server也會經過一連串的過程給你一個HTML檔案
這個HTML檔案包含了各式各樣雜七雜八的資料 有圖片 文字 SEO的東西 CSS JavaScript
這時候browser就會開始重頭到尾parse這個HTML檔案
第一個看到的是除了html tag就是head tag
裡面包含了一些資料
比如分頁上看到的favicon 和 title
或是一些meta tags比如給facebook的OG tags或給Twitter的tags
在社群軟體分享網站時候會有小卡片顯示等等會用什麼圖片和文字
這些都是在OG meta tag定義的
這些是偏SEO的東西
接下來 hopefully 會有style or CSS
CSS裡面通常就是定義什麼rule會怎麼影響HTML的呈現 包含顏色 間距 圖片 甚至自定義的字體
如果是帶網址瀏覽器會開始下載這些檔案 下載完之後瀏覽器會parse然後建立跟HTML和JavaScript的關係連結
瀏覽器挺聰明的 它會繼續parse 接下來的HTML DOM但不會render 因為如果CSS還沒跑完就render的話 使用者看到的頁面會是沒有styling的會特別醜
現在好像比較少看到了 以前做SPA時候常常會有所謂的flash of unstyled content 會閃一下沒有styled的畫面然後給你styled好的
因為CSS是render blocking resources 意思是瀏覽器是會暫停render的 畫面是不會有東西的 所以CSS太大會影響總體的效能 使用者會覺得怎麼沒東西 以後會錄一集講怎麼優化前端效能
接下來有些人會把JS 或是 script tag放在head tag裡面 不是不行但算是不好的pattern
JS也是render blocking 那現在app裡面很多JS browser就會等半天 而且不是只等下載好 是等到東西都跑完才會繼續render
所以通常做法是放在最下面 等等會講到 不過也有例外 比如Google Analytics一些預先準備的code會放這邊 確保資料完整
head tag跑完就是body tag 這邊就是放主要的內容了 你的文字 圖片 影片
基本上網頁上面看到的所有內容都在body tag裡面
你可能沒有特別注意但平常寫的React Vue component到最後都是在body裡面呈現
當瀏覽器parse完HTML會產生DOM or document object model 這是一個類似的樹的架構這樣瀏覽器好追蹤node之間的關係同一時間JavaScript也可以透過DOM來修改HTML的內容
順帶一提 CSS也有CSS object model or CSSOM
那HTML越複雜 DOM的數量越多是會拖慢效能的 Google Lighthouse也有推薦DOM的數量大概在1500個以下和層級應該在32層以下最優
最後 也是比較好的pattern 是把JavaScript放在這邊也就是HTML最下面 這樣HTML和CSS的東西可以先完整的渲染出來
使用者就會覺得這個網站很快 東西已經先出來 使用者可以先看了 但因為JS還在讀取所以功能還沒跟上 不過只要你的JavaScript寫得好 這步驟應該很快就好了
如果你是寫SPA 現在寫前端的應該幾乎都是 那這部分可能就不apply了你可能還會覺得莫名其妙為何要做這個 不過如果你做server side rendering的話那這部分就很重要了 這以後會講到
這邊特別提一下script tag 預設時候是下載和parsing時候整個browser會很專心做這件事情
script tag 上面可以加async屬性 瀏覽器會邊下載邊parse HTML 但下載完後就會專心跑JS
如果加defer那除了邊下載以外 也會等HTML parse完之後再跑JS
那不同的瀏覽器本質上做的事情是差不多的 只是可能自帶的JavaScript engine不一樣 比如Safari的叫webkit firefox叫spidermonkey chrome叫V8 有時候一些JS功能為何有些瀏覽器不支援因為要等工程師把這些引擎更新了才能看懂那些JS
而且有時候也會有bug 尤其那種JS語法才在tc39 stage 1的時候 有些瀏覽器會先做出來然後可能語法更新到stage 2但瀏覽器沒有跟上 那這時候就會有落差
同樣的在CSS也會有一樣的狀況 像flex和grid在IE上面就是用舊的語法 其他browser可能都已經看不懂了 但因為微軟沒有更新了就這樣了 不過也希望你們應該也不用特別支援IE了 I hope
瀏覽器還能做很多其他的事情 當你要debug的時候 熟用browser自帶的工具會讓你事半功倍
今天先這樣啦 如果你喜歡的話就留個言讓我知道 也follow twitter定期的新的知識