很久一前就看了網上經常看到的瀏覽器原理的一篇文章,文章的作者是保羅愛麗詩,那是剛入行時候看到的,當時確實不太理解,後來面試也經常被問到你懂瀏覽器的原理嗎?
我只能說不懂!
後來就又仔細看了看,但是一直沒去記錄下自己的認識。今天只是為了記錄下我感覺需要認真看的幾個點。
首先就算瀏覽器的構成,因為在瀏覽器的構成之中有一個呈現引擎。
呈現引起無疑就是用來解析dom文件,並將它繪製出來,讓人可以去操作的頁面。
呈現引擎在解析的過程中也有一個主流程,就是先生成dom樹,在生成渲染樹,在去佈局layout,也就是定位,最後才是真正的繪製。
這是一個漸進的過程,並不需要整個文件都的載入完成再去進行解析。
這樣我就門就可以明白什麼是重排或者佈局,以及重繪這些概念了。
很明顯重排就是在引擎解析結構時候所觸發的事件。而重繪是在最後的繪製過程中發生的。
也就是說更新節點,或者更改全域性字型,都可能造成結構變化。
而更換顏色和背景只會有重繪過程。
顯然重排比重繪消耗更多的時間。
在解析的過程中,引擎會先從詞法和語法兩個方面分析。
而詞法就像單詞,就像漢字,首先我們要先認識這些東西,再去探討它的使用規則,而這些規則就是他的語法。
解決了這些問題計算機就可以正確的將頁面呈現出來。
這裡我省略了計算機如何解析他的詞法和語法規則,因為這些對於不是研究瀏覽器如何開發出來的前端來說我覺得意義不是很大,而且複雜難懂。
還有就是dom樹和呈現樹,並不是11對應關係,取決於元素的display屬性,會產生差異。
css解析和查詢元素需要了解一下,以便造成不必要的效能消耗。
再就是dirty位系統。它是一個元素的標記。
以及全域性佈局和增量佈局。
瀏覽器的快取機制可以儲存呈現器的大小,而無需重新計算。可以提高效能。