脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js防止DIV布局滚动时闪动的解决方法

js防止DIV布局滚动时闪动的解决方法

 更新时间：2014年10月30日 09:37:33   投稿：shichen2014  
这篇文章主要介绍了js防止DIV布局滚动时闪动的解决方法,通过js的window.requestAnimationFrame来解决这一问题,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js防止DIV布局滚动时闪动的方法，分享给大家供大家参考。具体方法如下：

最近接触页面性能的东西，有很多细微又原始的内容，比如浏览器渲染。资料非常多，所以选一些做节译，备忘。
JavaScript多次写、读DOM就会发生「布局颠簸」，引起文档重排(reflow – the process of constructing a render tree

复制代码 代码如下:
from a DOM tree1)。
// 读
var h1 = element1.clientHeight;
// 写 (布局作废)
element1.style.height = (h1 * 2) + 'px';
// 读 (触发布局)
var h2 = element2.clientHeight;
// 写 (布局作废)
element2.style.height = (h2 * 2) + 'px';
// 读 (触发布局)
var h3 = element3.clientHeight;
// 写 (布局作废)
element3.style.height = (h3 * 2) + 'px';

DOM被写时，布局就作废了，需要在某个时间点重排。但浏览器很懒，它想等到当前操作(或说帧)结束前再来重排。
不过，如果我们在当前操作(或说帧)结束前从DOM中读取几何数值，那么我们就强制浏览器提前重排布局，这就是所谓的「强制同步布局」(forced synchonous layout)，它会要了性能的命。
在现代的桌面浏览器上，布局颠簸的副作用可能并不明显；但放到低端移动设备上，问题就很严重了。

快速解决办法

在一个理想世界里，我们只要简单地重新排列代码执行顺序，就可以批量读DOM、批量写DOM。这意味着，文档只需一次重排。

复制代码 代码如下:
// 读
var h1 = element1.clientHeight;
var h2 = element2.clientHeight;
var h3 = element3.clientHeight;
// 写 (布局作废)
element1.style.height = (h1 * 2) + 'px';
element2.style.height = (h2 * 2) + 'px';
element3.style.height = (h3 * 2) + 'px';
// 文档在帧末重排

现实世界又如何？

现实中可就没那么简单。大型程序中，代码散播各处，个个都存在这类危险的DOM。我们没法轻松(显然也不应该)把我们漂亮的、解藕的代码揉合一块，就只是为了控制住执行顺序。那么为了优化性能，我们怎样把读和写做批量处理？

来认识requestAnimationFrame

window.requestAnimationFrame安排一个函数在下一帧执行，类似于setTimout(fn, 0)。这非常有用，因为我们可以用它来排定所有的DOM写操作在下一帧一同执行，DOM读操作就按现在的顺序同步执行。

复制代码 代码如下:
// 读
var h1 = element1.clientHeight;
// 写
requestAnimationFrame(function() {
  element1.style.height = (h1 * 2) + 'px';
});
// 读
var h2 = element2.clientHeight;
// 写
requestAnimationFrame(function() {
  element2.style.height = (h2 * 2) + 'px';
});
……

希望本文所述对大家基于javascript的web程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例

    深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例

    这篇文章主要介绍了escape()、encodeURI()、encodeURIComponent()的区别,需要的朋友可以参考下
    2014-08-08
  • D3.js实现雷达图的方法详解

    D3.js实现雷达图的方法详解

    大家应该都知道基本图表一共有六种，分别是柱状图、折线图、散点图、气泡图、饼图和雷达图。前面五种图形都已经介绍过如何实现了，今天我们一起来看看最后的雷达图。有需要的朋友们可以参考学习下。
    2016-09-09
  • js+html5实现复制文字按钮

    js+html5实现复制文字按钮

    这篇文章主要为大家详细介绍了js+html5实现复制文字按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JS运动基础框架实例分析

    JS运动基础框架实例分析

    这篇文章主要介绍了JS运动基础框架,实例分析了javascript定时器及div样式的使用技巧,需要的朋友可以参考下
    2015-03-03
  • javascript实时显示当天日期的方法

    javascript实时显示当天日期的方法

    这篇文章主要介绍了javascript实时显示当天日期的方法,可实时显示当前日期及星期的功能,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • 小程序实现日历打卡功能

    小程序实现日历打卡功能

    这篇文章主要为大家详细介绍了小程序实现日历打卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Bootstrap菜单按钮及导航实例解析

    Bootstrap菜单按钮及导航实例解析

    这篇文章主要介绍了Bootstrap菜单按钮及导航的相关资料，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-09-09
  • Javascript事件的捕获方式和冒泡方式详解

    Javascript事件的捕获方式和冒泡方式详解

    这篇文章主要为大家介绍了Javascript事件的捕获方式和冒泡方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • Bootstrap学习笔记之css组件(3)

    Bootstrap学习笔记之css组件(3)

    这篇文章主要为大家详细介绍了bootstrap学习笔记中的css组件，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • js与css实现弹出层覆盖整个页面的方法

    js与css实现弹出层覆盖整个页面的方法

    这篇文章主要介绍了js与css实现弹出层覆盖整个页面的方法,分别以实例形式展示了弹出层覆盖整个页面的css样式与js控制的实现技巧,非常具有实用价值,需要的朋友可以参考下
    2014-12-12

最新评论