最近同事遇到一个react组件延迟渲染的问题,最后发现是由于对状态的更新理解不到位导致。具体问题描述:
(转)浏览器的回流与重绘(reflow & repaint)
原文链接:https://juejin.im/post/5a9923e9518825558251c96a
在讨论回流与重绘之前,我们要知道:
- 浏览器使用流失布局模型(Flow Based Layout)
- 浏览器会把HTML解析成DOM,把CSS解析成CSSOM, DOM和CSSOM合并就产生了RenderTree
- 有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制在页面上
- 由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍与同等元素的时间,这也是为什么避免使用table布局的原因之一
回流(Reflow)
当Render Tree中部分或全部元素的尺寸、结构、或者某些属性发生改变时,浏览器重新渲染部分或全部文档的过程
导致回流的操作:
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素的内容变化(文字数量或图片大小)
- 元素的字体大小变化
- 添加或者删除可见的DOM元素
- 激活CSS伪类(列如: :hover)
- 查询某些属性或者调用某些方法
一些常用的会导致回流的属性和方法
- clientWidth, clientHeight, clientTop,clientLeft
- offsetWidth, offsetHeight, offsetTop, offsetleft
- scrollWidth, scrollHeight, scrollTop, scrollLeft
- scrollIntoView(), scrollIntoViewNeeded()
- getComputedStyle()
- getBoundingClientReact()
- scrollTo()
重绘(Repaint)
当页面中元素样式的改变不影响他在文档流中的位置时(如;color, background-color,visibility),浏览器会将新的样式赋予给元素并重新绘制它,这个过程称为重绘
性能影响
回流比重绘的代价更高
有时即使仅仅回流一个单一的元素,它的父元素以及任何跟它的元素也会产生回流。
现代浏览器会对频繁的回流或重绘操作进行优化:
浏览器会维护一个队列,把所有引起回流和重绘的操作放在队列中,如果队列中任务数量或者时间间隔达到一个阈值时,浏览器就会清空队列,进行一次批处理,这样可以把多次回流和重绘变成一次
当你访问以下属性或方法时,浏览器会立刻清空队列:
- clientWidth, clientHeight, clientTop, clientLeft
- offsetWidth,offsetHeight, offsetTop, offsetLeft
- scrollWidth, scrollHeight,scrollTop, scrollLeft
- width, height
- getComputedStyle()
- getBoundingClientRect()
因为队列中可能会有影响代这些属性或方法返回值的操作,即使你希望获取的信息与队列中操作引发的改变无光,浏览器也会强行清空队列,确保你拿到的值是最精确的
如何避免
css
- 避免使用table布局
- 尽可能在DOM树的最末端改变class
- 避免设置多层内联样式
- 将动画应用到position属性为absolute或fixed的元素上
- 避免使用css表达式(列如calc())
JavaScript
- 避免频繁操作样式,最好一次重写style属性,或者将样式列表定义为class并一次性更改class属性
- 避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后把它添加到文档中
- 可以先为元素设置display:none,操作结束后再把它显示出来,因为display属性为none的元素上进行DOM操作不会引发回流和重绘
- 避免频繁读取会引发回流,重绘的属性,如果确定需要多次使用,就用一个变量缓存起来
- 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流
css模块化 -- css module
react中异步的处理
俗话说异步是万恶之源,但是没有异步是万万不行的
一些前端面试
以下是个人收集的一些面试题,会不定期的添加
Reducer学习入门
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。不仅于此,它还提供 超爽的开发体验,比如有一个时间旅行调试器可以编辑后实时预览。
Redux 除了和 React 一起用外,还支持其它界面库。
它体小精悍(只有2kB)且没有任何依赖。
转浅谈程序员的英语学习
作为在中国工作的程序员,不懂得英语似乎也不妨碍找到好工作,升职加薪。但程序员这个工种则稍有不同,因为程序,尤其是高级语言,基本上都是由英语和数字表达式构成的。英语对于程序员十分重要。我的大学本科全部采用英文教学,工作时也经常会遇到外国人,和他们谈笑风生,自认为自己的英语水平比园子的平均水平高一点。下面我就根据自己的经验来说说英语的学习方法。