atom/atom — pull request #2711 by nathansobo (2014-06-21 21:55:47+00:00)
Title: Implement "tiling" strategy for lines and line numbers in React editor

:rotating_light: Very WIP :rotating_light:

In #2704, I attempted to make the lines the full width of the editor at all times. As soon as I did this, I started getting really bad jitter when scrolling, especially when using the discrete Nvidia graphics card on my Retina MBP.

So last night I thought I'd try a new approach. I'd tried it briefly before but now I'm coming to the situation with more knowledge and I no longer have a concern about opaque backgrounds for subpixel anti-aliasing, which didn't work anyway. I asked myself: what's the lightest possible load we can put on the graphics processor while still having it scroll our lines for us.

The issue with the approach on master is that we represent the lines as one giant layer, then paint into this layer as it is scrolling. I have no idea how it works internally so I'm working from conjecture, but it seems like having a really big layer would put more pressure on the GPU. So what if instead we break the lines and line numbers into many small layers or tiles, like the iPhone does when scrolling web pages. Then each of these layers can be controlled independently on the GPU, and we just keep creating more as they are needed when we scroll.

It's actually working better than anything I've tried so far. The tile sizes for the gutter and the lines can be tuned independently to strike a balance between having a small number of layers and not having the layers get too big. I played with the sizes a bit to find the current settings, but we could potentially tune more carefully.

![tiling](https://cloud.githubusercontent.com/assets/1789/3350087/b1a4bf36-f98e-11e3-8bc6-4c802d5d4695.gif)

This is going to require some rethinking of highlights and clever shimming for underlayer and overlayer views, but I think it's doable. And I think we need to do it, because the jitter caused by making the lines full width is really quite intolerable. As an added bonus, I think this approach lets us use React components for lines and line numbers with acceptable overhead because we can halt the updates at the level of their groupings to prevent excessive diffing. It's kinda cool that the same structure that's kind to the GPU is also kind to React. Maybe not a coincidence.