jQuery UI Resizable问题：左侧栏旁有iframe时拖拽缩放异常

问题描述 #

用jQuery UI Resizable插件实现页面左侧栏（#left-bar）的可缩放功能，当相邻的#topic-window容器不含iframe时，缩放操作流畅正常；但加入#docWindow iframe后，缩放出现明显卡顿。

卡顿原因 #

1. iframe重绘开销大：每次缩放时，iframe内部文档会随容器宽度变化触发重排与重绘，占用大量浏览器性能，直接导致卡顿。
2. 事件冲突：iframe会捕获鼠标事件，与Resizable插件的拖拽事件互相干扰，拖慢响应速度。
3. 实时更新压力：插件默认实时更新元素尺寸，iframe的存在让每一次尺寸变更的渲染成本翻倍。

解决方案 #

方案1：缩放时临时隐藏iframe #

在缩放开始时隐藏iframe，结束后恢复显示，避免iframe在缩放过程中频繁重绘：

$(function(){
    $("#left-bar").resizable({ 
        direction: 'right',
        // 缩放启动时隐藏iframe
        start: function() {
            $('#docWindow').hide();
        },
        // 缩放停止后恢复显示
        stop: function() {
            $('#docWindow').show();
        }
    })
})

方案2：缩放时禁用iframe的事件响应 #

通过CSS的pointer-events属性，在缩放过程中阻止iframe捕获鼠标事件，减少事件冲突：

$(function(){
    $("#left-bar").resizable({ 
        direction: 'right',
        start: function() {
            $('#docWindow').css('pointer-events', 'none');
        },
        stop: function() {
            $('#docWindow').css('pointer-events', 'auto');
        }
    })
})

方案3：优化浏览器渲染性能 #

使用will-change属性提示浏览器提前优化元素的宽度变化，降低重绘开销：

#topic-window{
    height: 100%;
    width: 100%;
    background-color: navy;
    outline: medium solid red;
    display: inline-block;
    will-change: width; /* 告知浏览器优化宽度变化的渲染 */
}

#docWindow{
  width: 100%;
  height: 100%;
  position:relative;
  background-color: yellow;
  will-change: width;
}

方案4：降低实时更新频率 #

如果不需要实时预览缩放效果，仅在缩放结束后更新尺寸，减少实时渲染压力：

$(function(){
    $("#left-bar").resizable({ 
        direction: 'right',
        // 仅在缩放停止时更新相关元素尺寸
        stop: function(event, ui) {
            $('#topic-window').width($('#main').width() - ui.size.width);
        }
    })
})

优化后的完整代码示例 #

CSS代码 #

#main{
    height: 900px;
    width: 1800px;
    background-color: aqua;
    display: flex;
}

#left-bar{
    height: 100%;
    width: 250px;
    background-color: blue;
    outline: medium solid red;
    margin-right: 1px;
    display: inline-block;
}

#topic-window{
    height: 100%;
    width: 100%;
    background-color: navy;
    outline: medium solid red;
    display: inline-block;
    will-change: width;
}

#docWindow{
  width: 100%;
  height: 100%;
  position:relative;
  background-color: yellow;
  will-change: width;
}

HTML & JS代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="index.css" rel="stylesheet" type="text/css"/>
    
    <!-- 引入本地jQuery库文件 -->
    <script src="jquery-3.6.0.js"></script>
    <!-- 引入本地jQuery UI Resizable插件的JS和CSS -->
    <script src="resizable.min.js"></script>
    <link rel="stylesheet" type="text/css" href="resizable.min.css">
    
    <script>
        $(function(){
            $("#left-bar").resizable({ 
                direction: 'right',
                start: function() {
                    $('#docWindow').hide();
                },
                stop: function() {
                    $('#docWindow').show();
                }
            })
        })
    </script>
</head>
<body>
    <div id="main">
        <div id="left-bar"></div>
        <div id="topic-window">
            <iframe id="docWindow"></iframe>
        </div>
    </div>
</body>
</html>

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