HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5面试题 ——> WEB前端面试真题 - 什么是回流和重绘,何时会造成页面回流和页面重绘

WEB前端面试真题 - 什么是回流和重绘,何时会造成页面回流和页面重绘

2015/12/08 00:15:56 | 作者:HTML5学堂(码匠) | 分类:HTML5面试题 | 关键词:页面重绘,页面回流,面试真题

页面回流与页面重绘

HTML5学堂:在代码优化当中,我们时常会提到页面回流与页面重绘,那么这两者到底是什么意思,又是如何引发的?为何我们要尽可能的防止页面回流?一起来看今天的文章!

页面回流与页面重绘的定义

DOM Tree 和样式结构体组合后构建render tree。一旦render tree构建完成,浏览器就会根据render tree来进行页面的绘制。

页面回流:当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而引起的页面重新渲染(或者叫做重新构建绘制)

页面重绘:当render tree中的一些元素需要更新属性,但这些属性只会影响元素的外观,风格,而不会影响到元素的布局,此类的页面渲染叫做页面重绘。

页面重绘与回流的关系:回流必将引起重绘,而重绘不一定会引起回流。

会引发页面回流的范例

DOM树发生变化 —— 如:增加一个元素或删除一个元素(元素为可见元素)

通过style控制元素的位置变化 —— 典型的例子是碰壁反弹

元素尺寸的改变 —— 盒模型的每种属性均算在其内

内容改变引发的尺寸变化 —— 如:文本改变或者图片大小改变而引起的计算值宽度和高度改变

浏览器窗口尺寸改变 —— resize事件发生时

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端