Question

我只使用html/css/jquery创建绘图板，图形工作正常。我正在做的是捕捉mousemove事件并在事件触发的每个位置放置一个点（div），然后我在事件未被触及的地方之间添加点。开火创造一条线。

这一切都很好，但随着我画得越来越多，点到div的附加速度变得越来越慢（或者我应该说，这幅画有一种“迟钝的感觉”）。我知道该文档附加了更多的div，但是为什么我只关心做简单的追加。我没有在文档中搜索特定元素或任何内容。

或者这与文档中有多少元素无关？

代码的一部分：

$('#sketch-box').on('mousemove', function(e) {
        if (isPerformingLeftMouseClick) {
            //var parentOffset = $(this).parent().offset(); 
           var offset = $(this).offset();
           var currentMouseLeft = e.pageX - offset.left;
           var currentMouseTop = e.pageY - offset.top;
            var linkDotTemp = $(linkDot).clone();
            $(linkDotTemp).css('top', currentMouseTop);
            $(linkDotTemp).css('left', currentMouseLeft);
            if (lastMouseTop != null && lastMouseLeft != null) {
                drawLineInBetween(lastMouseTop, lastMouseLeft, currentMouseTop, currentMouseLeft);
            }
            $(this).append(linkDotTemp);
            lastMouseTop = currentMouseTop;
            lastMouseLeft = currentMouseLeft;
        }
    });

Answer 1

你最终会在页面上不必要地使用很多div，并且浏览器发现你添加的越多越难以渲染它们（它们的设计并不像这样）。

即使您在Chrome中检查页面上的元素，开发人员控制台在您开始检查点时也会非常困难。

我建议改用HTML5画布。

HTML5 Canvas w3schools page

附加到div变慢

1 个答案: