Compare transforms (v9)

Revision 9 of this benchmark created on

Setup

const createAxisDelta = () => ({
    translate: 0.0,
    scale: 1.0,
    origin: 0,
    originPoint: 0,
})

const createDelta = () => ({
    x: createAxisDelta(),
    y: createAxisDelta(),
})

const treeScale = { x: 0.5, y: 2 }

class AxisDelta {
	translate = 0.0
    scale = 1.0
    origin = 0
    originPoint = 0
}

class Delta {
	x = new AxisDelta()
	y = new AxisDelta()
}

function buildProjectionTransform(
    delta,
    treeScale,
    latestTransform
) {
    let transform = ""

    const xTranslate = delta.x.translate / treeScale.x
    const yTranslate = delta.y.translate / treeScale.y
    const zTranslate = latestTransform?.z || 0
    if (xTranslate || yTranslate || zTranslate) {
        transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `
    }

    if (treeScale.x !== 1 || treeScale.y !== 1) {
        transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `
    }

    const elementScaleX = delta.x.scale * treeScale.x
    const elementScaleY = delta.y.scale * treeScale.y
    if (elementScaleX !== 1 || elementScaleY !== 1) {
        transform += `scale(${elementScaleX}, ${elementScaleY})`
    }

    return transform || "none"
}

function buildArrayProjectionTransform(
    delta,
    treeScale,
    latestTransform
) {

const arr = []
    const xTranslate = delta.x.translate / treeScale.x
    const yTranslate = delta.y.translate / treeScale.y
    const zTranslate = latestTransform?.z || 0
    const elementScaleX = delta.x.scale * treeScale.x
    const elementScaleY = delta.y.scale * treeScale.y

    if (xTranslate || yTranslate || zTranslate) {
arr.push(`translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px)`)
    }

    if (treeScale.x !== 1 || treeScale.y !== 1) { 
arr.push(`scale(${1 / treeScale.x}, ${1 / treeScale.y})`)   }

if (elementScaleX !== 1 || elementScaleY !== 1) {
arr.push(`scale(${elementScaleX}, ${elementScaleY})`)
}

    const transform = arr.join(" ")
    arr.length = 0

    return transform || "none"
}

let prevTransform = ""
const prevDelta = createDelta()


const classDelta = new Delta()
const classPrevDelta = new Delta()

const baseAxis = createAxisDelta()
const objectDelta = {
	x: Object.create(baseAxis),
	y: Object.create(baseAxis)
}
const objectPrevDelta = {
	x: Object.create(baseAxis),
	y: Object.create(baseAxis)
}

 function copyAxisDeltaInto(delta, originDelta) {
    delta.translate = originDelta.translate
    delta.scale = originDelta.scale
    delta.originPoint = originDelta.originPoint
    delta.origin = originDelta.origin
}

 function copyClassAxisDeltaInto(delta, originDelta) {
    delta.translate = originDelta.translate
    delta.scale = originDelta.scale
    delta.originPoint = originDelta.originPoint
    delta.origin = originDelta.origin
}

 function copyObjectAxisDeltaInto(delta, originDelta) {
    delta.translate = originDelta.translate
    delta.scale = originDelta.scale
    delta.originPoint = originDelta.originPoint
    delta.origin = originDelta.origin
}

function updateDelta(delta) {
	
	delta.x.scale = 1000 * Math.random()
	delta.y.scale = Math.random()
}

function updateClassDelta(delta) {
	delta.x.scale = 1000 * Math.random()
	delta.y.scale = Math.random()
}

function updateObjectDelta(delta) {
	delta.x.scale = 1000 * Math.random()
	delta.y.scale = Math.random()
}

let transform = ""
let op = false

function hasAxisDeltaChanged(a, b) {
    return (
        a.translate !== b.translate ||
        a.scale !== b.scale ||
        a.originPoint !== b.originPoint
    )
}

function hasClassAxisDeltaChanged(a, b) {
    return (
        a.translate !== b.translate ||
        a.scale !== b.scale ||
        a.originPoint !== b.originPoint
    )
}

function hasObjectAxisDeltaChanged(a, b) {
    return (
        a.translate !== b.translate ||
        a.scale !== b.scale ||
        a.originPoint !== b.originPoint
    )
}

Test runner

Ready to run.

Testing in
TestOps/sec
Compare string
const delta = createDelta()
updateDelta(delta)

transform = buildProjectionTransform(delta, treeScale)

if (transform !== prevTransform) {
	op = !op
}

prevTransform = transform
ready
Compare and copy
const delta = createDelta()
updateDelta(delta)

if (hasAxisDeltaChanged(delta.x, prevDelta.x) || hasAxisDeltaChanged(delta.y, prevDelta.y)) {
	op = !op
}

copyAxisDeltaInto(prevDelta.x, delta.x)
copyAxisDeltaInto(prevDelta.y, delta.y)
ready
Copy class properties
const classDelta = new Delta()
updateClassDelta(classDelta)

if (hasClassAxisDeltaChanged(classDelta.x, classPrevDelta.x) || hasClassAxisDeltaChanged(classDelta.y, classPrevDelta.y)) {
	op = !op
}

copyClassAxisDeltaInto(classPrevDelta.x, classDelta.x)
copyClassAxisDeltaInto(classPrevDelta.y, classDelta.y)
ready
Copy Object.create()
const delta = {
	x: Object.create(baseAxis),
	y: Object.create(baseAxis)
}

updateObjectDelta(delta)

if (hasObjectAxisDeltaChanged(delta.x, objectPrevDelta.x) || hasObjectAxisDeltaChanged(delta.y, objectPrevDelta.y)) {
	op = !op
}

copyObjectAxisDeltaInto(objectPrevDelta.x, delta.x)
copyObjectAxisDeltaInto(objectPrevDelta.y, delta.y)
ready
Compare string with array optimisation
const delta = createDelta()
updateDelta(delta)

transform = buildArrayProjectionTransform(delta, treeScale)

if (transform !== prevTransform) {
	op = !op
}

prevTransform = transform
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.