最小化重绘和重排之缓存布局信息
来源:互联网 发布:移动金融的软件 编辑:程序博客网 时间:2024/06/05 10:44
浏览器有其自身的最小化重绘和重排的策略,即使用一个队列将需要重排的操作保存,然后进行批量执行以减小reflow和repaint的次数。然而,我们在操作DOM或者编写交互的JavaScript脚本时通常需要动态获取以下信息:
- offsetTop、offsetLeft、offsetWidth、offsetHeight等;
- clientTop、clientLeft、clientWidth、clientHeight等;
- scrollTop、scrollLeft、scrollWidth、scrollHeight等;
- getComputedStyle()(兼容性较好,主流及IE9+均支持)
由于是动态获取这些布局信息,因此每次查询这些属性值时都会触发上述的队列进行reflow和repaint,从而达不到最小化重绘和重排的目的。
其实,我们只需要使用一个局部变量缓存这些需要查询的值,高密度执行的操作中(拖拽等操作)这些值暂时会使用这个缓存的值而不是每次使用上述的那些信息时都要触发reflow和repaint操作。
References
- MDN-getComputedStyle()
阅读全文
0 0
- 最小化重绘和重排之缓存布局信息
- 最小化重绘和重排之批量修改DOM
- javascript性能提升——最小化重绘和重排
- 重绘和重排
- 浏览器重排和重绘
- js性能-DOM编程之重绘和重排
- 页面渲染之重排reflow和重绘repaint
- 浏览器的重排和重绘
- 重绘和回流(重排)
- 浏览器的重绘和重排
- 什么是浏览器的重排(reflow)和重绘 (repaint)?如何减少重排和重绘?
- 重绘与重排
- 高性能JavaScript之重绘与重排
- 浏览器渲染页面的过程,以及重绘和重排
- 浏览器的重绘和重排的影响
- css 页面重绘和回流(重排)以及优化
- css 页面重绘和回流(重排)以及优化
- 浏览器渲染页面的过程,以及重绘和重排
- ajax跨域请求
- eclipse编译cocos2d-x2.2.x移植到Android
- Word Vectors详解(1)
- PhotoShop中画圆角矩形最简单方法(图文并茂)!
- 计算机网络实验
- 最小化重绘和重排之缓存布局信息
- Android填坑之旅(第十二篇)由于Butterknife引发的血案
- 前端知识区别和学习路线_个人收藏
- Photoshop制作清晰的透明PNG图片的方法和技巧
- js 10元买酒
- Bootstrap 3.3.7学习笔记8
- Less 入门
- css hack
- Spring Cloud Netflix之Eureka Client Configuration