减少回流(reflow)

回流(重排)——浏览器重新渲染部分或全部文档而重新计算文档中元素的位置

指导方针:

1.减少不必要的DOM深度

2.精简css,去除没有用处的css

3.涉及到动画,将元素absolute

4.避免不必要的复杂的css选择符,尤其是使用子选择器

什么会导致回流?

1.调整窗口大小

2.改变字体

3.增加或者移除样式

4.内容变化,比如用户在input框中输入文字

5.激活css伪类,比如,:hover

6.操作class属性

7.脚本操作DOM

8.计算offsetWidth和offsetHeight属性

9.设置sytle属性的值


重绘(repaint)——重新渲染

结论:

1,回流 必定引起 重绘

2. 重绘可能会引起回流


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • AJax 优化 缓存 Ajax 请求尽量使用GET, 仅取决于cookie数量 Cookie 优化 减少Cooki...
    KeKeMars阅读 13,090评论 5 89
  • 前端面试题的简单整理,都只是大概回答,具体某些问题的具体理解后续会补上。 前端页面有哪三层构成,分别是什么?作用是...
    李欢li阅读 3,405评论 0 2
  • 原文地址:http://www.cnblogs.com/shenqi0920/p/3545820.html#und...
    jasmine_jing阅读 4,127评论 0 3
  • 金融的核心根基是信用(Credit),两大支柱是杠杆和风险控制,庞大繁杂的金融学都可以归源于这三条。我们说天道是趋...
    尘世知行者阅读 3,573评论 0 1
  • 这是一个尽情撒野的山庄,是人们忙碌之余最好的休闲之所,在这里将所有烦心事都忘掉,在属于你的一天里,你可以尽情放松自...
    4573981ac0b6阅读 2,578评论 0 2

友情链接更多精彩内容