reflow(减少页面的回流)

1、什么是reflow?

reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。

因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。

以下操作会引起回流：

① 改变窗口大小

② font-size大小改变

③ 增加或者移除样式表

④ 内容变化（input中输入文字会导致）

⑤ 激活CSS伪类（:hover）

⑥ 操作class属性，新增或者减少

⑦ js操作dom

⑧ offset相关属性计算

⑨ 设置style的值

......

reflow与repaint是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。

<style type="text/css">.changeStyle { width: 100px; height: 100px; }
</style>
<script type="text/javascript">$(document).ready(function () {var el = $('id');//1el.css('width', '100px');el.css('height', '100px');//2el.css({ 'width': '100px;', 'height': '100px;' });//3 el.addClass('changeStyle');});
</script>

推荐第三种,避免第一种

以上几种做法，我这里弱弱的推荐第三种，避免第一种。

② 具有动画效果请使用absolute

因为absolute元素的改变对其它元素的回流影响不大，所以我们的动画效果的元素还是将他搞成absolute吧。

③ 避免使用表格布局（记住只是布局哦，我们数据还是应该用表格的）

④ 请绝对不要使用CSS表达式，性能杀手啊，特别是IE

⑤ 在最末改变元素

因为回流是自上而下的，所以下不及上，我们在最后面修改信息对全局影响越少。

⑥ 动画移动时候，要控制

比如我们拖动元素时候，我是在他x或者y坐标改变5px才操作，这样虽说降低了平滑度，但是对性能有提高。

reflow(减少页面的回流)相关推荐

如何减少页面的重绘和回流(14)
一.减少页面重绘和回流的方法 1.尽量使用css属性简写:如:用boder代替boder-width,boder-style,boder-color 2.批量修改元素样式 elem.className ...
页面渲染回流测试笔记
页面重绘(repaints),回流(reflow),网上已经有很多介绍了,以前也只是看看,并没有仔细理解,所以现在留点笔记一些有用的连接 http://www.zhangxinxu.com/word ...
reflow（重排、回流）和repaint（重绘）
reflow和repaint的区别: reflow:浏览器需要去渲染,当它发现某个dom发生了变化不仅仅改变自身,会导致后面的元素位置全部改变并且影响了布局,则需要倒回去重新渲染: repaint:不 ...
Web前端优化最佳实践及工具集锦(如减少页面加载时间)
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页 ...
如何减少页面加载时间（前端性能优化）
关于优化都会问到的问题,总结了以下几个方法: 减少重复的HTTP请求 (1)减少调用其他页面.文件的数量,将多个小文件合并为一个大文件 (2)精灵图(sprite) 将需要频繁加载的多个图片合成为1个 ...
grunt 压缩 html,如何使用 grunt 插件压缩合并 js ？减少页面请求数的秘诀
本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 安装好grunt后,苏南大叔下一步的计划就是配置Gruntfile.js这个配置文件.在这个文件中,苏南大叔采 ...
oracle数据回流,页面的回流与重绘
前端面试中"页面的回流与重绘"是性能优化方面经常考察的一个知识点.今天总结一下,有不对或者不全面的地方欢迎指正- 1 页面怎么呈现? 在讨论页面重绘.回流之前,需要对页面的呈现流程 ...
web页面的回流，认识与避免
一.什么是回流? 回流是会导致页面重新渲染的一些元素,从而影响性能. 二.哪些因素会导致回流? 1.调整窗口的大小: 2.改变字体,如果用rem 设置了根目录的字体大小,这样就减少了回流的次数: 3 ...
HTML：减少页面加载时间的方法
1. 重复的HTTP请求数量应尽量减少 (1)减少调用其他页面.文件的数量. (2)在使用css格式时,常会采用background载入图形文件,而每个background的图像都会产生1次HTTP ...

reflow(减少页面的回流)

reflow(减少页面的回流)相关推荐

最新文章

热门文章