我的问题：

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被淹没了。

问题：

在不产生滞后的情况下，将多个div添加到DOM的有效方法是什么？这可能吗？

注意：

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

Answer 1

你可以做很多事情来改善表现。

下面的代码是对问题中代码的重构。乍一看它似乎效率较低，因为它的原始线数约为原来的两倍。但是，行数不是问题。两个基本原则适用：

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

另见代码中的注释。

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
    }
});

仅针对语法

进行了测试

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

防止在DOM中滞后

我的问题：

问题：

注意：

1 个答案: