javascript - 在浏览器中缩放文本的更快方法？ (帮助解释测试)

Question

我需要在浏览器中缩放大量文本节点(支持所有现代桌面和移动浏览器)。

如果我是对的，有两个选项可以提供良好的性能:缩放 Canvas 中的文本对象或使用 transform:matrix 缩放 DOM 中的文本节点。

我创建了一个场景来测试这两个版本，但结果尚无定论。取消注释 testDOM() 或 testCanvas() 函数以开始测试。 (我使用 JQuery 和 CreateJS 框架，因为它很方便。可以使用普通 JS，但我不认为这是这里的瓶颈)。 (您实际看到的屏幕部分很重要，因此请在 codepen 中切换到全屏 View )。

http://codepen.io/dandare/pen/pEJyYG

var WIDTH = 500;
var HEIGHT = 500;
var COUNT = 200;
var STEP = 1.02;
var MIN = 0.1;
var MAX = 10;
var stage;
var canvas;
var bg;
var canvasTexts = [];
var domTexts = [];
var domMatrix = [];
var dom;

function testDOM() {
    for (var i = 0; i < COUNT; i++) {
        var text = $("<div>Hello World</div>");
        var scale = MIN + Math.random() * 10;
        var matrix = [scale, 0, 0, scale, Math.random() * WIDTH, Math.random() * HEIGHT];
        text.css("transform", "matrix(" + matrix.join(',') + ")");
        domTexts.push(text);
        domMatrix.push(matrix);
    }
    dom = $('#dom');
    dom.append(domTexts);
    setTimeout(tickDOM, 1000);
}

function tickDOM() {
    for (var i = 0; i < domTexts.length; i++) {
        var text = domTexts[i];
        var matrix = domMatrix[i];
        var scale = matrix[0];
        scale *= STEP;
        if (scale > MAX)
            scale = MIN;
        matrix[0] = matrix[3] = scale;
        text.css("transform", "matrix(" + matrix.join(',') + ")");
    }
    requestAnimationFrame(tickDOM);
}

function testCanvas() {
    $('#dom').hide();
    stage = new createjs.Stage('canvas');
    createjs.Touch.enable(stage);
    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    canvas = stage.canvas;
    devicePixelRatio = window.devicePixelRatio || 1;
    stage.scaleX = devicePixelRatio;
    stage.scaleY = devicePixelRatio;
    console.log('devicePixelRatio = ' + devicePixelRatio);
    stage.mouseMoveOutside = true;
    stage.preventSelection = false;
    stage.tickEnabled = false;
    stage.addChild(bg = new createjs.Shape());
    bg.graphics.clear();
    bg.graphics.f('#F2F2F2').drawRect(0, 0, 2 * WIDTH, HEIGHT);
    canvas.width = 2 * WIDTH * devicePixelRatio;
    canvas.height = HEIGHT * devicePixelRatio;
    canvas.style.width = 2 * WIDTH + 'px';
    canvas.style.height = HEIGHT + 'px';
    stage.update();
    for (var i = 0; i < COUNT; i++) {
        var text = new createjs.Text("Hello World", "10px", "#333333");
        text.scaleX = text.scaleY = MIN + Math.random() * 10;
        text.x = Math.random() * WIDTH;
        text.y = Math.random() * HEIGHT;
        stage.addChild(text);
        canvasTexts.push(text);
    }
    stage.update();
    setTimeout(tickCanvas, 1000);
}

function tickCanvas() {
    for (var i = 0; i < canvasTexts.length; i++) {
        var text = canvasTexts[i];
        text.scaleX = text.scaleY *= STEP;
        if (text.scaleX > MAX)
            text.scaleX = text.scaleY = MIN;
    }
    stage.update();
    requestAnimationFrame(tickCanvas);
}

testDOM();
//testCanvas();

我的问题:

1. 是否可以提高我的测试性能？我做错了什么吗？
2. 前 5-10 秒明显变慢，但我不明白为什么。一段时间后浏览器是否会以某种方式兑现文本对象？如果是，该测试是否无法用于现实场景测试，即对象不会在较长时间内循环放大？
3. 根据 Chrome 分析工具，DOM 版本的空闲时间比 Canvas 版本多 40%(快 40%)，但 Canvas 动画看起来更流畅(在最初的 5-10 秒滞后之后)，应该如何处理我解释分析工具的结果？
4. 在 DOM 版本中，我试图在应用转换之前隐藏文本节点的父节点，然后取消隐藏它，但这可能并不重要，因为绝对定位元素上的 Transform:matrix 不会导致回流，对吗？
5. 与 Canvas 节点相比，DOM 文本节点具有一些优势，例如使用 curs:pointer 进行 native 鼠标悬停检测或支持装饰(Canvas 中不能有下划线文本)。还有什么我应该知道的吗？
6. 设置 transform:matrix 时，我必须创建一个编译器必须将其解析回数字的字符串，是否有更有效的方法来使用 transform:matrix ？

Answer 1

问题1

Is it possible to improve the performance of my tests? Am I doing something wrong?

是和否。 (是的，改进了，没有什么本质上的错误(忽略 jQuery))

性能取决于浏览器和设备，例如 Firefox 比数组更好地处理对象，而 Chrome 更喜欢数组。仅就 JavaScript 而言，就有一长串差异。

然后渲染取决于硬件、多少内存、什么功能以及特定的驱动程序。有些硬件讨厌状态变化，而另一些硬件则全速处理它们。限制状态更改可以提高一台机器的速度，而额外的代码复杂性将影响不需要优化的设备。

操作系统也发挥了作用。

<小时/>

问题2

The first 5-10 seconds are significantly slower but I don't understand why. Does the browser somehow cashes the text objects after some time? If yes, is the test unusable for real world scenario testing where the objects don't zoom in a loop for longer period of time?

Javascript 中的性能测试非常复杂，并且作为整个应用程序(如您的测试)根本不实用。

为什么慢？有很多原因，将内存移动到显示设备，在代码运行时运行的 JavaScript 优化编译器，如果认为合适的话会重新编译，这会影响性能未优化的 JS 是 SLOOOOOWWWWWWWW...并且您看到它运行未优化。

还有。在像code pen这样的环境中，您还必须处理与您的代码在相同上下文中运行的所有代码，它在与您的环境相同的环境中具有内存，dom，cpu，GC需求，因此您的代码不能说是被隔离并且分析结果准确。

<小时/>

问题 3

According to the Chrome Profiling tool the DOM version leaves 40% more idle time (is 40% more faster) than the Canvas version but the Canvas animation looks much smoother (after the initial 5-10 seconds of lagging), how should I interpret the Profiling tool results?

这就是 requestAnimationFrame 的本质(rAF)，它将等到下一帧准备好后再调用您的函数。因此，如果您运行超过 1/60 秒 1 毫秒，您就错过了当前显示刷新的呈现，rAF 将等到下一个显示刷新时间 1/60 减 1 毫秒后才呈现，并调用下一个请求。这将导致约 50% 的空闲时间。

除了让函数更小并更频繁地调用它之外，没有什么可以做的，但是这样你就会因调用而获得额外的开销。

rAF 在一个帧中可以被多次调用，并且会同时呈现该帧中的所有渲染。这样，如果您密切关注当前时间并确保不会超出 1/60 秒的机会窗口，就不会出现超出空闲时间的情况。

<小时/>

问题 4

In the DOM version I am trying to hide the parent of the text nodes before I apply the transformations and then unhide it but it probably does not matter because transform:matrix on absolutely positioned element does not cause reflow, am I right?

在退出函数之前，不会触发重排，在函数开始时隐藏父级，然后在结束时取消隐藏不会有太大区别。 JavaScript 是阻塞的，这意味着当您在函数中时什么也不会发生。

<小时/>

问题5

The DOM text nodes have some advantages over the Canvas nodes like native mouse over detection with cursor: pointer or support for decorations (you can not have underlined text in Canvas). Anything else I should know?

这将取决于预期用途。 DOM 为 UI 和演示提供了完整的 API。 Canvas 提供渲染和像素操作。我使用的逻辑是，如果通过 DOM 然后通过 Canvas 需要更多代码来完成此操作，那么它就是一个 Canvas 作业，反之亦然

<小时/>

问题6

When setting the transform:matrix I have to create a string that the compiler must to parse back to numbers, is there a more efficient way of using transform:matrix?

没有。这就是CSS 的方式。