We spent a week making Trello boards load fast

Re:We spent a week making Trello boards load fast by randallu on Wednesday January 22, 2014 @12:37PM (#7104097)

The "translateZ: 0" description is a bit misleading -- I wish he'd provided numbers for the improvement. In general using composited layers is more expensive (since the CPU still does rendering of the image, must upload it to texture, etc).

It might be a win if the thing you apply it to:

1. Never changes, but the content around it changes often.

2. Is hard to render (lots of shadows, etc).

The layout and paint thrashing is a really good optimization though. You should be able to insert as many things into the DOM as you like without triggering a layout SO long as you don't read back (like consulting offsetLeft). I think the Chrome inspector will mark read backs with a little exclamation point in the timeline with a tooltip "synchronous layout forced" and a backtrace to your JS...

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by SDGT on Wednesday January 22, 2014 @01:23PM (#7104389)

The translateZ deal just throws the browser into hardware rendering, which will run much smoother with any GFX hardware that will support it.

The same thing works with all of the other 3d transforms: Putting in a BS value for Z will cause the element to use hardware acceleration.

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by randallu on Wednesday January 22, 2014 @02:40PM (#7104852)

No, translateZ just makes it a composited layer. Hardware comes much later in the pipeline and possibly in another process.

The content of the layer isn't hardware rendered. It's rendered by the CPU and uploaded to a texture. In WebKit and probably Blink there's a fast path for images, canvas and video so that they can be directly uploaded or (on some platforms like Mac) bound to a texture avoiding an upload copy.

Microsoft and (maybe) Mozilla have a "hardware rendering" path via Direct2D, but Chrome and WebKit don't, they have compositors which can use the graphics hardware to perform compositing, but not rendering.

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by bdash on Wednesday January 22, 2014 @03:10PM (#7105040)

For what it's worth, WebKit on OS X uses hardware acceleration for both rendering and compositing by way of Core Animation.

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by Ciechanowski on Friday January 24, 2014 @02:45PM (#7117424)

Which technologies do benefit from GPU rendering? Aren't Quartz calls rasterized on CPU?

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by bdash on Saturday January 25, 2014 @04:38AM (#7120372)

Core Animation layers have a mode in which Core Graphics calls targeting them are both processed asynchronously by a another thread and rasterized via OpenGL.

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by Ciechanowski on Saturday January 25, 2014 @07:21AM (#7120599)

I presume you mean the "drawsAsynchronously" property. I'm extremely curious, does it really push the rasterization on the GPU? I mean, do you have shaders written, that do all the stuff that CPU normally does? Bezier paths, clipping, stroking, filling?

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by randallu on Wednesday January 22, 2014 @04:23PM (#7105468)

Oh, nice! For some reason I thought that was only for canvas.

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by bdash on Thursday January 23, 2014 @12:21AM (#7107098)

It was only used for canvas in the initial release before being deployed more widely.

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by nrc on Wednesday January 22, 2014 @02:11PM (#7104661)

The translate z trick does not work in general. It works right now in Chrome (and probably Safari). It does not work in Firefox, it may not work in Chrome in the future. (Because you are trying to trick the browser by gaming it's heuristics, those heuristics might change).

That hardware rendering is smoother is also not true in general, just some cases, which the browser will try to guess for you.

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by vjeux on Wednesday January 22, 2014 @02:26PM (#7104762)

You should be careful when adding translateZ. If you go beyond the GPU memory it's going to be extremely slow and has high chances of crashing the app.

[ Parent | on HN ]

Re:We spent a week making Trello boards load fast by wtallis on Wednesday January 22, 2014 @09:03PM (#7106629)

How easy is that to do accidentally? 128MB is enough for 16 screenfulls at 1080p. Can you really trigger the creation of that many hardware-composited layers without intending to?

[ Parent | on HN ]