PAUL: My question for you is how do you
know if changing a CSS property is expensive?
JAKE: Like painting expensive?
PAUL: Not just paint.
We're talking layouts, we're talking paint,
we're talking composite.
These things-- developers, they talk about this all the time.
How do I know if I'm doing something that's
going to cause me a bottleneck and it's a problem.
How do you know?
JAKE: It's normally just a matter of do it and test it.
PAUL: It was.
It was, but it's not anymore, Jake.
Good news.
I've made a website.
CSStriggers.com
JAKE: Yay!
PAUL: Woo!
CSStriggers.com
JAKE: CSStriggers.
PAUL: Yes.
Dot com.
And it's a bit pluggy, isn't it now?
JAKE: This is not like trigger warning?
PAUL: Well, it could be, depending on how upset
you get over CSS.
JAKE: Yes, which can be quite upsetting, especially
if it's causing performance issues.
PAUL: Ah.
I like what you did.
You brought it right back in.
Yeah, anyway.
So the idea is you hit the site.
It's got all the CSS properties, you
can search for the one you're interested in,
and it will tell you whether it triggers layout, paint,
composite, all of the above.
JAKE: These are different things.
Are there things that it would change
that only affects one of those things?
Give me an example of something that
only affects painting, but not the other things.
PAUL: Painting, background size, box shadow, text shadow.
They do that because they don't change
the layout of the page in any way right?
They don't change the geometry of the page.
The widths, heights, anything to do
with the element's actual sizes.
JAKE: So there are ones that do it
the other way around as well?
PAUL: So it's more like a waterfall.
If you change layout, which is going
to be changing the widths, heights, basically the geometry
of the page, paddings, margins, all that kind of stuff.
You will change the geometry of the page
and that will dirty some pixels, which will need to be repainted
and then you'll need to composite the page.
Or you change something which causes the paint to happen
and you have to composite the page,
or you change something which just
causes the page to recomposited.
So it's a sort of stepping process.
JAKE: When you [INAUDIBLE] the state,
was this just from memory and experience?
PAUL: Nope.
I'm glad you asked.
I made the mother of all test suites.
It was fantastic.
And then I used telemetry to kind of step through them
and figure out what was what.
But I used will change, which was
brand new and very exciting.
Basically to say, I will be changing opacity,
I will be changing box shadow.
You tell me, when I do this, what it triggered.
And devtools just went, you know what, I did a bit of layout
there.
Did a bit of paint.
Anyway, if you want to see how your CSS affects performance,
what work it's going to trigger, just go to the site
and have a look.
JAKE: Oh, cool.
And is that for every browser?
PAUL: Other browsers are incoming.
Today it's only Chrome.
JAKE: Cool.
And what's the site name?
I wasn't listening to you properly.
PAUL: Really?
JAKE: No, I really wasn't.
You should say it again just for my benefit.
PAUL: Just your benefit?
JAKE: Just my benefit.
PAUL: Excellent.
I'm glad we're having this conversation, my friend.
CSStriggers.com.
JAKE: Yay!
PAUL: Woo!
JAKE: Keyboards.
They're the computer ones or the musical ones.
You've used one before, right?
PAUL: No.
Yes.
JAKE: Yes.
I've seen you in the office.
Now, I imagine there was a point where a keyboard
manufacturer thought, we need to solve this problem.
We need to give them a key to press when they've
hit the wrong key and they want to undo that error of theirs,
right?
And they called this the backspace key.
PAUL: Right.
JAKE: So this key that you're supposed
to press when you've gone off by one, hit the wrong key,
want to correct it.
Where did they put this key?
PAUL: Right next to the return/enter key.
JAKE: Right next to the key that says, no actually,
everything is great, I want to ship that text off
to a colleague.
Right?
A colleague asked for some help, and I
wrote, because I was a little bit busy at the time,
give me a sec.
And I was like, oh I've done it wrong.
Went to press the backspace key.
Enter.
Off to the colleague.
Off to their phone goes, give me a sex.
Like it was a demand.
So I want to talk about pointer events.
PAUL: Yay!