Advanced performance tooling in Chrome DevTools - Paul Irish @ Velocity 2014

Sdílet
Vložit

Komentáře • 18

  • @amaxwell01
    @amaxwell01 Před 10 lety +1

    Great video! I love the new Dev tools. Can't wait for them to hit stable.

  • @sharpbroth
    @sharpbroth Před 10 lety

    devTools is so good at performance tracing. i love it

  • @HussienLiban
    @HussienLiban Před 10 lety

    Great stuff

  • @user-qw2ii5lm4k
    @user-qw2ii5lm4k Před 10 lety

    太赞了!

  • @los77lobos
    @los77lobos Před 3 lety

    A 2014 video should not be among first Google answers when googling "chrome performance tab advanced" come on guys it's 2020

  • @rishulmatta16
    @rishulmatta16 Před 7 lety

    So changing transform and top made the browser repaint the whole view , but manipulating only the transform caused the performance improvement?

  • @kareljanvh
    @kareljanvh Před 10 lety

    Do you have the optimized version of the boxers somewhere online?

    • @PaulIrish
      @PaulIrish  Před 10 lety +1

      temp.paulirish.com/tomato-can-blues.html

  • @BrentLabasan
    @BrentLabasan Před 7 lety

    5:15 "The old frames UX was removed. Now there is a single view provided for the Timeline." github.com/google/WebFundamentals/issues/2390

  • @kareljanvh
    @kareljanvh Před 10 lety

    Paul
    You said you altered the parallax to use translate. I've tried things like velocity.js and used translateY to swipe up a panel. But it still paints like hell. How can I move a screen up without the paint?

    • @binksyx87
      @binksyx87 Před 10 lety

      try translate3d(0,Y,0.1) - adding a tiny value on the Z axis will force it onto a composite layer.

    • @PaulIrish
      @PaulIrish  Před 10 lety +2

      It depends on the browser. Some will automatically promote into a layer to avoid repaints. I'd recommend a layer promotion hint: `translateZ(0)` along with `will-change: transform`

  • @KrisVanHerzeele
    @KrisVanHerzeele Před 10 lety

    any idea when these will be available in Canary?

    • @binksyx87
      @binksyx87 Před 10 lety

      visit chrome://flags in canary and enable the Developer Tools Experiments. You should have a shiny new 'experimental' tab in the settings

  • @nmanikiran
    @nmanikiran Před 10 lety

    do not allow javascript debugging for end users, how to achieve this
    Thanks.........

    • @lilkwarrior5561
      @lilkwarrior5561 Před 10 lety +2

      Not allowing people to debug your code is a bad practice, it's no good for your end users & you.
      .freeze(),. .seal(), and so on exist to prevent very harmful changes to JavaScript objects you create with very sensitive behavior that ought not to be changed to provide the core experience you've promised to your end users.
      If you block the ability to debug your JS from end users, you'll get less useful information from them when they do find bugs with your application & they'll be less likely to forgive you when that happens.
      Blocking access to JavaScript debugging also goes against the open principles of the web we're all beneficiaries of towards learning how to achieve similar results as the websites we've looked up to towards being web developers.
      Having faith in the internet mostly being aware of this, you'll get unnecessary press, criticisms, and potentially merciless retaliation from hackers over your attempts to prevent debugging of Javascript by end users.
      As a result, it's not worth it to prevent end users from debugging your code. The costs far outweigh the benefits.

    • @nmanikiran
      @nmanikiran Před 10 lety

      Thanks. ..
      I do agree with you
      I just want to know how to do that
      I saw i some web sites a random number is added at the end of the js file in that it is not allowing to put break points
      So....