防止 DOM 滞后

Question

所以我正在编写一种绘图脚本，现在它工作正常（虽然代码仍然需要清理，需要更多功能），但是当绘制太多时，mousemove 非常滞后。这是主要的Javascript：

   $('#canvas').on('mousedown', function(){
       going = !going;
       $(this).on('mousemove', function(e){
           if(cursor == 'paint' && going == true){
       $('.fall').each(function(){
           if ($(this).css("opacity") == 0){
               $(this).remove();
           };
       });
       var ps = $('#canvas').offset().top;
       var t = (e.pageY - ps - $('.fall').height()).toString() + 'px';
       var l = (e.pageX - $('.fall').width()).toString() + 'px';
       $('.fall').css("margin_left",l);
       $('.fall').css("margin_top",t);
               var doit = '<div class="fall" style="position:absolute;margin-left:' + l + ';margin-top:' + t + ';background-color:'+ color +';box-shadow: 0px 0px 5px ' + color + ';"></div>'
       $('#canvas').prepend(doit); 
           }
           else if(cursor == 'erase'){
           $('.fall').mouseenter(function(){
               $(this).fadeOut('fast',function(){
                   $(this).remove()
               });
           });
       };
   });

本质上，当你点击绘图部分时，如果点击绘图按钮，你可以绘制：jsfiddle。

我的问题：

如果你画得太多，尤其是在开始和停止时，它不会在mousemove 上添加足够多的内容（我假设）DOM 被淹没了。

问题：

在不产生延迟的情况下向 DOM 添加许多 div 的有效方法是什么？这可能吗？

注意：

这是一个个人项目，我对使用以前创建的绘图 API 不感兴趣

Answer 1

您可以做很多事情来提高性能。

下面的代码是对问题中代码的大量重构。乍一看，它可能看起来效率较低，因为它的行数大约是原始行数的两倍。但是，行数不是这里的问题。有两个基本原则适用：

• 在 mousemove 处理程序中尽可能少地进行 DOM 交互，并在 mousedown 时尽可能多地进行交互。
• 包括一个“分频器电路”以限制调用 mousemove 处理程序的次数。这是通过在每次调用时分离 mousemove 事件处理程序并在短暂延迟后重新附加来实现的，条件是鼠标仍处于按下状态。

另见代码中的 cmets。

jQuery(function($) {
    ...
    var $canvas = $("#canvas");
    var data = {
        name: 'fall'//a unique string for namespacing the muousemove event.
    };
    $canvas.on('mousedown', function() {
        going = !going;
        data.$fall = $('.fall');//this collection is created once per mousedown then managed inside mm to avoid unnecessary DOM interaction
        data.mousedown = true;
        data.colorCSS = {
            'background-color': color,
            'box-shadow': '0px 0px 5px ' + color
        };
        data.fallWidth = data.$fall.width();
        data.fallHeight = data.$fall.height();
        attachMouseMoveHandler();
    }).on('mouseup', function() {
        data.mousedown = false;
    }).trigger('mouseup');

    function attachMouseMoveHandler() {
        if(data.mousedown);
            $canvas.on('mousemove.' + data.name, mm);//the event is namespaced so its handler can be removed without affecting other canvas functionality
    }

    //The mousemove handler
    function mm(e) {
        if(going && cursor == 'paint') {
            data.$fall.each(function() {
                data.$fall = data.$fall.not(this);//manage data.$fall rather than re-form at every call of mm()
                var $this = $(this);
                if ($this.css("opacity") == 0) {
                    $this.remove();
                };
            });
            data.$fall = data.$fall.add($('<div class="fall" />').css(data.colorCSS).prependTo($canvas)).css({
                'margin-left': (e.pageX - data.fallWidth) + 'px',
                'margin-top': (e.pageY - $canvas.offset().top - data.fallHeight) + 'px'
            });
        }
        else if(cursor == 'erase') {
            data.$fall.mouseenter(function() {
                data.$fall = data.$fall.not(this);//manage data.$fall rather than re-form at every call of mm()
                var $this = $(this).fadeOut('fast', function() {
                    $this.remove();
                });
            });
        };
        $canvas.off('mousemove.' + data.name);
        setTimeout(attachMouseMoveHandler, 50);//adjust delay up/down to optimise performance
    }
});

仅针对语法进行测试

我不得不做出一些假设，主要是关于什么变成了鼠标按下时的固定数据。这些假设可能不正确，因此您很可能仍有一些工作要做，但只要您在上述整体框架内工作，您的性能问题很有可能会消失。