提到重排与重绘肯定要提到浏览器对文档的渲染流程,如下图
![](https://box.kancloud.cn/758f47c341023f73f1820883065f6e49_1026x555.png)
重排,一些人又叫做回流,在谷歌浏览器中叫 Layout,火狐中叫reflow
浏览器在第一次解析文档的时候 会不断的进行重排与重绘,display:none不会渲染,绝对定位会脱离文档流 所以可以将一些比较复杂的动画使用绝对定位 让其在其他地方渲染不阻塞正常的渲染。
除了第一次渲染页面会重排,当几何属性发生变化的时候也会引发重排,如浏览器的窗口大小发生变化,元素的大小、位置发生变化,增删一些dom里的元素,元素内容发生改变(宽高撑起来)。
重排一定伴随着重绘,重绘不一定有重排如文字颜色,背景颜色的改变不会引起重排但是有重绘。
这里梳理一下,从输入地址到渲染呈现页面经过了那些过程,这张图还可以在细化很多,这里写个大概的流程就好了。
![](https://box.kancloud.cn/5dbe8fb96fa742401611f617bb20971e_1012x497.png)
- 以专业工程师的标准要求自己
- JS
- 函数的this
- 函数的argument
- 函数的apply、bind、call方法
- 创建对象
- 构造函数创建对象
- 原型结合构造函数创建对象
- 原型
- 继承
- 闭包
- 正则表达式
- Ajax
- 设计模式
- ES6
- es6的模块化
- 定义变量的新方式
- 函数扩展
- 数组扩展
- 性能与工程化
- 关于http与缓存
- 重排(reflow、layout)与重绘
- 页面性能
- gulp
- webpack
- 一些项目回顾总结
- 移动端&微信H5游戏
- 微信小程序
- Vue.js
- 随手记录
- 如何通过前端技能获取2018世界杯门票
- jsonp
- es6 javascript对象方法Object.assign()
- 一份不错的基础面试题
- vscode常用插件
- koroFileHeader
- 构建自己的Js工具库
- H5 game
- Phaser从入坑到放弃再入坑
- 1.游戏的创建
- 2.资源的加载
- 3.phaser中的舞台,世界和摄像机
- 4.游戏缩放控制,移动端的适配
- 5.phaser中的显示对象
- 1.概述
- 2.phaser中的图片,图形,和按钮
- 3.phaser中的精灵
- 4.文字
- 5.组
- 6.phaser中的动画
- 7.粒子和瓦片地图
- 8.瓦片地图
- lodash
- ES5 to ESNext — here’s every feature added to JavaScript since 2015
- 防抖(debounce) 和 节流(throttling)