前端性能优化技巧 | 青训营

用户9601557118583
70 阅读2分钟

回流与重绘

回流/重排

概念

渲染树中部分或者全部元素的尺寸、结构或属性发生变化时，浏览器会重新渲染部分或者全部文档的过程

导致回流的操作：

  • 页面第一次渲染
  • 浏览器的窗口大小发生变化
  • 元素的内容改变
  • 元素的位置、尺寸改变
  • 元素的字体大小改变
  • 添加或删除可见的DOM元素
  • 激活CSS伪类
  • 查询某些属性或调用某些方法
    • offset(Top|Left|Width|Height)
    • scroll(Top|Left|Width|Height)
    • client(Top|Left|Width|Height)
    • getComputedStyle()

比如😀：

  1. 点击按钮没有触发重排
  <button onclick="reflow()">click</button>
  <script>
    function reflow() {
      var div = document.querySelector("#test");
      console.log(div.offsetLeft);
    }
  </script>
  1. 触发2次重排
      var div = document.querySelector("#test");
      div.style.left = '200px';
      console.log(div.offsetLeft);
      div.style.left = '100px';
      console.log(div.offsetLeft);
  1. 触发1次重排
     var div = document.querySelector("#test");
      div.style.left = '200px';
      div.style.left = '100px';
      console.log(div.offsetLeft);
      console.log(div.offsetLeft);

重绘

概念

元素的样式发生变化，但不影响其在文档流中的位置，浏览器对元素进行重新绘制。

操作：

  • color、background相关属性
  • outline相关属性
  • border-radius、box-shadow、visibility等

如何避免回流与重排？

  • 在低层级操作DOM
  • 尽量不要使用CSS表达式
  • 尽量不要使用table布局
  • 不要频繁修改元素样式，可以修改类名而不是样式
  • 使用absolute或者fixed让元素脱离文档流
  • 避免频繁操作DOM，可以创建documentFragment，在它上面应用全部操作，最后把它添加到文档中
  • 将多个读操作或者写操作放在一起（浏览器的队列渲染机制）

懒加载

概念

在访问一个图片展示比较多的网页时，加载速度慢很多时候正是因为图片多导致，大量的img图片导致页面渲染的堵塞。懒加载其实就是当用户滚动相应可视区域，若可视区域有图片便加载，而在可视区域外未加载过的图片它们先不加载，如果用户滚动可视区域到它们时它们再加载，否则一律不加载。这样一来就大大提高了网页渲染的性能和减少不必要的浪费。

方法

  1. 滚动加监听，将真实的url赋值给data-src。

图片的加载是由src引起的，当对 src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx 中图片的路径赋值给 src，这样就实现了图片的按需加载，即懒加载。

  1. 滚动监听+getBoundingClientRect()
  2. IntersectionObserver()

为了实现无感加载，可以提前在距离页面底部x处就开始加载图片噢😊~

……

还有很多方式，
比如Webpack、CDN、图片优化、防抖节流等等，
时间原因就只列举上面的😭

avatar
文章
阅读
粉丝