页面重排和重绘问题

更新日期: 2023-01-09阅读: 119标签: 渲染
页面重排(reflow)是指浏览器重新计算页面的渲染布局,通常是由于元素的尺寸、位置或者视口尺寸发生了变化导致的。重排会影响页面的性能,应尽量避免。
页面重绘(repaint)是指浏览器对已渲染的页面进行更新,通常是由于元素的样式发生了变化导致的。重绘不会影响布局,但会消耗更多的 CPU 资源。

通常情况下,浏览器会在重排后自动触发重绘,但有时候也需要手动触发重绘。重排和重绘的过程是非常消耗性能的,所以,在网页开发过程中,应该尽量避免过多的重排和重绘。


触发重排的情况

  • 页面渲染初始化时候 ,
  • 浏览器尺寸变化时,
  • 元素尺寸发生改变
  • 元素位置发生改变
  • 元素内容发生改变
  • 添加或者删除可见的dom元素


常见的触发重绘的属性

  • color
  • border-style
  • visibility
  • background
  • text-decoration
  • background-image
  • background-position
  • background-repeat
  • outline-color
  • outline
  • outline-style
  • border-radius
  • outline-width
  • box-shadow
  • background-size


建议一:

为了避免页面重排和重绘带来的性能问题,你可以采取以下措施:

  1. 尽量减少对 DOM 的操作,特别是对频繁操作的元素。

  2. 避免使用递归,尽量使用循环。

  3. 使用缓存,尽量避免重复计算。

  4. 使用 css3 的动画和过渡,避免使用 JavaScript 来控制动画。

  5. 尽量使用相对定位,避免使用绝对定位。

  6. 尽量使用轻量级的元素,如 div 和 span,避免使用重量级的元素,如 table 和 form。

当你要在 JavaScript 中操作 DOM 时,应该尽量避免使用过多的 DOM 操作,特别是对频繁操作的元素。这是因为,每次 DOM 操作都会导致浏览器进行重排和重绘,这会消耗大量的 CPU 资源,导致页面性能下降。

 

建议二:

为了避免过多的重排和重绘,有以下几点建议:

  • 尽量减少对布局的修改,尤其是在页面加载后的修改,因为这会导致浏览器的重排。
  • 使用 CSS 选择器的级别尽量低,因为浏览器在渲染时会从上到下匹配选择器,越深层的选择器匹配越慢,会导致更多的重排。
  • 使用 CSS 预处理器,可以减少代码量,从而减少重排的次数。
  • 使用计算属性或者函数计算样式,而不是直接使用字符串拼接的方式。
  • 使用动画时,尽量使用 CSS3 动画,因为 CSS3 动画可以通过硬件加速来提升性能,而 JavaScript 动画则不行。
  • 使用 requestAnimationFrame() 来控制动画的刷新率,这可以有效减少不必要的重绘。
  • 使用 transform 属性来进行位移和缩放,因为 transform 属性会触发硬件加速,而 left、top 等属性则不会。
  • 尽量避免使用 table 布局,因为 table 的布局会导致浏览器进行大量的重排。
通过这些方法,你就可以在 JavaScript 中有效地避免页面重排和重绘带来的性能问题了。


避免过多的DOM操作

为了避免过多的 DOM 操作,你可以使用以下方法:

  1. 使用文档片段(document fragment):文档片段是一个轻量级的容器,可以存储多个 DOM 元素。你可以先将所有要操作的元素放入文档片段中,然后再将文档片段添加到页面中。这样做可以减少对 DOM 的操作次数,从而提高性能。

  2. 使用 innerhtml:innerHTML 属性可以直接将一段 HTML 代码设置到元素中。你可以先使用字符串拼接的方式生成所有要操作的元素,然后再使用 innerHTML 将所有元素一次性添加到页面中。这样做可以减少对 DOM 的操作次数,从而提高性能。

  3. 使用缓存:在 JavaScript 中,你可以使用变量来缓存 DOM 元素。例如,你可以将常用的 DOM 元素存储在变量中,这样就可以直接使用变量而不必每次都去查找 DOM 元素。这样做可以减少对 DOM 的操作次数,从而提高性能。

  4. 使用事件委托:事件委托是指,将事件监听器添加到父元素上,而不是子元素。这样,当子元素触发事件时,父元素也会触发事件。这样做可以减少对 DOM 的操作次数,从而提高性能。
  5. 使用 CSS3 的动画和过渡:CSS3 的动画和过渡可以让你使用简单的代码实现复杂的动画效果。这些动画和过渡是由浏览器自动实现的,不会对 DOM 进行操作,因此可以大大提高性能。
通过这些方法,你就可以在 JavaScript 中有效地避免过多的 DOM 操作带来的性能问题了。


链接: https://www.fly63.com/article/detial/12310

vue中数据更新变化,而页面视图未渲染的解决方案

在使用vue的时候,我们都知道它是双向数据绑定的,但是在使用不熟的情况下,经常会遇到:data中的数据变化了,但是并没有触发页面渲染。下面就整理一些出现这种情况的场景以及解决办法。

服务端渲染和客户端渲染的对比

这里结合art-template模板引擎说明。首先了解下前端页面中如何使用art-template。当不需要对SEO友好的时候,推荐使用客户端渲染;当需要对 SEO友好的时候,推荐使用服务器端渲染

解决使用vue.js未渲染前代码显示问题

在使用vue的时候,偶然发现多次刷新或者网络加载缓慢的时候,会一瞬间出现设置的模板的情况。实在很影响美观,可以使用vue现成的指令来解决这个问题:v-cloak

在微信小程序中渲染html内容的实现

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢?

原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的

估计大家都听过,尽量将 CSS 放头部,JS 放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付考核当然可以,但实际应用中必然一塌糊涂

Vue渲染数据理解以及Vue指令

原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏览器的重绘和回流),Vue是一个mvvm框架(库),大幅度减少了DOM操作

Web渲染那些事儿

在决定渲染方式时,需要测量和理解真正的瓶颈在哪里。静态渲染或服务器渲染在多数情况都比较适用,尤其是可交互性对JS依赖较低的场景。下面是一张便捷的信息图,显示了服务器到客户端的技术频谱:

vue从后台获取数据赋值给data,如何渲染更细视图

如果从服务端返回的数据量较少,或者只有几个字段,可以用vue的set方法,如果数据量较大,请直接看第二种情况。官网API是这样介绍的:Vue.set(target,key,value)

react 异步加载数据时的渲染问题

当数据需要异步加载时render获取不到数据可能会报一些错误,此时需要在render函数中加一个判断.行到render时,state对象的haveData为false, 所以此时页面展示 loading,当异步获取数据成功时

Vue.js中v-html渲染的dom添加scoped的样式

在vue.js中,要将一段字符串渲染成html,可以使用v-html指令。但是 官方文档 中的v-html部分也提醒了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!