什么是回流采郎?
- 當一個元素自身的寬高,布局狂魔,顯示或隱藏蒜埋,或元素內部的文字結構發(fā)生變化,導致需要重新構建頁面的時候最楷,就產生了回流
什么是重繪整份?
- 當一個元素自身的寬高,布局管嬉,及顯示或隱藏沒有改變,而只是改變了元素的外觀風格的時候朗鸠,就產生了重繪
什么時候會進行回流蚯撩?
添加或者刪除可見的 DOM 元素的時候
元素的位置發(fā)生改變
元素的尺寸發(fā)生改變
內容改變
頁面第一次渲染的時候
列舉一些相關的 CSS 樣式:width、height烛占、line-height胎挎、padding沟启、margin、diaplay犹菇、border德迹、top、position揭芍、float胳搞、font-size、overflow 等
什么時候會進行重繪称杨?
- 列舉一些相關的 CSS 樣式:color肌毅、background、background-size姑原、visibility悬而、box-shadow
如何進行性能優(yōu)化?
用 transform 代替 top锭汛,left 笨奠,margin-top, margin-left… 這些位移屬性
不要使用 js 代碼對 dom 元素設置多條樣式唤殴,選擇用一個 className 代替之
不要在循環(huán)內獲取 dom 的樣式例如:offsetWidth, offsetHeight, clientWidth, clientHeight 等般婆。瀏覽器有一個回流的緩沖機制,獲取這些屬性時會產生回流
避免設置多層內聯(lián)樣式眨八,寫個外部類這樣只回流一次
讓多次回流的元素脫離文檔流比如動畫腺兴,使用 position 屬性的 fixed 值或 absolute 值
一起變化(同時修改所有需要變化的屬性)
文章的內容/靈感都從下方內容中借鑒
【持續(xù)維護/更新 500+前端面試題/筆記】https://github.com/noxussj/Interview-Questions/issues
【大數據可視化圖表插件】https://www.npmjs.com/package/ns-echarts
【利用 THREE.JS 實現 3D 城市建模(珠海市)】https://3d.noxussj.top/