Thursday, May 29, 2014

Groking Browser Performance - Notes

My Notes From: Groking Browser Performance
https://joind.in/10620
Josh Holmes
slideshare.net/joshholmes

* Define Performance
* Web Runtime Architecture
* Performance Measurment Tools
* Demos

Fewer DOM Elements is better
Fewer CSS Rules are better
Fewer Lines of Script

JQuery off the CDN actually makes a big difference.
Performance is a very odd duck.

Network/CPU/GPU are important things to think about.

Web Runtime Archetecture Flow Chart (Networking to Compositing)
6 items are able to be loaded from a server at the same time.
More subdomains -> More connections available
If you had wildcard subdomains would that just be really awesome?

DOM Tree -> CSS -> JS -> DOM API
Layout is just a great game of Tetris

JS rewriting the DOM can cause rewrite thrashing.
60hz = 60fps

F12 Developer Tools

UI Responsiveness Tool

If you aren't going to use a script code don't include it.
It'll affect render time even if it does nothing.

You can check for Memory leaks by taking memory snapshots and comparing

requestAnimationFrame will allow things to run at the current framerate

Creating a valid display tree can take a long time.
Be careful how you ask for it.

Debugger can ignore any library code so it doesn't get debugged.
You don't have to walk through minified code... because that's terrible.

No comments:

Post a Comment