Check these out next
Performance beyond page load (jQuery Conference)
Jul. 23, 2015•0 likes•1,988 views
2 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Internet
Talk to be presented at jQuery Conference on 24th July. It discusses the potential issues that hamper the rendering performance, and also their respective remedies.
Apoorv SaxenaFollow
Speaker, Workshop Organiser, Performance Coach at WingifyRecommended
Deep dive into Front end PerformanceApoorv Saxena
Running HTML5 Mobile Web Games at 60fpsApoorv Saxena
Performance beyond page load - CSS Conf Asia 2015Apoorv Saxena
Service workers in JavaScriptApoorv Saxena
WordPressサイトに簡単に支払い機能をつけようとした時に考えたこと
＆調べたこと
＋やってみた JP Stripes Kyoto vol.3Atsushi Ando
Extensions +Tools/Softwares For FreelancingMehedi Hasan Sobuj
Performance beyond page load (jQuery Conference)
- Performance beyond Page Load Apoorv Saxena
- @apoorv_saxena
- Kickstart the talk!
- Let the data speak!
- Not impressed ?
- At EdgeConf 2012, Facebook confirmed this when it mentioned that in an A/B test, it slowed down scrolling from 60fps to 30fps, causing engagement to collapse.
- What is smooth interaction? Devices refresh their screen 60 times a second. Thus, frame budget for smooth interaction is 16ms (1 second / 60 frames = 16.66 ms / frame) Though, browser has got some householding work as well, which leaves us with about 10ms in total.
- Jank When failing to meet the frame budget of 10ms, we come across
- Rendering Performance Let’s build smooth interaction experiences
- 16ms isn’t a lot of time
- In a Nutshell..
- Pixel Pipeline
- Layout
- width overflow height padding font-family margin display vertical-align border-width border clear top position bottom font-size float left text-align overflow-y right line-height font-weight white-space min-height
- Painting
- color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius background-size box-shadow
- Composting
- Tools at hand
- FPS meter
- Profiling with Timeline
- Show Paint Rectangles
- Things we intend to achieve
- Smooth Scrolling
- What can cause Jank during scroll? Processing that consumes more than 16ms: ● Time consuming operations e.g. Garbage Collection event. ● JavaScript triggered operations that consume lot of time e.g. Layout Thrashing ● Loads of repainting on the screen, reason can be attributed to JS / CSS or both.
- Smooth Animation
- What can cause Jank during animation? Triggering any other operation that can cause the animation to exceed its frame budget.
- Smooth Interaction
- What can cause Jank during interaction with page? Synchronous operation(s) inside the event handler that exceeds the current frame budget.
- Best practices related to Rendering Performance
- Avoid Memory Leaks
- Reducing DOM calls Writing / Reading frequently to/from DOM is a bad practice
- Forced Synchronous Layout DOM write operation followed by a DOM read operation for a layout property of a DOM element
- Layout Thrashing Forced synchronous layout in quick succession Demo: Animations example
- How to avoid Layout Thrashing
- Library: FastDom Eliminates layout thrashing by batching DOM read/write operations,
- Potential Scroll Bottlenecks Demo: Repaint on Scroll
- Debounce Input Handlers
- Reduce Paint Areas
- Avoid Paint Storms
- How to run Animations at 60fps ?
- GPU Acceleration
- Canvas is hardware accelerated
- JS Animations
- CSS Animations Demo: SnowFlake Animation
- Style Calculations Reference: CSSTriggers.com
- Web Animations API Demo: SnowFlake Animation
- GIFs and Performance
- Performance Audit Materialup
- Performance Audit Time
- Thank you.