当前位置: 首页 > 编程笔记 >

如何减少浏览器的reflow和repaint

闽鸿宝
2023-03-14
本文向大家介绍如何减少浏览器的reflow和repaint,包括了如何减少浏览器的reflow和repaint的使用技巧和注意事项,需要的朋友参考一下

1.避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行,具体的方法包括但不完全包括以下几种:

(1). 先将元素从document中删除,完成修改后再把元素放回原来的位置
(2). 将元素的display设置为”none”,完成修改后再把display修改为原来的值
(3). 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document

2.集中修改样式

(1). 尽可能少的修改元素style上的属性
(2). 尽量通过修改className来修改样式
(3). 通过cssText属性来设置样式值

3. 缓存Layout属性值

对于Layout属性中非引用类型的值(数字型),如果需要多次访问则可以在一次访问时先存储到局部变量中,之后都使用局部变量,这样可以避免每次读取属性时造成浏览器的渲染。
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;

4.设置元素的position为absolute或fixed

在元素的position为static和relative时,元素处于DOM树结构当中,当对元素的某个操作需要重新渲染时,浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在,而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素,从而在某种程度上缩短浏览器渲染时间,这在当今越来越多的Javascript动画方面尤其值得考虑。

以上就是个人总结的一些关于减少浏览器reflow和repaint的事项,希望大家能够喜欢。

 类似资料:
  • 问题内容: 我如何在客户端使用 HTML5 , CSS 和 JavaScript 编写网站,以便 在页面加载后 允许 客户端浏览器之间的直接tcp / ip连接 。 我需要这样做以减少延迟,因为该站点将要求将其中一个用户的输入尽快传输给另一用户,因此从客户端A到服务器再向客户端B发送数据并不是一个好习惯。选项。 我阅读了有关此主题的先前文章,但没有可用的解决方案/示例。据我了解,可以使用Silve

  • 有人能帮我吗? 提前谢了。

  • 问题内容: 在我的Arch Linux,带有Google Window Builder / SWT应用程序的Eclipse上, 我相信我需要安装XULrunner或其他东西。但是当我在Arch中安装时,我得到了。所以我尝试安装。然后,我添加到并且不确定使用哪个。但是当我跑步时,我仍然遇到相同的错误。似乎仍未使用webkit。我怎样才能解决这个问题? 更新2 到目前为止,我尝试安装。然后添加到中,我

  • Bootstrap支持多种多样的现代浏览器以及设备,还支持一些较早的浏览器。具体支持哪一些,请看下面内容。下面还列出了一些已知的漏洞的详细信息。 支持的浏览器 Bootstrap 支持所有的主流浏览器和平台的最新的、稳定的版本。 在 Windows 中, **我们支持 Internet Explorer 9-11 **。下面提供了更多详细的支持信息。 移动设备 总的来说,Bootstrap支持所有

  • 现在你可以编辑文本文件,这很好。但是如果你只想查看一个文本文件呢?当然,你可以使用 vim,但很多时候它是过度的。还有两件事要考虑: 如果你想查看非常大的文件,你将需要在尽可能快的程序中查看它。 通常你不想意外地改变文件中的某些东西。 所以,我向你介绍强大的less,少即是多。“比什么多呢?”你可能会问。嗯...有一次,有一个被称为more的浏览器。它很简单,只是向你显示你要求它显示的文本文件。它

  • 浏览器工作原理。 目录 排版引擎 ​渲染​ JavaScript 引擎 ​并发模型​ ​内存管理​ ​执行环境​ 网络通信 ​缓存​ ​Cookie​ ​跨源资源共享​ 安全 ​同源策略​ Web APIs ​事件​ ​存储​ ​定时器​ ​Fetch​ 文档操作 数据通信 图形处理 音视频处理