Live data from Hacker News

How I made Google’s data grid scroll faster with a line of CSS

medium.com

21–30 of 223 posts

Re: How I made Google’s data grid scroll faster with a line of CSS

#21

Opinions are my own. I don't think this is recommended to use internally at Google because it's not supported on Safari.

That seems like a bizarre reason not to use it, given that it's strictly a performance optimisation, and browsers will simply ignore CSS rules they don't understand.

I imagine that it could cause accusations from Apple that Google is trying to take their customers out of the ecosystem, putting a nice cash flow at risk.

Re: How I made Google’s data grid scroll faster with a line of CSS

#22
post #11
post #2

I have never heard of the "contain" property before this article. It seems like it can be very useful.

Unfortunately, as is often the case when one learns of a new CSS property or a Web API, the browser support is just not there yet. Safari, for example, doesn't support this at all: https://caniuse.com/mdn-css_properties_contain

Writing good browser based software is about delivering the best possible experience for all users regardless of their browser choice. That doesn't mean withholding beneficial features just because they're not available everywhere. It means writing software to take advantage of every possible benefit that improves the user experience, and detecting browser support where necessary to provide fallbacks and polyfills if you need them.

In this case it's just a performance hint, so Safari users would have the same experience they do now. Everyone else would benefit.

Re: How I made Google’s data grid scroll faster with a line of CSS

#23
post #10

I’m not a frontend dev so I just stick to vanilla html and js. I created a simple table with 40k rows, slapped an input box above it, and had some vanilla js set CSS visibility on all rows depending on whether they matched. This would update live as I was typing (10ms trigger delay). No optimizations. So what are frontend devs doing that they break all of this so badly? Are they just trying to be too smart, I wonder?

I'm not sure what you are asking. You can of course build a trivial use-case with a native feature and have it perform as one would expect from a native HTML element.

However, it's not like the UI guys in the article didn't do that and implemented some crazy shit poorly. They just slapped a table on the page, incidentally with 38k elements - sounds a lot like what you did actually, and it lagged the page due to browser painting/layout issues.

Now, finally: how exactly is what you did not just the same as this, except they were actually making a usable front-end so the addition of CSS broke the browser rendering engine? Because it sure doesn't sound like you would know what to do in the situation the article discusses...

Re: How I made Google’s data grid scroll faster with a line of CSS

#24
post #10

I’m not a frontend dev so I just stick to vanilla html and js. I created a simple table with 40k rows, slapped an input box above it, and had some vanilla js set CSS visibility on all rows depending on whether they matched. This would update live as I was typing (10ms trigger delay). No optimizations. So what are frontend devs doing that they break all of this so badly? Are they just trying to be too smart, I wonder?

I had similar fears when implementing a large table with some data visualization during one of my first forays into web development. I had noticed how slow things with 100 elements were let alone 1000. When I wrote my code that handled much more than that, I was surprised how responsive it was. How does a company with thousands of employees manage to make something that runs more poorly than something I wrote in an afternoon?

Re: How I made Google’s data grid scroll faster with a line of CSS

#25
post #10

I’m not a frontend dev so I just stick to vanilla html and js. I created a simple table with 40k rows, slapped an input box above it, and had some vanilla js set CSS visibility on all rows depending on whether they matched. This would update live as I was typing (10ms trigger delay). No optimizations. So what are frontend devs doing that they break all of this so badly? Are they just trying to be too smart, I wonder?

Assuming you're arguing in good faith, managing complexity of large applications requires "something". What something is takes many different shapes, some of them trade performance for complexity management.

Having said that, it just looks like you're arguing about something you don't know much about, while at the same time trying to put down people who have been doing this for a while.

Re: How I made Google’s data grid scroll faster with a line of CSS

#26
post #8

Earlier quoted context omitted.

> There should just be one way to do a scrolling list, implemented natively and left alone. I can't even imagine how that would work without turning into something like that can only be minimally styled and has to be (usually poorly) re-implemented to get it to look the way you want it to.

Maybe webdevelopers should stop trying to make everything look different from its defaults. It used to be that you could reliably predict what clicking the mouse in a region of the screen would do. It wasn't progress, when webdevelopers threw that out...

entertainment media will always develop the ability to arbitrarily control every part of the media presentation, and the web has developed into an entertainment medium. This is why load time is so important, people will wait long times for something they need to do, but will not wait to be entertained.

Re: How I made Google’s data grid scroll faster with a line of CSS

#27
post #23
post #10

I’m not a frontend dev so I just stick to vanilla html and js. I created a simple table with 40k rows, slapped an input box above it, and had some vanilla js set CSS visibility on all rows depending on whether they matched. This would update live as I was typing (10ms trigger delay). No optimizations. So what are frontend devs doing that they break all of this so badly? Are they just trying to be too smart, I wonder?

I'm not sure what you are asking. You can of course build a trivial use-case with a native feature and have it perform as one would expect from a native HTML element. However, it's not like the UI guys in the article didn't do that and implemented some crazy shit poorly. They just slapped a table on the page, incidentally with 38k elements - sounds a lot like what you did actually, and it lagged the page due to brows…

Usable has many meanings and to me personally, a website that isn't very responsive and lags when you scroll doesn't seem very usable.

Re: How I made Google’s data grid scroll faster with a line of CSS

#28
post #10

I’m not a frontend dev so I just stick to vanilla html and js. I created a simple table with 40k rows, slapped an input box above it, and had some vanilla js set CSS visibility on all rows depending on whether they matched. This would update live as I was typing (10ms trigger delay). No optimizations. So what are frontend devs doing that they break all of this so badly? Are they just trying to be too smart, I wonder?

I think this is actually a little subtle: if you don’t have fixed-width columns then changing the visibility (or more strictly the display property) of rows can require column widths to be recalculated which is often pretty slow. It’s easy to say that obviously you should just set fixed widths but it is pretty hard to decide what they should be in practice if you want the page to still work when someone resizes their window.

Re: How I made Google’s data grid scroll faster with a line of CSS

#29
post #2

I have never heard of the "contain" property before this article. It seems like it can be very useful.

Browser support aside, it seems very counterintuitive. https://developer.mozilla.org/en-US/docs/Web/CSS/contain suggests that it can cause pages to render differently, which is very strange, considering that the description implies that it only effects when the browser repaints/re-processes region, and not what the result is.

Re: How I made Google’s data grid scroll faster with a line of CSS

#30

Earlier quoted context omitted.

That seems like a bizarre reason not to use it, given that it's strictly a performance optimisation, and browsers will simply ignore CSS rules they don't understand.

I imagine that it could cause accusations from Apple that Google is trying to take their customers out of the ecosystem, putting a nice cash flow at risk.

It's a bad argument because if someone else makes a better product then they deserve to get more users. Nothing's stopping Apple from implementing those optimizations into Safari. That's the whole reason we have competition. If the government is going to make it so that improving your product makes you liable to lawsuits then no one would ever improve anything.
Post reply on HN