持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

一句话说明白：理解重排和重绘可以提升页面性能！

关于具体的原理，网上有一大堆的讲解文章，在这里就不重复了，以下仅从个人学习和理解的角度，做简单的整理总结，花费5分钟理解大概的框架，快速建立起基本概念，方便以后翻看。

1、哪些情况会导致浏览器触发重排重绘？

重排：

• 浏览器窗口放大、缩小等缩放操作改变了原来的尺寸
• Dom 元素增加、删除，以及元素尺寸大小、内外边距、文档内容变化和属性查询等

重绘：

• 元素背景更改
• 文字颜色变化
• 元素边框样式的调整

2、如何避免或降低重排重绘次数呢？

• 首先减少元素的操作次数，比如直接用 className/id 设置样式绑定，而不是直接在元素上设置多个样式属性
• 先隐藏元素，然后执行操作，操作完毕再显示元素
• 利用 documentFragment 操作新增元素，尤其是列表元素生成，先在片段上操作，最后挂载到 Dom 树上
• 用 transform 代替 top、bottom、left、right 操作

3、有没有自动化处理的方法？

• 配置 stylelint

stylelint是一个强大的、现代的 linter 工具，可以帮助团队避免代码规则错误、统一编码风格。和 eslint 类似可以继承开源社区的 config、自定义配置、写个性化的 rules 。

参考以下配置文件：

module.exports = {
  "extends":[
    "stylelint-config-recommended-scss",
    "stylelint-config-recess-order",
    "stylelint-prettier/recommended"
  ],
  "plugins": ["stylelint-prettier"],
   rules: {
    "selector-pseudo-element-no-unknown": [
      true,
      {
        ignorePseudoElements: ["v-deep"],
      }
    ],
    "prettier/prettier": true,
    "number-leading-zero": "always",
  }
}

强烈建议多看看现代前端工程项目配套使用的相关技术、工具、插件等知识，刚开始肯定看的一头雾水，相关内容确实不少，参考以下截图：

要拿出愚公移山的精神，就没有学不会的技术，至少要理解每个文件背后代表的是什么，以及它的作用和价值，后续需要深入研究时，就可以快速上手了。