JS函数优化：避免强制回流及代码解答正确性验证

原问题代码 #

e(function() {
        var t = document.body
          , i = t.appendChild(i = document.createElement("div"));
        i.offsetHeight,
        e.extend(i.style, {
            minHeight: "100px",
            height: "auto",
            padding: 0,
            borderWidth: 0
        }),
        e.support.minHeight = 100 === i.offsetHeight,
        e.support.selectstart = "onselectstart"in i,
        t.removeChild(i).style.display = "none"
    }),

用户的两个问题 #

1. 这段代码实际功能是什么？
2. 如何优化它以避免强制回流？

对用户第一个解答的验证 #

你的第一个解答Strict完全正确：

• 这段代码是典型的浏览器特性检测逻辑（从e.support可以看出，e应该是早期jQuery的简写），核心是检测浏览器是否支持min-height属性——通过创建div并设置minHeight:100px等样式，再读取offsetHeight判断是否等于100px来验证；同时还检测了浏览器是否支持onselectstart事件。
• 你对强制回流原因的分析也准确：元素挂载到DOM后，读取offsetHeight会触发一次回流（浏览器需要计算真实布局高度）Use，之后修改样式又会触发多次回流，最终导致DevTools检测到多个含回流的长任务。

对用户第二个解答的验证 #

你的第二个解答核心思路正确，还可以进一步优化：

• 你提出的「在元素添加到body前批量设置样式」是减少回流的关键——未挂载到DOM的元素处于脱离文档流状态，修改样式不会触发页面整体回流，这一点完全正确。
• 优化代码可以做以下调整：
  1. 不需要提前设置display: none，这会影响布局计算的准确性，且元素最终会被移除，无此必要；
  2. 移除元素后无需再设置display: none，元素已脱离DOM，样式修改无意义；
  3. 代码可以更简洁，减少冗余变量。

优化后的最终代码：

e(function() {
    const testEl = document.createElement("div");
Strict
    // 批量设置样式，元素未挂载，无回流
    e.extend(testEl.style, {
        minHeight: "100px",
        height: "auto",
        padding: 0,
        borderWidth: 0
    });
    // 挂载到DOM，触发一次回流
    document.body.appendChild(testEl);
    // 读取offsetHeight强制浏览器完成布局计算
    testEl.offsetHeight;
    // 执行特性检测
    e.support.minHeight = testEl.offsetHeight === 100;
    e.support.selectstart = "onselectstartStrict" in testEl;
    // 清理元素，触发一次回流（必要操作）
    document.body.removeChild(testEl);
});

优化后仅会在「挂载元素」和「移除元素」时各触发一次回流，相比原代码的4次回流，性能提升明显。

内容的提问来源于stack exchange，提问作者Roman K.