New Perspectives On Web Design

By Addy Osmani CHAPTER 6 A large amount of the Web’s traffic is images — well over half^5 accord- ing to the HTTP Archive. In ma ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues you may still need it. The browser developer tools in Chrome, Opera and ...

By Addy Osmani CHAPTER 6 further Reading HTML5 Rocks: Performance http://www.html5rocks.com/en/features/performance Jank Bustin ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues changing visibility or adding an outline to an element. The actual proc ...

By Addy Osmani CHAPTER 6 paint and layout issues. Some of the core causes of jank in sites and appli- cations include: Heavy pa ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues You may have noticed that we’ve been caring about frame rate so far whe ...

By Addy Osmani CHAPTER 6 CSS animations expose a few different techniques for animating. These include: transitions, which autom ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues There is no guarantee that this hardware compositing will be available ...

By Addy Osmani CHAPTER 6 lot of areas that require painting and compositing. Doing this more than you absolutely need to is a te ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues Timeline won’t display any data by default but you can begin a record- ...

By Addy Osmani CHAPTER 6 The summary view (at the top of Timeline) displays horizontal bars representing the network and HTML pa ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues ConTinuouS PainTing MoDe foR DiagnoSing Slow STYleS Some of the reasons ...

By Addy Osmani CHAPTER 6 ly repainting, providing a counter that shows just how much paint work is being done. You can use the H ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues 60fps, but it is getting closer to a consistent 30fps on desktop, which ...

By Addy Osmani CHAPTER 6 having to switch back and forth with the Timeline view. Keep in mind that just tracking the FPS counter ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues To set up remote debugging for your version of Chrome or Opera, fol- lo ...

By Addy Osmani CHAPTER 6 Check the Timeline for any frames that went over budget (i.e. that are below that ideal 60fps). If you ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues Particularly on sites that rely heavily on scroll, you might discover t ...

By Addy Osmani CHAPTER 6 Tutorial: Getting a Jank-Free Mobile Web Experience We’ve talked the talk, but let’s look at a simple a ...

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues JavaScript // setup var rAF = window.requestAnimationFrame; var startBt ...