JS修改width与CSS自定义属性调整侧栏宽度性能问题求解

• 自定义属性挂载层级过高：你当前把--side-panel-width设置在app根节点上，自定义属性变化时，浏览器需要遍历根节点下所有DOM元素，检查是否有样式规则依赖该属性，重新执行样式计算、重排流程，计算范围覆盖整个应用；而直接修改单个元素的width属性时，浏览器的样式失效范围仅局限在当前元素和极少数受其宽度影响的关联元素，计算开销差几个数量级。
• 强制同步布局开销：你在每帧的事件回调里调用getComputedStyle读取元素宽度，这个API会强制浏览器立刻清空所有待处理的样式变更、完成整轮布局计算，拖拽时mousemove触发频率可达每秒60次以上，每帧都触发整树样式计算+强制同步布局，自然会出现明显卡顿。
• 优化属性未生效：你添加的will-change: width仅对元素本身的width属性变化有提前优化作用，浏览器无法预判自定义属性会被哪些元素、哪些CSS规则使用，因此这个声明对自定义属性变更的场景完全没有优化效果。

1. 缩小自定义属性的作用范围 #

不要把--side-panel-width挂载在全局app根节点上，改为挂载在侧边栏和另外两个依赖该属性的面板的共同直接父容器上，这样属性变化时，浏览器仅需要遍历该父容器下的少量子元素做样式重算，不需要扫描整个应用DOM树，计算开销会大幅降低。

2. 移除强制同步布局逻辑 #

不要在mousemove回调里每帧调用getComputedStyle读取宽度，改为在拖拽启动的mousedown事件里缓存初始侧边栏宽度、初始鼠标横坐标，后续拖拽过程中直接用缓存值累加鼠标偏移量计算最新宽度，完全避免实时读取计算样式带来的强制重排。
优化后的事件逻辑参考：

// 拖拽启动（mousedown触发时）
onDragStart(e) {
  this.isDragging = true
  // 缓存初始值，拖拽过程中不再读取DOM计算样式
  this.startMouseX = e.x
  this.initSideWidth = this.$refs.sidePanel.getBoundingClientRect().width
}

onMouseMove(e) {
  if (!this.isDragging) return
  requestAnimationFrame(() => {
    const offsetX = e.x - this.startMouseX
    // 可按需加最小/最大宽度限制
    const newWidth = Math.max(180, Math.min(600, this.initSideWidth + offsetX))
    // 自定义属性设置在三个面板的直接父容器上
    this.$refs.panelWrap.style.setProperty('--side-panel-width', `${newWidth}px`)
  })
}

3. 用CSS特性缩小重排范围 #

• 给三个依赖该自定义属性的面板添加contain: layout paint声明，告诉浏览器这些元素的布局、绘制变化不会影响到容器外部的其他元素，浏览器会跳过对外部元素的样式检查，进一步缩小重排范围。
• 支持@property的现代浏览器里，可以提前注册带类型的自定义属性，让浏览器提前做优化，减少属性变更时的计算开销：

@property --side-panel-width {
  syntax: '<length>';
  inherits: true;
  initial-value: 240px;
}

注：你贴的简化代码里setProperty的参数写法存在语法错误，正确写法是传入两个独立参数setProperty('--side-panel-width', value)，注意不要把属性名和值写到同一个引号里，避免不必要的异常。

内容的提问来源于stack exchange，提问作者Daniil Lohvinov