首页 web前端 js教程 js防止DIV布局滚动时闪动的解决方法_javascript技巧

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

May 16, 2016 pm 04:32 PM
div js 布局 滚动 解决方法 防止

本文实例讲述了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程序设计有所帮助。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

deepseek服务器繁忙怎么解决 deepseek服务器繁忙怎么解决 Mar 12, 2025 pm 01:39 PM

DeepSeek:火爆AI遭遇服务器拥堵,如何应对?DeepSeek作为2025年开年爆款AI,免费开源且性能媲美OpenAIo1正式版,其受欢迎程度可见一斑。然而,高并发也带来了服务器繁忙的问题。本文将分析原因并提供应对策略。DeepSeek网页版入口:https://www.deepseek.com/DeepSeek服务器繁忙的原因:高并发访问:DeepSeek的免费和强大功能吸引了大量用户同时使用,导致服务器负载过高。网络攻击:据悉,DeepSeek对美国金融界造成冲击,

gate.io官方登录网页版 gate.io登录网址2025 gate.io官方登录网页版 gate.io登录网址2025 Feb 20, 2025 pm 02:09 PM

Gate.io交易所为用户提供官方登录入口。通过官方网站或移动应用程序,用户可以登录其账户。登录步骤简便,包括输入注册时使用的电子邮件或手机号码,以及密码。为了确保账户安全,建议用户定期更改密码并妥善保管登录信息。此外,文中还提供了针对常见登录问题的解决方法,包括无法登录和密码丢失等情况。

芝麻开门交易所怎么调成中文 芝麻开门交易所怎么调成中文 Mar 04, 2025 pm 11:51 PM

芝麻开门交易所怎么调成中文?本教程涵盖电脑、安卓手机端详细步骤,从前期准备到操作流程,再到常见问题解决,帮你轻松将芝麻开门交易所界面切换为中文,快速上手交易平台。

芝麻开门交易所app官方下载 芝麻开门交易所官方版下载 芝麻开门交易所app官方下载 芝麻开门交易所官方版下载 Mar 04, 2025 pm 11:54 PM

芝麻开门交易所 app 官方下载步骤,涵盖安卓、iOS 系统下载流程,以及常见问题解决方法,助你安全、快速下载,开启加密货币便捷交易。

芝麻开门交易所网页版登入口 最新版gateio官网入口 芝麻开门交易所网页版登入口 最新版gateio官网入口 Mar 04, 2025 pm 11:48 PM

详细介绍芝麻开门交易所网页版登入口操作,含登录步骤、找回密码流程,还针对登录失败、无法打开页面、收不到验证码等常见问题提供解决方法,助你顺利登录平台。

分片技术如何解决以太坊扩容难题? 分片技术如何解决以太坊扩容难题? Feb 27, 2025 pm 05:00 PM

解决方法:1、并行处理交易;2、减轻节点负担;3、提高共识效率等等。

买币无法付款怎么办?买币为什么会被冻结? 买币无法付款怎么办?买币为什么会被冻结? Mar 05, 2025 pm 06:45 PM

在数字货币交易平台进行交易时,最令人担忧的情况莫过于买币后卖家未放币或买家无法付款。这两种情况都会严重影响后续交易。本文将重点讲解买家无法付款的应对方法。买币无法付款怎么办?遇到无法付款的情况,首先应检查自身支付方式及账户状态,其次确认网络及交易平台是否正常运行。若问题依旧,联系平台客服通常是最有效的解决途径。以下是一些更详细的解决方法:支付方式问题:部分银行或信用卡机构可能限制加密货币相关交易,尤其涉及国际支付。建议尝试联系银行或信用卡公司了解限制情况并寻求临时解除;或改用其他支付方式,

币安注销帐号教学:推荐码没输入怎么办?删除帐号重新注册! 币安注销帐号教学:推荐码没输入怎么办?删除帐号重新注册! Mar 04, 2025 am 07:06 AM

彻底了解币安账户删除流程及注意事项!本文将详细指导您如何删除币安账户,并提供在删除前需要检查的关键事项。删除币安账户的原因分析用户可能出于以下原因选择删除币安账户:未填写推荐码:许多用户在注册时未填写推荐码,错失手续费优惠。由于币安不支持事后补填,删除账户并重新注册是唯一解决方法。更换交易所:用户可能因界面、功能或验证流程等原因选择更换交易所,并决定删除币安账户。安全顾虑:交易所安全事件可能导致用户担忧,选择删除账户以降低风险。删除币安账户流程请务必在删除账户前确

See all articles