瀏覽器重繪和重排

2021-07-31 03:41:38 字數 487 閱讀 9988

《我的部落格地圖》

前端開發崗位是乙個知識範圍比較綜合的乙個崗位,需要了解和**的知識很多,因此,可以從廣度和深度兩個方面著手,初級工程師以廣度學習為主,高階工程師以深度研究為主。

重排發生的情景:頁面渲染初始化、瀏覽器視窗改變、dom元素幾何屬性(width,height)變化、可見dom元素的增刪、dom樹的結構發生變化、獲取某些dom元素頂層屬性(如, offsetwidth、offsetheight、scrolltop、scrollleft...)等。

重繪不一定觸發瀏覽器重排,重排一定會觸發瀏覽器重繪。

引申:web頁面的文件流:dom元素中的可顯示元素在排列時所占用的位置,將瀏覽器視窗自上而下分成一行一行, 並在每行中按從左至右的順序排放元素,即為文件流。

文件流是相對於盒子模型而言,文字流是相對於文字段落而言,浮動(float)元素,絕對定位(absolute)元素,固定定位(fixed)元素,都會脫離文件流,即該元素會從其父元素或兄弟元素中脫離而出,不屬於文件流。

瀏覽器重繪與重排

當我們在做前端開發的時候,肯定會碰到操作dom的情況,在操作dom的時候,就會引起瀏覽器的重繪與重排。重繪 如果dom變化僅僅影響的了visibility outline 背景色等等非幾何屬性,此時就發生了重繪 repaint 而不是重排,因為布局沒有發生改變。重排 當dom變化影響了元素的幾何屬性...

瀏覽器重排與重繪

前幾天內推某街,被問到了醬紫乙個問題,了解瀏覽器的重繪與重排嗎?瞬間蒙住了,的確好像沒有怎麼聽說過。於是今天抽了點時間研究了下重排和重繪,這裡分享給大家。瀏覽器在頁面渲染過程中非常重要的兩個概念,即重排和重繪。了解這兩個概念對於你在今後寫 過程中,尤其是對效能要求比較高的話,有非常大的幫助。來看看這...

瀏覽器重排和重繪機制淺解

面試 公司的時候,遇到了 簡要描述瀏覽器回流和重繪的區別及對效能的影響,如何盡量避免對頁面效能的影響 的筆試題。由於我面試之前根本沒做任何準備,所以只是單純的寫了一下我的簡單理解 頁面回流是由於元素寬高 層級位置發生變化而引起的重新布局。頁面重繪是由於頁面元素背景顏色等不影響布局的樣式發生變化所引起...