瀏覽器之我見

2021-09-11 14:24:38 字數 893 閱讀 9129

很久一前就看了網上經常看到的瀏覽器原理的一篇文章,文章的作者是保羅愛麗詩,那是剛入行時候看到的,當時確實不太理解,後來面試也經常被問到你懂瀏覽器的原理嗎?

我只能說不懂!

後來就又仔細看了看,但是一直沒去記錄下自己的認識。今天只是為了記錄下我感覺需要認真看的幾個點。

首先就算瀏覽器的構成,因為在瀏覽器的構成之中有乙個呈現引擎。

呈現引起無疑就是用來解析dom文件,並將它繪製出來,讓人可以去操作的頁面。

呈現引擎在解析的過程中也有乙個主流程,就是先生成dom樹,在生成渲染樹,在去布局layout,也就是定位,最後才是真正的繪製。

這是乙個漸進的過程,並不需要整個文件都的載入完成再去進行解析。

這樣我就門就可以明白什麼是重排或者布局,以及重繪這些概念了。

很明顯重排就是在引擎解析結構時候所觸發的事件。而重繪是在最後的繪製過程中發生的。

也就是說更新節點,或者更改全域性字型,都可能造成結構變化。

而更換顏色和背景只會有重繪過程。

顯然重排比重繪消耗更多的時間。

在解析的過程中,引擎會先從詞法和語法兩個方面分析。

而詞法就像單詞,就像漢字,首先我們要先認識這些東西,再去**它的使用規則,而這些規則就是他的語法。

解決了這些問題計算機就可以正確的將頁面呈現出來。

這裡我省略了計算機如何解析他的詞法和語法規則,因為這些對於不是研究瀏覽器如何開發出來的前端來說我覺得意義不是很大,而且複雜難懂。

還有就是dom樹和呈現樹,並不是11對應關係,取決於元素的display屬性,會產生差異。

css解析和查詢元素需要了解一下,以便造成不必要的效能消耗。

再就是dirty位系統。它是乙個元素的標記。

以及全域性布局和增量布局。

瀏覽器的快取機制可以儲存呈現器的大小,而無需重新計算。可以提高效能。

瀏覽器 瀏覽器高效搜尋

一 常見場景 以場景的形式來說明 1 場景1 網路上查詢一本書的 指定文件型別 如pdf 如 搜尋關鍵字 c primer plus 的 pdf 版本 輸入 格式 關鍵字 空格 filetype pdf 例項 c primer plus中文版 filetype pdf關鍵字 filetype 2 場...

常見瀏覽器 瀏覽器核心

常見瀏覽器介紹 瀏覽器是網頁執行的平台,常用的瀏覽器有ie 火狐 firefox 谷歌 chrome safari和opera等。我們平時稱為五大瀏覽器。瀏覽器核心 理解 瀏覽器核心又可以分成兩部分 渲染引擎 layout engineer 或者 rendering engine 和 js 引擎。渲...

pc瀏覽器模擬手機瀏覽器

很多 都通過user agent來判斷瀏覽器型別,如果是3g手機,顯示手機頁面內容,如果是普通瀏覽器,顯示普通網頁內容 谷歌chrome瀏覽器,可以很方便地用來當3g手機模擬器。在windows的 開始 執行 中輸入以下命令,啟動 谷歌瀏覽器,即可模擬相應手機的瀏覽器去訪問3g手機網頁 谷歌andr...