SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Jank Busting

  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    Jank Busting

    After getting back from a 3 month holiday I've been exposed to a lot of new info on rendering performance from people working on Chrome/blink.

    These two videos are must see for all front-end dev's writing HTML, CSS and JavaScript.
    http://t.co/Faz7xeJ4w1
    http://t.co/1Y8cS9nyka

    The rendering engine has always been a black box til now, we haven't known the best ways to optimize things.
    The Chrome dev tools expose how rendering happens and makes it easy for us to find what work we're making the browser do and identify bottlenecks.
    I have never done such micro improvements before but I'm finding minor tweaks to the css can have massive improvements on sites with laggy scrolling.

    http://jankfree.org/

    Anyone have other resources on this or thoughts?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I have never done such micro improvements before but I'm finding minor tweaks to the css can have massive improvements on sites with laggy scrolling.
    It would be interesting if you could document some of your findings Mark.

    It's not an area that I have really looked deeply into so your insight would be useful.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    The videos will do a much better job at explaining how the tools work than me but I can give you a few practical examples.

    Sites that are notoriously janky are ones that update the dom regularly with js, use fixed positioning, or even lots of positioning with z-index.
    The main finding was understanding the different steps that the browser takes to render something on the screen
    https://developers.google.com/chrome.../docs/timeline

    Put simply, with each frame the following steps all need to occur in 16ms to be able to update the page at 60 frames per second giving the illusion of fluid motion.
    - js can execute taking a certain amount of time
    - Rendering is a step that happens whenever the browser needs to recalculate styles or layout e.g. changes to classes, window size, images loading pushing things around etc.
    - Painting is the drawing of actual pixels - areas of the page that are in 'layers' are saved as separate images
    - Compositing is then stacking all of the separate images together to present an image to the screen.

    So the things you want to do to decrease rendering time are:
    1. Record some action in the Timeline Frames and find where the majority of time is being spent.
    2. Turn on Show Paint Rectangles to show which areas of the page are getting rendered over and over.
    3. Reduce the number of paints by changing the DOM less often or by moving unrelated areas of the page into their own layers - transform: translateZ() is one way.
    4. Turn on Continuous repaint to show frames per second for continuously repainting the whole page. You can reduce fps by removing costly styles. e.g. fliters / large drop shadows - sometimes a combinations of styles is costly.

    It's fun to play with and give a lot of insight into the source of performance problems.

    Safari has similar tools, Opera is basically the same as Chrome for now, Firefox and IE have no tools like this.. yet.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks Mark, I'll have to find some spare time and study that a bit more in depth

  5. #5
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for useful information


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •