瀏覽器渲染原理

2022-01-19 16:26:42 字數 945 閱讀 4251

還是p話說一句:週六,沒地方去,看了會火影,然後接著看點東西,記錄之!

^^^^^^^^^^^^^^^^^ 看,那憂傷的分割線 ^^^^^^^^^^^^^^^^^

瀏覽器每天就這麼來來回回跑著,要知道不同的人寫出來的html和css**質量參差不齊,說不定哪天跑著跑著就掛掉了。好在這個世界還有這麼一群人——頁面重構工程師,平時挺不起眼,也就幫視覺設計師們切切圖啊改改字,其實背地裡還是幹了不少實事的。

說到頁面為什麼會慢?那是因為瀏覽器要花時間、花精力去渲染,尤其是當它發現某個部分發生了點變化影響了布局,需要倒回去重新渲染,內行稱這個回退的過程叫reflow。

reflow幾乎是無法避免的。現在介面上流行的一些效果,比如樹狀目錄的摺疊、展開(實質上是元素的顯 示與隱藏)等,都將引起瀏覽器的 reflow。滑鼠滑過、點選……只要這些行為引起了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化,都會引起它內部、周圍甚至整個頁面的重新渲 染。通常我們都無法預估瀏覽器到底會reflow哪一部分的**,它們都彼此相互影響著。

reflow問題是可以優化的,我們可以儘量減少不必要的reflow。比如開頭的例子中的

載入問題,這其實就是乙個可以避免的reflow——給設定寬度和高度就可以了。這樣瀏覽器就知道了的佔位面積,在載入前就預留好了位置。

另外,有個和reflow看上去差不多的術語:repaint,中文叫重繪。如果只是改變某個元素的背景色、文 字顏色、邊框顏色等等不影響它周圍或內部布局的屬性,將只會引起瀏覽器repaint。repaint的速度明顯快於 reflow(在ie下需要換一下說法,reflow要比repaint 更緩慢)。下次將通過一系列的實驗說明在firefox、ie等瀏覽器下reflow的優化

瀏覽器渲染原理

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

瀏覽器渲染原理

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

瀏覽器渲染原理

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