html中的回流、重繪

回流

重新渲染頁面需要重新計(jì)算元素的幾何大小和位置，這個計(jì)算的過程稱之為回流。

回流的原因

  • 初始化的時候，第一次回流
  • 窗口大小變化
  • 字體改變
  • 增加或者移除樣式表
  • 內(nèi)容變化
  • 操作class屬性
  • 操作Dom
  • html設(shè)置行內(nèi)樣式
  • offsetWidth, width, clientWidth, scrollTop/scrollHeight的計(jì)算

避免/減少回流的方式

  • 添加class樣式
  • 修改樣式直接更換class名稱，不是改變某一個特定的屬性
  • 操作塊級元素時，可使其脫離文檔流，設(shè)置position: fixed position: absolute
  • 操作塊級元素時，可先隱藏元素，設(shè)置display: none
  • 避免循環(huán)操作元素
  • 避免使用table布局

重繪

元素更新屬性，屬性只影響元素的外觀、風(fēng)格而不影響布局的稱之為重繪。
如color屬性

回流一定會引起重繪，但是重繪不一定引起回流。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容