瀏覽器渲染頁面原理

2022-09-15 19:06:15 字數 1008 閱讀 9597

當了解web訪問原理後,與前端工程師或頁面重構師工作更為關係密切的應該是瀏覽器,web 頁面執行在各種各樣的瀏覽器當中,瀏覽器載入、渲染頁面的速度直接影響著使用者體驗,

特別是瀏覽器渲染頁面的原理,

頁面渲染就是瀏覽器將 html **根據 css 定義的規則顯示在瀏覽器視窗中的這個過程,

理解了原理就更會容易理解前端優化的一些準則。

主要過程:(主要參考文章:

)1. 使用者輸入**(假設是個 html 頁面,第一次訪問,無快取情況),瀏覽器向伺服器發出http請求,伺服器返回 html 檔案; (善用快取,減少http請求,減輕伺服器壓力)

2. 瀏覽器載入 html **,發現 內有乙個 引用外部 css 檔案,則瀏覽器立即傳送css檔案請求,獲取瀏覽器返回的css檔案;  (css檔案合併,減少http請求)

3. 瀏覽器繼續載入 html 中 部分的**,並且 css 檔案已經拿到手了,可以開始渲染頁面了;                              (css檔案需要放置最上面,避免網頁重新渲染)

5. 伺服器返回檔案,由於占用了一定面積,影響了後面段落的排布,因此瀏覽器需要回過頭來重新渲染這部分**; (最好都設定尺寸,避免重新渲染)

6. 瀏覽器發現了乙個包含一行 j**ascript **的 標籤,會立即執行該js**;           (script最好放置頁面最下面)

7. js指令碼執行了語句,它令瀏覽器隱藏掉**中的某個 ,突然就少了乙個元素,瀏覽器不得不重新渲染這部分**;   (頁面初始化樣式不要使用js控制)

8. 終於等到了 的到來,瀏覽器淚流滿面……

9. 等等,還沒完,使用者點了一下介面中的「換膚」按鈕,j**ascript 讓瀏覽器換了一下 標籤的 css 路徑;

10. 瀏覽器召集了在座的各位

深入學習:現代瀏覽器工作原理

瀏覽器渲染原理

最近在開發b s 框架的專案。開發都是web頁面,也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方,後台做的好,前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先,這裡有乙個新詞,渲染。什麼是網頁渲染呢?網頁渲染就是html 根據css定義的...

瀏覽器渲染原理

瀏覽器中輸入url到頁面返回的全過程 根據網域名稱,進行dns網域名稱解析 拿到解析的ip位址,建立tcp連線 向ip位址傳送http請求 伺服器處理請求 返回響應結果 關閉tcp連線 瀏覽器解析html 瀏覽器布局渲染 通過url向伺服器傳送請求,web服務端返回html文字 字串 拿到 後,瀏覽...

瀏覽器渲染原理

1.http請求階段 2.http響應階段 3.瀏覽器渲染階段 瀏覽器渲染頁面的機制和原理 程序 process 乙個程式就是乙個程序 執行緒 thread 棧記憶體 stack 用來提供環境 客戶端 瀏覽器 瀏覽器核心 拿到 後,瀏覽器在記憶體條中開闢出一塊棧記憶體,用來給 的執行環境,同時分配乙...