[개발(이라고 쓰고 세발)] Device Agnostic Development

LINK : //jankfree.org

webP
mod_pagespeed
resource timing API

- computer side
Jank
Limit styte- recalculations
- limit styte- changes to the DOM
- Don`t change the body when you shoud change child elements directly.

Avoid Layout Thrashing
- We got offwetWidth ( causes a layout)
- We set styte-.width (invalidates the layout)
- we repeat that prpocess

ex ) for(var i= 0; i < element.length; i++) { styte-.height.i }

Remove Unnecessary java-s!crip
- Dont do in JS that which can be doe in CSS. animajtions & transitions
- p-osition:fixed is your frend.
- p-osition : sticky is upcoming.
-
- keep your event listener code to a minimum, the can run several times per frame.


render solve

reduce image overhead... AGAIN

reduce paint cost
- first, deduce the size, then reduce the complexity



Solving for your users.
The save content and functionality
- you are subject to many constraints
- don`t pass them on to users
- you should not offer reduce functionality

Users come to you for content
- big screens = room for content
- that doesn`t work for small screens
- give them the same content, but refactor for the constraint.

Suggestion
Assign a Sheriff
- clarify your constraints before you start.
= set limits(number of requests, GCs, paint time, layout, styte- calculations)
- track it during the lifetime of the project.
- dont ship until you hit your targets.

http://jankfree.org

Conclusion
- its not about devices, its about content.
= every devices is likely to have at least one constraint
- jet the browser do the word
- above all, deliver the content to your users quickly


googlecom/+aerotwist
peter.sh/+

@aerotwist
@beverloo