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脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

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

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

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

Dreamweaver CS6
视觉化网页开发工具

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

热门话题











无法连接 MySQL 可能是由于以下原因:MySQL 服务未启动、防火墙拦截连接、端口号错误、用户名或密码错误、my.cnf 中的监听地址配置不当等。排查步骤包括:1. 检查 MySQL 服务是否正在运行;2. 调整防火墙设置以允许 MySQL 监听 3306 端口;3. 确认端口号与实际端口号一致;4. 检查用户名和密码是否正确;5. 确保 my.cnf 中的 bind-address 设置正确。

MySQL安装报错的解决方法是:1.仔细检查系统环境,确保满足MySQL的依赖库要求,不同操作系统和版本需求不同;2.认真阅读报错信息,根据提示(例如缺少库文件或权限不足)采取对应措施,例如安装依赖或使用sudo命令;3.必要时,可尝试源码安装并仔细检查编译日志,但这需要一定的Linux知识和经验。最终解决问题的关键在于仔细检查系统环境和报错信息,并参考官方文档。

无法以 root 身份登录 MySQL 的原因主要在于权限问题、配置文件错误、密码不符、socket 文件问题或防火墙拦截。解决方法包括:检查配置文件中 bind-address 参数是否正确配置。查看 root 用户权限是否被修改或删除,并进行重置。验证密码是否准确无误,包括大小写和特殊字符。检查 socket 文件权限设置和路径。检查防火墙是否阻止了 MySQL 服务器的连接。

MySQL启动失败的原因有多种,可以通过检查错误日志进行诊断。常见原因包括端口冲突(检查端口占用情况并修改配置)、权限问题(检查服务运行用户权限)、配置文件错误(检查参数设置)、数据目录损坏(恢复数据或重建表空间)、InnoDB表空间问题(检查ibdata1文件)、插件加载失败(检查错误日志)。解决问题时应根据错误日志进行分析,找到问题的根源,并养成定期备份数据的习惯,以预防和解决问题。

可以通过以下步骤解决 Navicat 无法连接数据库的问题:检查服务器连接,确保服务器运行、地址和端口正确,防火墙允许连接。验证登录信息,确认用户名、密码和权限正确。检查网络连接,排除网络问题,例如路由器或防火墙故障。禁用 SSL 连接,某些服务器可能不支持。检查数据库版本,确保 Navicat 版本与目标数据库兼容。调整连接超时,对于远程或较慢的连接,增加连接超时时间。其他解决方法,如果上述步骤无效,可以尝试重新启动软件,使用不同的连接驱动程序,或咨询数据库管理员或 Navicat 官方支持。

MySQL 本质上不支持数组类型,但可以通过以下方法曲线救国:JSON 数组(性能效率受限);多个字段(扩展性差);关联表(最灵活,符合关系型数据库设计思想)。

MySQL配置文件损坏可通过以下方案修复:1.简单修复:若仅存在少量错误(如分号缺失),使用文本编辑器修正,修改前务必备份;2.彻底重建:若损坏严重或找不到配置文件,则参考官方文档或复制同版本默认配置文件,再根据需求修改;3.利用安装程序自带修复功能:尝试使用安装程序提供的修复功能自动修复配置文件。选择合适的方案修复后,需重启MySQL服务验证是否成功,并养成良好的备份习惯以预防此类问题。

MySQL下载提示磁盘写入错误,解决方案如下:1.检查磁盘空间是否不足,清理空间或更换更大磁盘;2.使用磁盘检测工具(如chkdsk或fsck)检查并修复磁盘错误,必要时更换硬盘;3.检查目标目录权限,确保用户账户拥有写入权限;4.更换下载工具或网络环境,使用下载管理器恢复中断下载;5.暂时关闭反病毒软件或防火墙,下载完成后重新启用。通过系统排查这些方面,即可解决问题。
