|
The "demo" is kind of bologna. 1) The code that is running is not what's presented; it executes (non-transpiled) vanilla JS.* Why not just show that? 2) Removing the box shadow massively makes the two closer in performance. 3) The page could just be one sentence: "Reflowing the layout of a page is slower than moving a single item." GPU un-related. --- *Code that actually is running: ```js , u = t => {
h && clearTimeout(h),
l.forEach( (e, s) => {
const {top: o, left: n} = m[r[s]];
t ? (e.style.transform = "translate(0px, 0px)",
e.style.opacity = "0.7",
e.offsetHeight,
e.style.transform = `translate(${n}px, ${o}px)`) : e.style.transform = `translate(${n}px, ${o}px)`,
e.style.top = "",
e.style.left = ""
}
),
t && (h = window.setTimeout( () => {
l.forEach(e => e.style.opacity = "1")
}
, 500))
}
, d = t => {
y && clearTimeout(y),
l.forEach( (e, s) => {
const {top: o, left: n} = m[r[s]];
e.style.top = `${o}px`,
e.style.left = `${n}px`,
e.style.transform = "",
t && (e.style.boxShadow = "0 14px 28px rgba(239,68,68,0.45)") // REMOVING THIS LINE = BIG DIFFERENCE
}
),
t && (y = window.setTimeout( () => {
l.forEach(e => {
e.style.boxShadow = "none"
}
)
}
, 500))
}
``` |
1) I thought of giving an easier to read example. I just moved the example to react, so the snippets actually match exactly what's going on in the background.
2) It is true! Though, using shadows on the optimized code doesn't slow it down. I added more toggles to test same effects on transform and top/left implementations.
3) I think it's still interesting to start with some thought and then observe that in practice things are different really. In fact, thanks for all the feedback, as it made me go back and do more investigation.
If you don't mind you can give the article a second look now :)