Upload File

it works on your computer... but does it render fast enough?

  • Home
  • Technology
  • It works on your computer... but does it render fast enough?
78
IT WORKS ON YOUR COMPUTER BUT DOES IT RENDER FAST ENOUGH?

Upload: diogo-antunes

Post on 15-May-2015

1.581 views

Category:

Technology


1 download

Report

Tags:

DESCRIPTION

Most of us devs have a nice machine and/or a pretty fancy phone. The sites you develop always look smooth and sweet on your devices but... Do your users have the kind of experience you wish? In this talk I will review, on a high level, how the browser rendering works, how your HTML, CSS and/or js impacts on page rendering/loading and share techniques to minimize the impact. presented @ codebits VI (2012) in Lisbon

TRANSCRIPT

Page 1: It works on your computer... but does it render fast enough?

IT WORKS ON YOUR COMPUTERBUT DOES IT RENDER FAST ENOUGH?

Page 2: It works on your computer... but does it render fast enough?

WHO AM I?Diogo Antunesinfrastructure team @ Booking.comclient side performance improvement/optimization@dicode

Page 3: It works on your computer... but does it render fast enough?

OVERVIEWhow browsers render?browserstipstools/services

Page 4: It works on your computer... but does it render fast enough?

HOW DO BROWSERS DO THEIR JOB?

Page 5: It works on your computer... but does it render fast enough?

ARCHITECTURE

Page 6: It works on your computer... but does it render fast enough?

RENDERING

Page 7: It works on your computer... but does it render fast enough?

PARSING FLOW

Page 8: It works on your computer... but does it render fast enough?

WANT TO GO DEEPER?

http://taligarsiel.com/Projects/howbrowserswork1.htm

Page 9: It works on your computer... but does it render fast enough?

BACK TO THE BROWSERS!

Page 10: It works on your computer... but does it render fast enough?

CHROMElayout engine - webkit

js engine - v8

Page 11: It works on your computer... but does it render fast enough?

FIREFOXlayout engine - gecko

js engine - JägerMonkey (since 4.0)

Page 12: It works on your computer... but does it render fast enough?

SAFARIlayout engine - webkit

js engine - Nitro

Page 13: It works on your computer... but does it render fast enough?

INTERNET EXPLORERlayout engine - trident (since 4.0)

js engine - Chakra (since 9), JScript before

Page 14: It works on your computer... but does it render fast enough?

OPERAlayout engine - presto (since 7.0)

js engine - Carakan (since 10.50)

Page 15: It works on your computer... but does it render fast enough?

WHAT ARE WE TALKING ABOUT?Repaint

Reflow

JS rendering time

Page 16: It works on your computer... but does it render fast enough?

REPAINTchanges that affect visibility of the element

but not the layout

eg. opacity, background-color

Page 17: It works on your computer... but does it render fast enough?

REPAINTit's expensive

so avoid inline css/js

eg. opacity, background-color

Page 18: It works on your computer... but does it render fast enough?

REFLOWchanges that affect viewport/elements size

may be as expensive as laying out the whole page again

problem is many things trigger this event

Page 19: It works on your computer... but does it render fast enough?

VISUALIZING REFLOWmozilla.org

Gecko  Reflow  Visualization  -­  mozilla.org

Page 20: It works on your computer... but does it render fast enough?

VISUALIZING REFLOWgoogle.co.jp

Gecko  Reflow  Visualization  -­  google.co.jp

Page 21: It works on your computer... but does it render fast enough?

VISUALIZING REFLOWwikipedia

Gecko  Reflow  Visualization  -­  Wikipedia

Page 22: It works on your computer... but does it render fast enough?

REFLOWeven more expensive than a repaint

can be triggered by many actions

so avoid inline css/js

and even a offsetWidth/Height calculation triggers it

Page 23: It works on your computer... but does it render fast enough?

JS RENDERING TIMEthe model of the web is synchronous

when a script tag appears, it will parse and execute the script

in FF and Webkit another thread continues to parse the HTML doc

Page 24: It works on your computer... but does it render fast enough?

JS RENDERING TIMEit can lock your rendering

it can also produce repaint/reflow

which means it will take longer to execute

Page 25: It works on your computer... but does it render fast enough?

LET'S LOOK AT THE WATERFALLS

Page 26: It works on your computer... but does it render fast enough?
Page 27: It works on your computer... but does it render fast enough?

CHROMEYahoo

Wumocomicstrip

Page 28: It works on your computer... but does it render fast enough?

FFYahoo

Wumocomicstrip

Page 29: It works on your computer... but does it render fast enough?

IE 9Yahoo

Wumocomicstrip

Page 30: It works on your computer... but does it render fast enough?

IE 8Yahoo

Wumocomicstrip

Page 31: It works on your computer... but does it render fast enough?

IE 7Yahoo

Wumocomicstrip

Page 32: It works on your computer... but does it render fast enough?

BEWAREnumber of concurrent connectionscss limits IE6-9choose wisely when to run your JS

Page 33: It works on your computer... but does it render fast enough?

BEWARE PARALLEL CONNECTIONSIE 6-7: 2IE 8-9: 6Chrome, Firefox, Safari: 6You can change this, but you don't want that

Page 34: It works on your computer... but does it render fast enough?
Page 35: It works on your computer... but does it render fast enough?

CSSBad selectors bad *avoid css expressionsput css in the document head

Page 36: It works on your computer... but does it render fast enough?

JSscripts @ bottom

async, defer, lazy load

beware of the DOM

micro optimization - really the last thing you should do

Page 37: It works on your computer... but does it render fast enough?

HTML

Page 38: It works on your computer... but does it render fast enough?

specify a charset

keep the number of DOM nodes as low as possible

avoid massive depth

Page 39: It works on your computer... but does it render fast enough?

IMAGESset width and heightcrop extra space around imagesuse the best file formateg. use png-8, gif to reduce the number of colors in the pallette

Page 40: It works on your computer... but does it render fast enough?

HTTPUse gzip where possiblereduce dns lookupsuse cookieless domains for static contentuse a CDNavoid redirects

Page 41: It works on your computer... but does it render fast enough?

FRONTEND SPOFany 3rd party widgetcustom font downloadingeven your own JS can cause it...

wumocomicstrip.com

Page 42: It works on your computer... but does it render fast enough?

MOBILEMobile IS different!

then again not that different

Page 43: It works on your computer... but does it render fast enough?

SAFARI MOBILE (IOS)layout engine - webkit

js engine - Nitro

Page 44: It works on your computer... but does it render fast enough?

CHROME MOBILE (ANDROID)layout engine - webkit

js engine - v8

in iOS it uses a UI Webview

Page 45: It works on your computer... but does it render fast enough?

FIREFOX MOBILE (ANDROID)layout engine - gecko

js engine - JägerMonkey (since 4.0)

Page 46: It works on your computer... but does it render fast enough?

WATTERFALLS AGAIN

Page 47: It works on your computer... but does it render fast enough?

YAHOO IPAD2http://mobitest.akamai.com/m/results.cgi?testid=121112_XA_4T

Page 48: It works on your computer... but does it render fast enough?

YAHOO GALAXY S, ANDROID 2.2http://mobitest.akamai.com/m/results.cgi?testid=121112_3S_6J

Page 49: It works on your computer... but does it render fast enough?

YAHOO IPHONE 4, IOS 5http://mobitest.akamai.com/m/results.cgi?testid=121112_HM_6K

Page 50: It works on your computer... but does it render fast enough?

ADDITIONAL ISSUESlatencybattery lifenumber of requestsdata transfer size

Page 51: It works on your computer... but does it render fast enough?

TIPSuse data-uri for images wisely

HTML 5 api

W3C Mobile best practices

Page 52: It works on your computer... but does it render fast enough?

TOOLS

Page 53: It works on your computer... but does it render fast enough?

CHROME TOOLSChrome dev tools

Page 54: It works on your computer... but does it render fast enough?

CHROME TOOLSspeed tracer

Page 55: It works on your computer... but does it render fast enough?
Page 56: It works on your computer... but does it render fast enough?
Page 57: It works on your computer... but does it render fast enough?

FF TOOLSFF dev tools

Page 58: It works on your computer... but does it render fast enough?

FF TOOLSFirebug

Page 59: It works on your computer... but does it render fast enough?

OPERA TOOLSOpera Dragonfly

Page 60: It works on your computer... but does it render fast enough?

IE TOOLSAjax Dynatrace

Page 61: It works on your computer... but does it render fast enough?

CROSS BROWSERwebpagetest.org

Page 62: It works on your computer... but does it render fast enough?

DATA FTW

Page 63: It works on your computer... but does it render fast enough?

TRACK YOUR LOAD TIMEScustom

navigation timing api

harstorage.com

Page 64: It works on your computer... but does it render fast enough?

TRACK YOUR JS ERRORSwindow.onerror

http://errorception.com/

Page 65: It works on your computer... but does it render fast enough?

WEBPERF INSIGHTSgoogle page speed

google page service

yslow

Page 66: It works on your computer... but does it render fast enough?

PROFILE AND BENCHMARK YOUR JSjs perf

profilers in the dev tools

Page 67: It works on your computer... but does it render fast enough?

TRACK LATENCYhttps://github.com/yahoo/boomerang

Page 68: It works on your computer... but does it render fast enough?

WHAT BROWSERS SHOULD I REALLY CARE ABOUT?here comes the silver bullet!!!

it really.... depends

get to know your audience!

Page 69: It works on your computer... but does it render fast enough?

STATCOUNTER

Page 70: It works on your computer... but does it render fast enough?

W3SCHOOLS

Page 71: It works on your computer... but does it render fast enough?

NET APPLICATIONS

Page 72: It works on your computer... but does it render fast enough?

W3COUNTER

Page 73: It works on your computer... but does it render fast enough?

AKAMAI IO

Page 74: It works on your computer... but does it render fast enough?

BUILD YOUR FRONTEND CODE WISELY!some flexibility may be lost

follow the principles

but addapt them to your business customers/needs

Page 75: It works on your computer... but does it render fast enough?

THANKS!

Q & A

Page 76: It works on your computer... but does it render fast enough?

RESOURCES

http://taligarsiel.com/Projects/howbrowserswork1.htmhttps://developers.google.com/speed/docs/best-practices/rules_introhttp://www.stevesouders.com/http://www.w3.org/TR/mobile-bp/http://developer.yahoo.com/performance/rules.htmlhttp://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

Page 77: It works on your computer... but does it render fast enough?

BOOKS

High Performance Web Sites

Web Performance Daybook Volume 2

Even Faster Web Sites

Page 78: It works on your computer... but does it render fast enough?

RENDER FINE

Render Alboi

Michael Render

Vray Render

Soon it will be cold enough

render - mlfmonde.org

STANWORTH HOUSE - Ribble Valley · Profile Sheeting Wall Timber Frames Render Stone Light AB AB AB SVP WP Render Render Render Slate Slate Render Brick Render Render Render Slate

Formal Verification – Is It Real Enough?

Night Render

Large enough to do it right, small enough to care....Large enough to do it right, small enough to care. At Nora Lighting, our clients are at the heart of everything we do. ... The

Water???? ….Not enough, not clean enough, Let’s fix it!!!!!

Shoe render

The Duty to Render Assistance at Sea: Is it Effective or

Package ‘ndtv’ - R · •Render it as a movie usingrender.animation. •Render animations to a web page usingrender.d3movie •Plot multiple ’stills’ of a movie withfilmstrip

V-Ray Render (GOOGLE SketchUp) - Interior Hotel Render

Sketch Render

when is it enough

Exterior Render

Site Render

Earthquakes—Rattling the Earth’s Plumbing System... or it may take as long as days or months. Steps can be large enough to make a well flow at land surface, or render it dry. The

Render - cdn.harmonyapp.com

Enewall data sheet render & render finishes (c)

GAM531 DPS931 – Week 11 Render State. The Render State Render State BuffersShadersSamplers Rasterizer State Blend State

32 Khoo Kay Peng - Shook Lin & Bok Wee Siam-CLJ-2014-10-403.pdfimpracticable”. The words “exceptional circumstances which render it impracticable” are wide enough to cover the

When is it time to say enough is enough for historical

RENDER ONTO PEBBLEDASH RENDER ON PEBBLEDASH

Zakat: Why? Is it enough?

ActiveXtreme Render

Emu Render

Catlike Coding › Unity › Tutorials › Scriptable Render ... · 1.1 Asset We'll introduce a MyPostProcessingStack asset type to control post-processing. Give it a public Render

RENDER ORIGINAL

Render competition

Tutorial Render

STOARMAT RENDER SYSTEM DRAWING REGISTER 2017 Render System on... · StoArmat Render System Timber Window Joinery - Head Detail FCS 870 StoArmat Render System Timber Window Joinery

InfoSec Experience It Not Enough…