Performance in CSS

Performance in by Yuya Saito / Rich Media CSS 2014.09.09
@ hikalab

UX Engineer @ Yuya Saito

#perfmatters

Rendering Performance on CSS

Jank: What is it?

εΫϩʔϧͷࡍʹͳΜ͔Ҿ͔͔ͬΔ Ξχϝʔγϣϯ͕ΧΫΧΫͯ͠͠·͏

Parallax!!

Frame = 16.666666666666666ms 60FPS

How Browser Render Pixel

Recalculate Style

ͦΕ΄ͲେมͳλεΫͰ͸ͳ͍ ϒϥ΢βʹͱͬͯ

<html> <head> <body> <p> <span> Hello World p { font-weight:
bold; } span { display: none; } CSSOM CSS Object Model

Layout

গʑ໽հͳ΋ͷ ϒϥ΢βʹͱͬͯ

<html> <body> <article> <h1> <p> <button> DOM + CSSOM =
Render Tree

࠷΋ෛՙ͕͔͔Δϓϩηε ϒϥ΢βʹͱͬͯ

Layout Paint

Composite

Ұ୴ফͯ͠ɺࠨʹ10ηϯνͣΒͯ͠ॻ͖௚͢

GPU Graphical Processing Unit

Tools, Not Rules

“ For the most part we’ll be trying to get
to 60fps in our work, and that normally means understanding what the browser’s doing and optimizing for it. — Paul Lewis

“ Tools, Not Rules — Paul Lewis

chrome://flags/#enable-devtools-experiments

“ You can't optimize what you can't measure. — Anonymous

Paint is Very Expensive

େ͖ͳΤϦΞͷϨΠΞ΢τɺελΠϧແޮԽ

<div> <ul> <li> <header> <div> <footer> <h3> <a> <p> <a>
Ϋϥεͷมߋ ͜ͷཁૉΛมߋ͍ͨ͠

Ϋϥεͷมߋ

How to solve it? ճආ

Ϋϥε/ελΠϧͷมߋ ͜ͷཁૉΛมߋ͍ͨ͠

How to measure it? ܭଌ

Layout Thrashing

// Read var h1 = element1.clientHeight; ! // Write (invalidates
layout) element1.style.height = (h1 * 2) + 'px'; ! // Read (triggers layout) var h2 = element2.clientHeight; ! // Write (invalidates layout) element2.style.height = (h2 * 2) + 'px'; ! // Read (triggers layout) var h3 = element3.clientHeight; ! // Write (invalidates layout) element3.style.height = (h3 * 2) + 'px';

Forced Synchronous Layout

// Read var h1 = element1.clientHeight; var h2 = element2.clientHeight;
var h3 = element3.clientHeight; ! // Write (invalidates layout) element1.style.height = (h1 * 2) + 'px'; element2.style.height = (h2 * 2) + 'px'; element3.style.height = (h3 * 2) + 'px';

by Wilson Page git.io/KdTJYw fastdom

ϨΠΞ΢τɾϓϩύςΟͷΞχϝʔγϣϯ

www.html5rocks.com/en/tutorials/speed/high-performance-animations

-webkit-transform: translateZ(0);

will-change: animateable-feature

by Sara Soueidan bit.ly/WyKbT7 Everything You Need to Know About
the CSS will-change Property

-webkit-transform: translateZ(0);

will-change: left, top;

by Paul Lewis csstriggers.com CSS TRIGGERS...

by Joel Besada bouncejs.com Bounce.js

by Julian Shapiro julian.com/research/velocity Velocity.js

Paint Storms

Changing visual properties of an element will trigger a paint.

৭Λมߋ

Paint!?

device-pixel-ratio = 1

positionFixed͕ͳ͍

Show paint rectangles

Experiments: Paint Proﬁler

Don't Paint

www.html5rocks.com/en/tutorials/speed/high-performance-animations

-webkit-transform: translateZ(0); position: ﬁxed;

ʰߴՁͳʱϖΠϯτ

box-shadow border-radius gradient

Resize Images

Paint affects not only Animation but also Scrolling

Image Resize is missing?

CTRL + H

Images in Performance

Images are 1MB in 1.7MB

ߴղ૾౓σΟεϓϨΠ

by RICG The picture Element picture.responsiveimages.org

by Andreas Bovens bit.ly/1wdgML0 Responsive Images: Use Cases and Documented
Code Snippets to Get You Started

In Closing

“ To me, performance is a feature […]. I think
there’s also a lesson to be learned here about the competitive landscape of the public internet, where there are two kinds of websites: the quick and the dead. — Jeff Atwood, Coding Horror

When: The Hardest Question

Thank You! @cssradar

Performance in CSS

Performance in CSS

More Decks by Yuya Saito

Other Decks in Programming

Featured

Transcript