Login now

Not your profile? Login and get free access to your reports and analysis.

Tags

Sign in

No tag added here yet.
You can login on CircleCount to add some tags here.

Are you missing a tag in the list of available tags? You can suggest new tags here.

Login now

Do you want to see a more detailed chart? Check your settings and define your favorite chart type.

Or click here to get the detailed chart only once.

Nat Duca has been shared in 11 public circles

AuthorFollowersDateUsers in CircleCommentsReshares+1Links
John Nuntiatio38,284#circles #sharedcircles #circlesharing #circle #bestcircle #news #bestofcircles #bestcircleshare #share #tech #business #sport #small #smallcircle #photography #health2014-06-16 07:39:09305126
Thomas Power29,643to follow the Google I/O 2012 event over the next few days please use/share this Circle. This event is critical to the development of your knowledge of the Google+ ecosystem and most importantly the G+API.2012-06-27 06:15:011945610
Scott Knaster5,498version 4 update: Shared circle of Google I/O speakersIf you've already added the previous version of this shared circle, just add +Rich Hyndman and you'll be up to date. That's the only change in this version.Whether you're coming to San Francisco for Google I/O or participating online, there are many ways to keep up. Here's another: follow the I/O speakers by adding this shared circle. #io12  2012-06-27 03:51:201963176
Christian Kurzke (cnkurzke)8,673WOW, #io12  has not even started yet, and +Google+ is already on fire!If you guys try to stay on top of what's going on here, I'd like to share who I have on "speed dial" here in my "Movers and Shakers" circle.Most of them are Googlers, some of them are speakers, others are helping making stuff happen behind the scenes.All around, a great group of people to follow if you're here at Google IO, or if you're watching and following from home.Remember, most sessions are LIVE broadcast, all other sessions are recorded and available later!Let's ROCK THIS TOWN!(yeah, and follow me for my whacky music selection i'll share with you throughout the week... ;) )2012-06-26 19:22:093147411
Mano Marks0I'm getting really excited about Google I/O. We have a full set of +Google Maps API sessions. My session in on Wednesday, and will be live streamed. Of course all sessions will be recorded and posted. Here's a shared circle, started by +Scott Knaster of #io12  speakers.2012-06-26 16:39:05194247
Scott Knaster5,466version 3 update: Shared circle of Google I/O speakersv3: added one +Robert Pufky , removed another +Robert Pufky  (apologies to both), added +Ali Afshar .Whether you're coming to San Francisco for Google I/O or participating online, there are many ways to keep up. Here's another: follow the I/O speakers by adding this shared circle. #io12  2012-06-26 16:01:541951124
Scott Knaster5,435version 2 update: Shared circle of Google I/O speakersv2: added +Daniel Hermes , removed +danny hermes (apologies to both)Whether you're coming to San Francisco for Google I/O or participating online, there are many ways to keep up. Here's another: follow the I/O speakers by adding this shared circle. #io12  2012-06-25 16:26:241940342
Hacker News Circle5,697Part 3/3 (Remember to add all of them) Notice: Google+ Shared Circles are snapshots and you must manually re-add from this circle in order to update your circle with new users. Automatically generated from http://hngp.axxim.net/ (Go there to add yourself to the circle) at 01/29/2012 at 12:00pm EST Made by antimatter15 https://plus.google.com/116347431032639424492/aboutSource code (Github): https://github.com/antimatter15/autocircle2012-01-29 17:00:114652733
Hacker News Circle5,679Part 3/3 (Remember to add all of them) Notice: Google+ Shared Circles are snapshots and you must manually re-add from this circle in order to update your circle with new users. Automatically generated from http://hngp.axxim.net/ (Go there to add yourself to the circle) at 01/23/2012 at 12:00pm EST Made by antimatter15 https://plus.google.com/116347431032639424492/aboutSource code (Github): https://github.com/antimatter15/autocircle2012-01-23 17:00:08423322
Hacker News Circle5,667Part 3/3 (Remember to add all of them) Notice: Google+ Shared Circles are snapshots and you must manually re-add from this circle in order to update your circle with new users. Automatically generated from http://hngp.axxim.net/ (Go there to add yourself to the circle) at 01/17/2012 at 12:00pm EST Made by antimatter15 https://plus.google.com/116347431032639424492/aboutSource code (Github): https://github.com/antimatter15/autocircle2012-01-17 17:00:06303001
Hacker News Circle5,667Part 3/3 (Remember to add all of them) Notice: Google+ Shared Circles are snapshots and you must manually re-add from this circle in order to update your circle with new users. Automatically generated from http://hngp.axxim.net/ (Go there to add yourself to the circle) at 01/17/2012 at 12:00am EST Made by antimatter15 https://plus.google.com/116347431032639424492/aboutSource code (Github): https://github.com/antimatter15/autocircle2012-01-17 05:00:06291000

Activity

Average numbers for the latest posts (max. 50 posts, posted within the last 4 weeks)

2
comments per post
0
reshares per post
2
+1's per post

1,799
characters per posting

Top posts in the last 50 posts

Most comments: 15

posted image

2013-04-04 21:29:00 (15 comments, 70 reshares, 59 +1s)Open 

The question has come up a few times lately, "What are the transparent bars in Chrome DevTools' timeline?"

The short version is that a hollow frame means one of two things: your javascript main thread was busy doing other stuff that we forgot to show in DevTools [oops!], or you were bottlenecked on your GPU.

To tell the difference, you want to enable "Timeline: Show CPU Activity on the Ruler" inside DevTools' settings. Then, look for little dark grey blocks on the "Records" row... see them? Those are dark when the renderer thread was busy. If the renderer thread is mostly idle, e.g. no dark block, as is the case the screenshot from Dan that I yanked for this post, it is a very good signal that you are GPU bound.

GPU boundedness typically comes from two things:
1. having -webkit-filter, preserves3D properties on elements. Those eat... more »

Most reshares: 103

posted image

2014-09-03 17:29:03 (14 comments, 103 reshares, 62 +1s)Open 

At first glance, HTML5/CSS seems to have amazing capabilities for next gen UIs: any of the 115 or so style-able properties can be animated. Yet, in modern browsers only two properties, transform, and opacity, can be mutated at 60fps. In this talk, I explain why thats the case, and ask the question, "Should we demand better?"

Most plusones: 62

posted image

2014-09-03 17:29:03 (14 comments, 103 reshares, 62 +1s)Open 

At first glance, HTML5/CSS seems to have amazing capabilities for next gen UIs: any of the 115 or so style-able properties can be animated. Yet, in modern browsers only two properties, transform, and opacity, can be mutated at 60fps. In this talk, I explain why thats the case, and ask the question, "Should we demand better?"

Latest 50 posts

posted image

2014-10-02 22:07:03 (3 comments, 0 reshares, 1 +1s)Open 

Measure+Mutate is a fantastic idiom for performance. Use & enjoy.

Scaling usage requestAnimationFrame and a solution for avoiding style recalculation more than once per frame.

Recently some code that I wrote for Google internally was open sourced as part of the Closure library: "goog.dom.animationFrame"
https://github.com/google/closure-library/blob/master/closure/goog/dom/animationframe/animationframe.js

The library is quite interesting as it solves a big issue when working with browser animations in larger teams:

2 or more tasks want to do work in the same animation frame.

Say task 1 is animating your navigation while task 2 is animating some parts of the content.

In the worst case now the DOM operations look like this:

Animation frame:
Task 1 measures position of object A.
 - Triggers style recalculation
Task 2 changes position of object A.
 - Invalidates previous style calculation.
Task 1 measure position of object B.
 - Triggers another style recalculation
Task 2 changes position of object B.

The new library solves this with the following API:

var animationTask = goog.dom.animationFrame.createTask({
  measure: function(state) {
    state.width = goog.style.getSize(elem).width;
  },
  mutate: function(state) {
    goog.style.setWidth(elem, Math.floor(state.width / 2));
    animationTask();
  }
});

When code wants to schedule an animation frame, they have to supply two functions: One to measure the DOM and one to mutate it.

Because of this separation the library can serialize all the measure and mutate operations to happen in 2 phases: First all the measurements and then all the mutations.

Thus the operations against the DOM per animation frame now look like this:

Animation frame:
Task 1 measures position of object A.
 - Triggers style recalculation
Task 1 measure position of object B.
Task 2 changes position of object A.
Task 2 changes position of object B.

Note, how one style recalculation disappeared – and as more tasks are added this scales further without introducing any additional recalculations.

Besides this major feature, the library also solves the following problems:
- designed to minimize per frame memory allocation.
- designed to avoid accidental scheduling of the same work more then once per animation frame.

If this sounds useful, go ahead wrap the code in some module system of your choice and make your app a little silkier.___Measure+Mutate is a fantastic idiom for performance. Use & enjoy.

posted image

2014-10-02 22:05:27 (0 comments, 0 reshares, 2 +1s)Open 

Mmm csstriggers.com

HTTP 203: a brand new show all about web development!

Join +Paul Lewis and +Jake Archibald as they discuss CSS performance, and how you can gain insight into the impact your code has on browser rendering. 

Make sure to check out www.csstriggers.com to find out more. 

HTTP 203: CSS Triggers___Mmm csstriggers.com

posted image

2014-09-22 06:04:41 (0 comments, 1 reshares, 3 +1s)Open 

A bit of armchair philosophy about what we want the web platform to be.

https://speakerdeck.com/paullewis/edge-layout-performance-panel-intro

I gave the intro to the Layout Performance Panel at Edge 4 today. Here's the deck, which does contain suggestions I don't necessarily hold to, but were intended to spark good discussions.

A bit of armchair philosophy about what we want the web platform to be.

https://speakerdeck.com/paullewis/edge-layout-performance-panel-intro

I gave the intro to the Layout Performance Panel at Edge 4 today. Here's the deck, which does contain suggestions I don't necessarily hold to, but were intended to spark good discussions.___

posted image

2014-09-11 19:19:13 (0 comments, 0 reshares, 6 +1s)Open 

As of Chrome 37 (soon to be stable), we now report TouchEvent positions as floating-point values, giving your web app on Android the same input resolution that native apps enjoy.

For most uses of touch events this makes slow movement on high-dpi devices smoother without any change to the code.  For example, I drew the below pictures using http://www.rbyers.net/paint.html#points with and without this feature on a Nexus 5 (where each CSS px unit is 3x3 hardware pixels).

There's a draft "errata" of the TouchEvents spec with this API change here: https://dvcs.w3.org/hg/webevents/raw-file/v1-errata/touchevents.html#attributes.  There is a plan to bring this improvement to mobile Safari as well: https://bugs.webkit.org/show_bug.cgi?id=133180.  For more details see our bug: http://crbug.com/323935

#Chrome   #Touch  

As of Chrome 37 (soon to be stable), we now report TouchEvent positions as floating-point values, giving your web app on Android the same input resolution that native apps enjoy.

For most uses of touch events this makes slow movement on high-dpi devices smoother without any change to the code.  For example, I drew the below pictures using http://www.rbyers.net/paint.html#points with and without this feature on a Nexus 5 (where each CSS px unit is 3x3 hardware pixels).

There's a draft "errata" of the TouchEvents spec with this API change here: https://dvcs.w3.org/hg/webevents/raw-file/v1-errata/touchevents.html#attributes.  There is a plan to bring this improvement to mobile Safari as well: https://bugs.webkit.org/show_bug.cgi?id=133180.  For more details see our bug: http://crbug.com/323935

#Chrome   #Touch  ___

posted image

2014-09-03 17:29:03 (14 comments, 103 reshares, 62 +1s)Open 

At first glance, HTML5/CSS seems to have amazing capabilities for next gen UIs: any of the 115 or so style-able properties can be animated. Yet, in modern browsers only two properties, transform, and opacity, can be mutated at 60fps. In this talk, I explain why thats the case, and ask the question, "Should we demand better?"

At first glance, HTML5/CSS seems to have amazing capabilities for next gen UIs: any of the 115 or so style-able properties can be animated. Yet, in modern browsers only two properties, transform, and opacity, can be mutated at 60fps. In this talk, I explain why thats the case, and ask the question, "Should we demand better?"___

posted image

2014-08-05 18:04:40 (0 comments, 1 reshares, 1 +1s)Open 

In London on August 26 and love web performance? Come and join us!

Featuring A+ speakers: +Nat Duca +Addy Osmani and +Patrick Hamann

In London on August 26 and love web performance? Come and join us!

Featuring A+ speakers: +Nat Duca +Addy Osmani and +Patrick Hamann___

posted image

2014-07-29 07:59:17 (5 comments, 2 reshares, 9 +1s)Open 

See how your CSS affects layout, paint and composite.

http://csstriggers.com/

I've been cooking this little site up for the past week or so, and I'm super happy it's gone live. You should also check out the blog post (http://aerotwist.com/blog/css-triggers/) if you want to know more about how it's made (hint: totes automated thanks to Telemetry)

It's beta, so if you find bugs lemme know. <3

See how your CSS affects layout, paint and composite.

http://csstriggers.com/

I've been cooking this little site up for the past week or so, and I'm super happy it's gone live. You should also check out the blog post (http://aerotwist.com/blog/css-triggers/) if you want to know more about how it's made (hint: totes automated thanks to Telemetry)

It's beta, so if you find bugs lemme know. <3___

posted image

2014-05-10 16:04:48 (0 comments, 2 reshares, 2 +1s)Open 

:)

If you haven't seen Chrome's FrameViewer, you're in for a treat: http://bit.ly/1uItZvD - everything you ever wanted to know about Chrome's rendering stuck, plus more. Word of warning: chrome://tracing definitely takes some getting used to, but is definitely worth it.___:)

2014-03-31 23:52:24 (13 comments, 14 reshares, 23 +1s)Open 

I'd like to soapbox about the need for rationality in the web platform, using position:sticky as a guinea-pig to explain my perspective.

The thing that bugs me about position:sticky is that is entangled with the magical nature of scrolling on the web. Per spec, the browser can scroll the page up and down without telling JS: you get a scroll event, but it happens after the scroll has actually happened.

Wat.

Here's the thing: this ability in browsers is super important, because scrolling is super duper important to get right for users. Without it, going to espn.com and scrolling is a really horrible user experience. On mobile, that poor site janks for a half second while it loads. I NEED MY SPORTS SCORES TO SCROLL AT 60FPS. The browser works around this by making scroll asynchronous. A simpler example is this: http://jankfree.org/examples/simple_jank.html : on mobile... more »

I'd like to soapbox about the need for rationality in the web platform, using position:sticky as a guinea-pig to explain my perspective.

The thing that bugs me about position:sticky is that is entangled with the magical nature of scrolling on the web. Per spec, the browser can scroll the page up and down without telling JS: you get a scroll event, but it happens after the scroll has actually happened.

Wat.

Here's the thing: this ability in browsers is super important, because scrolling is super duper important to get right for users. Without it, going to espn.com and scrolling is a really horrible user experience. On mobile, that poor site janks for a half second while it loads. I NEED MY SPORTS SCORES TO SCROLL AT 60FPS. The browser works around this by making scroll asynchronous. A simpler example is this: http://jankfree.org/examples/simple_jank.html : on mobile browsers, this scrolls smoothly, even though in devtools you'll see that the page is a cataclysm of jank.

Unfortunately, we've painted ourselves into a corner here, with regard to position:sticky and all other scroll coupled effects. If you try to polyfill sticky positioning, you get jitter. Typically, the user's scroll is immediately handled by the browser, drawn to the screen as fast as possible so it feels responsive. THEN the browser tells JS about it. The polyfill thus hears about the onscroll too late: it valiantly tries to update the sticky position, but the page has been sent to the screen with the movement already applied, so the user perceives a little jump in the next frame as the polyfill's reaction finally makes it onscreen. Designers get cranky, and you don't get to go to space.

Because of this, we have a promulgation of urgent-for-some spec needs: anytime a user wants a scroll-coupled effect, they need need new spec. That gets scary quickly, because lets face it, there's a ton of cool stuff you an do in response to scroll. We articulated this concern once for snap points, here: http://lists.w3.org/Archives/Public/www-style/2014Feb/0769.html 

Sticky positioning is in this space too. A common misconception is that position:sticky is an easily speccable, ready to go, kind of thing. In reality, there many many many variations on position:sticky-ish behavior out there for every simple use case, so speccing it is all about compromises and generalization. Even if we implement a common form of position:sticky, there will be corner cases we don't implement. Want your element to sing a sea shanty and then shrink to scale(0) as it falls offscreen? Sorry, please wait for Level 2 version, tentatively titled "position: even-more-sticky."

So, what to do?

As some might recall, +Dimitri Glazkov wrote a great essay on our need for a rational web platform a while back (https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/4jBAnIVwrt0). In it, he points out that we must first and foremost "explain the magic" behind our browser.

I submit that much of the sticky positioning debacle is fallout from the browser being magical about scroll. First and foremost, in this space, we need to explain the magic to the page: that way when the magic isn't quite right, you can get around it to do things your way.

What form should this particular fix to the magic take? Not sure, yet! Maybe we need to explain browser-side scrolling using some new APIs. Or maybe we need to allow content to opt-out of this magic. +Rick Byers has some much more formed ideas on how this might be done.

Important for me is embracing the idea of layering and accidental magic, recognizing that the lack of layering can take a basic feature request and turn it into a much bigger problem.

Consider: if we had a web that had an opt-out for magical scrolling, then we'd have plenty of content out there today doing position:sticky effects. Sure, there'd be the odd incurably janky page out there that wanted sticky, too. And there'd be people asking for sticky effects to be easier to author.

Both are great feature requests. With the immediate "I CANT IMPLEMENT THIS" fires resolved, we can then work through those goals at a normal and healthy web platform pace.

So, here's to identifying layers in the web platform, and fixing the bugs that cause layering to go wonky. And, here's to picking a subset of the most commonly occurring cases on the web and making those easy (https://code.google.com/p/chromium/issues/detail?id=231752).___

2014-01-07 02:31:00 (0 comments, 0 reshares, 0 +1s)Open 

The one where I ruminate of layers, platforms, cabbages, and kings.

cross-posting from blink-dev

The one where I ruminate of layers, platforms, cabbages, and kings.

cross-posting from blink-dev___

posted image

2013-12-17 17:58:51 (0 comments, 0 reshares, 0 +1s)Open 

The Runtime Performance Checklist

A consolidation of the big hitters that will kill your fps.

Have you checked them all off?

The Runtime Performance Checklist

A consolidation of the big hitters that will kill your fps.

Have you checked them all off?___

2013-11-26 05:09:06 (0 comments, 0 reshares, 3 +1s)Open 

Wise words follow...

Scrolling at 60fps

For a while people recommended to use a "noHover" class during scrolling to avoids paints that kill 60fps. Turns out that doesn't actually work because adding the noHover class causes a full style recalc which will likely completely annihilate your frame rate.

Today I saw this article, which tries to use pointer events instead to avoid the problems http://www.thecssninja.com/javascript/pointer-events-60fps
… and, indeed, it achieves great frame rates. Unfortunately it is even more broken, since it will block all clicks on your site within half a second after you stop scrolling. That might be quiet a few clicks. Fortunately we have found a way to avoid those problem:

The key insight is to use a cover div on which you toggle pointer events (or you just move it in and out of view using translate during scrolling). Then, when the user clicks the coverDiv during scrolling you can use document.elementFromPoint to get the real target:

var doc = e.target.ownerDocument;
var copy = doc.createEvent('MouseEvents');
copy.initEvent(e.type, true, true);
var realTarget = doc.elementFromPoint(e.clientX, e.clientY);
realTarget.dispatchEvent(copy);

Unfortunately there is one problem with this approach:
It doesn't work across iframes – it could be made to work in same origin iframes, but it can't be made to work with cross origin iframes. So, i.e. a click on the +1 button or a like button on your site may still be "eaten"

… which is why people should not use such hacks and instead ask browser vendors, to simply not paint during scrolling if they think that painting during scrolling is bad – which incidentally I did do :)___Wise words follow...

posted image

2013-11-07 16:04:29 (0 comments, 1 reshares, 3 +1s)Open 

High performance animations

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

TL;DR Most modern browsers can animate these four properties cheaply. If you animate anything else chances are you'll bust your frame budget and miss out on 60fps.

#perfmatters

High performance animations

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

TL;DR Most modern browsers can animate these four properties cheaply. If you animate anything else chances are you'll bust your frame budget and miss out on 60fps.

#perfmatters___

posted image

2013-11-05 08:42:18 (2 comments, 0 reshares, 2 +1s)Open 

The best way to avoid the dreaded 300ms click delay is to disable double-tap zoom.

Much has been written about the evil 300ms delay in dispatching click events on touch-based browsers (eg. https://developers.google.com/mobile/articles/fast_buttons).  There are some good libraries for dealing with this (notably https://github.com/ftlabs/fastclick), but they have drawbacks such as:
- They can significantly hurt scrolling performance (https://plus.google.com/+RickByers/posts/cmzrtyBYPQc)
- They disable touch adjustment (the process of 'fuzzing' the position of a touch to a nearby target to make it easier to hit small targets)
- There are number of edge cases that are hard to get right in all browsers that can lead to bugs and confusion.

It's much better to avoid the problem entirely if possible.  Most modern browsers have a mitigation that manyde... more »

The best way to avoid the dreaded 300ms click delay is to disable double-tap zoom.

Much has been written about the evil 300ms delay in dispatching click events on touch-based browsers (eg. https://developers.google.com/mobile/articles/fast_buttons).  There are some good libraries for dealing with this (notably https://github.com/ftlabs/fastclick), but they have drawbacks such as:
- They can significantly hurt scrolling performance (https://plus.google.com/+RickByers/posts/cmzrtyBYPQc)
- They disable touch adjustment (the process of 'fuzzing' the position of a touch to a nearby target to make it easier to hit small targets)
- There are number of edge cases that are hard to get right in all browsers that can lead to bugs and confusion.

It's much better to avoid the problem entirely if possible.  Most modern browsers have a mitigation that many developers aren't aware of - disabling the double-tap gesture.  When double-tap is disabled, clicks can be processed immediately.

On Chrome Android and Firefox this involves using the "viewport" meta tag to disable zooming (with user-scalable=no or initial-scale=1,maximum-scale=1) - see https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.  Here's a simple test that measures the click delay with and without this optimization: http://jsbin.com/exAdATa/2.

In IE the situation is even better, you can selectively disable double-tap support on individual elements with touch-action (http://msdn.microsoft.com/en-us/library/windows/apps/Hh767313.aspx).  For example, apply 'touch-action: manipulation' to buttons and links to enable fast clicks without disabling pinches that happen to start on them.  Unfortunately we were not able to get this detail of touch-action into the W3C standard version (http://www.w3.org/Submission/pointer-events/#the-touch-action-css-property), so Chrome and Firefox may not get this anytime soon.

Note that we never added double-tap support to the desktop version of Chrome at all because we didn't want to introduce a click delay there (but on a large screen the 'zoom to fit' operation isn't very useful anyway).

Luckily FastClick mostly knows about all this and will disable itself when it's not needed (https://github.com/ftlabs/fastclick#when-it-isnt-needed), so for the most part you can use this library and not have to be aware of the details.

Of course it may still be surprising to users if double tap triggers a click instead of zooming, but that's a fundamental UX tradeoff that must be made in any solution to the click delay problem (and delaying most operations by 300ms is also REALLY bad for the user experience).

So bottom line: if you've implemented your own fast-click solution, make sure you're taking all the above solutions into account (or better yet just switch to using FastClick).

We're working on a number of other approaches on the Chrome team to help address the click delay problem.  Stay tuned!

#clickdelay   #touchevents   #touch  ___

posted image

2013-11-01 01:53:02 (0 comments, 0 reshares, 4 +1s)Open 

Android's WebView is now powered by Chrome

The latest release of Android (KitKat) now uses a Chromium based WebView for embedded web content across the system.  The new Chromium based WebView lets you take advantage of many of the latest features inside Chrome for your applications and content, including first class support for Chrome DevTools.

Check out our docs about the latest changes to WebView https://developers.google.com/chrome/mobile/docs/webview/overview 

Android's WebView is now powered by Chrome

The latest release of Android (KitKat) now uses a Chromium based WebView for embedded web content across the system.  The new Chromium based WebView lets you take advantage of many of the latest features inside Chrome for your applications and content, including first class support for Chrome DevTools.

Check out our docs about the latest changes to WebView https://developers.google.com/chrome/mobile/docs/webview/overview ___

posted image

2013-10-31 02:35:30 (0 comments, 0 reshares, 2 +1s)Open 

Good stuff.

A Developer's Guide to Rendering Performance

Where I run through how pixels get to the screen, what tools Chrome provides for you to profile your projects, and how to pronounce GIF correctly.

Educational, yo.___Good stuff.

2013-10-07 23:52:39 (3 comments, 0 reshares, 2 +1s)Open 

<rant>Beware of Applecare: as I learned from the lovely Palo Alto Apple Store today, quoting, at "even a small drop of water contact," Apple can decline service on everything. In a world where laptops and things like trackpads get little drops of water on them as a course of life, this renders AppleCare nullable virtually without thought on the part of Apple. Save yourself $249.</rant>

<rant>Beware of Applecare: as I learned from the lovely Palo Alto Apple Store today, quoting, at "even a small drop of water contact," Apple can decline service on everything. In a world where laptops and things like trackpads get little drops of water on them as a course of life, this renders AppleCare nullable virtually without thought on the part of Apple. Save yourself $249.</rant>___

posted image

2013-10-02 18:06:05 (2 comments, 2 reshares, 14 +1s)Open 

In which I yammer on about jank busting in about:tracing...

60 frames per seconds all the things!
Video of +Nat Duca's  *"Advanced Jank Busting in Chrome"*
http://2013.jsconf.eu/speakers/tom-wiltzius-and-nat-duca-advanced-jank-busting-in-chrome.html?1___In which I yammer on about jank busting in about:tracing...

posted image

2013-08-30 15:37:43 (6 comments, 1 reshares, 8 +1s)Open 

More jank-busting info from +Tom Wiltzius and I.

More jank-busting info from +Tom Wiltzius and I.___

posted image

2013-07-25 03:24:02 (0 comments, 0 reshares, 6 +1s)Open 

'nuf said.

Dear Diary,

An exciting day today - my patch for mouse controls in chrome://tracing landed in Canary! You can use the mouse to pan around (+ shift to temporarily switch to selection, + cmd / ctrl to temporarily switch to zoom)

LGTM.

Paul___'nuf said.

2013-07-24 05:12:07 (0 comments, 0 reshares, 0 +1s)Open 

More details from +Philip Rogers on using about:tracing to hunt down jank and slow painting in chrome, both on desktop and android. Of particular note in this is a mini skia debugger, built right into tracing. No more trying to compile skia to figure out why a page paints slowly!

I did a quick presentation today on about:tracing for Chrome engineers, and you might like it too. About:tracing is like devtools on steroids. I don't yet recommend about:tracing for regular web developers (sometimes it 'roid rages) but it's a great addition to your toolbox if you want to dive into performance.

This builds on the work by Nat Duca and Tom Wiltzius in their I/O talk "Jank Free: Chrome Rendering Performance": Google I/O 2013 - Jank Free: Chrome Rendering Performance___More details from +Philip Rogers on using about:tracing to hunt down jank and slow painting in chrome, both on desktop and android. Of particular note in this is a mini skia debugger, built right into tracing. No more trying to compile skia to figure out why a page paints slowly!

posted image

2013-07-19 03:01:29 (0 comments, 0 reshares, 2 +1s)Open 

Super useful

Reminder: With Chrome DevTools open, using the "debugger" statement in JavaScript will stop execution & jump into the interactive debugger. Useful for setting fixed breakpoints in code.___Super useful

posted image

2013-05-31 15:25:25 (0 comments, 0 reshares, 2 +1s)Open 

A great little ditty about how to use the latest about:tracing hotness....

Chrome Canary gets a new tracing feature allowing you to record paints through the life of a page & examine gpu layering Tracing paint operations in Chrome Canary___A great little ditty about how to use the latest about:tracing hotness....

posted image

2013-05-28 18:14:31 (0 comments, 0 reshares, 3 +1s)Open 

Changing the performance conversation

I spent a lot of time discussing performance with developers at Google I/O. I noticed that the emphasis is still heavily in favour of network and page load time which, while critical, isn't the only concern we have. I've written up a few thoughts on my blog: http://aerotwist.com/blog/reflections-on-performance-at-google-io/

#perfmatters  

Changing the performance conversation

I spent a lot of time discussing performance with developers at Google I/O. I noticed that the emphasis is still heavily in favour of network and page load time which, while critical, isn't the only concern we have. I've written up a few thoughts on my blog: http://aerotwist.com/blog/reflections-on-performance-at-google-io/

#perfmatters  ___

posted image

2013-05-20 19:32:16 (0 comments, 102 reshares, 14 +1s)Open 

+Tom Wiltzius and I gave a talk last week at I/O about fighting web page jank in Chrome. For slides from the video, as well as other jank busting resources, wander on over to http://jankfree.org/.

If you're fighting with rendering performance in a web app, feel free to give a shout.

#perfmatters  #GoogleIO2013 #jankfree

+Tom Wiltzius and I gave a talk last week at I/O about fighting web page jank in Chrome. For slides from the video, as well as other jank busting resources, wander on over to http://jankfree.org/.

If you're fighting with rendering performance in a web app, feel free to give a shout.

#perfmatters  #GoogleIO2013 #jankfree___

posted image

2013-04-05 05:59:09 (0 comments, 0 reshares, 3 +1s)Open 

#protip : Your code can use console.time() & console.timeEnd() to mark ranges in DevTools Timeline recordings. Combine with console.timeStamp() for annotations and you have SO much profiling power.

#protip : Your code can use console.time() & console.timeEnd() to mark ranges in DevTools Timeline recordings. Combine with console.timeStamp() for annotations and you have SO much profiling power.___

posted image

2013-04-04 21:29:00 (15 comments, 70 reshares, 59 +1s)Open 

The question has come up a few times lately, "What are the transparent bars in Chrome DevTools' timeline?"

The short version is that a hollow frame means one of two things: your javascript main thread was busy doing other stuff that we forgot to show in DevTools [oops!], or you were bottlenecked on your GPU.

To tell the difference, you want to enable "Timeline: Show CPU Activity on the Ruler" inside DevTools' settings. Then, look for little dark grey blocks on the "Records" row... see them? Those are dark when the renderer thread was busy. If the renderer thread is mostly idle, e.g. no dark block, as is the case the screenshot from Dan that I yanked for this post, it is a very good signal that you are GPU bound.

GPU boundedness typically comes from two things:
1. having -webkit-filter, preserves3D properties on elements. Those eat... more »

The question has come up a few times lately, "What are the transparent bars in Chrome DevTools' timeline?"

The short version is that a hollow frame means one of two things: your javascript main thread was busy doing other stuff that we forgot to show in DevTools [oops!], or you were bottlenecked on your GPU.

To tell the difference, you want to enable "Timeline: Show CPU Activity on the Ruler" inside DevTools' settings. Then, look for little dark grey blocks on the "Records" row... see them? Those are dark when the renderer thread was busy. If the renderer thread is mostly idle, e.g. no dark block, as is the case the screenshot from Dan that I yanked for this post, it is a very good signal that you are GPU bound.

GPU boundedness typically comes from two things:
1. having -webkit-filter, preserves3D properties on elements. Those eat away at the gpu like... um, something hungry.
2. having too many big layers.

Layers? "Show composited layer borders" to see them. The place most folks get in trouble is not layer count really, but rather the area of the layers.

Rule of thumb: most computers are designed so that they can touch every pixel on its main screen about 4 times. As a really simple example, a 2-year-old MacBook Air is provisioned for its LCD's size. When you plug in a 30" monitor that has more than one layer, it starts getting GPU bound.

Why does this matter? [Handwaving,] a layer touches a pixel once when we draw the screen. If a layer is the size of your window, e.g. you've got a width=100% height=100% div with -webkit-transform: translateZ(0), then you're touching every pixel of the screen once. So, count up the the area of your layers and if you exceed 4 times the area of your monitor, you may not be able to go to space [because you're GPU bound].

A good test for gpu boundedness is to shrink the window size by 1/2 in each dimension. If things stay slow, then something else is happening... if things get faster, you were probably hitting the GPU.___

posted image

2012-06-29 05:00:24 (8 comments, 2 reshares, 22 +1s)Open 

Fighting web page jank, with about:tracing, at Velocity 2012. :)

Lets make the web #jankfree.

Fighting web page jank, with about:tracing, at Velocity 2012. :)

Lets make the web #jankfree.___

Buttons

A special service of CircleCount.com is the following button.

The button shows the number of followers you have directly in a small button. You can add this button to your website, like the +1-Button of Google or the Like-Button of Facebook.






You can add this button directly in your website. For more information about the CircleCount Buttons and the description how to add them to another page click here.

Nat DucaCircloscope