js防止DIV布局滚动时闪动的解决方法_javascript技巧
本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考。具体方法如下:
最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染。资料非常多,所以选一些做节译,备忘。
JavaScript多次写、读DOM就会发生「布局颠簸」,引起文档重排(reflow – the process of constructing a render tree
// 读
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程序设计有所帮助。

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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

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

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

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

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

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