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?
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`
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.
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....
Great video! I love the new Dev tools. Can't wait for them to hit stable.
devTools is so good at performance tracing. i love it
Great stuff
太赞了！
So changing transform and top made the browser repaint the whole view , but manipulating only the transform caused the performance improvement?
translate and transform :)
Do you have the optimized version of the boxers somewhere online?
temp.paulirish.com/tomato-can-blues.html
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?
try translate3d(0,Y,0.1) - adding a tiny value on the Z axis will force it onto a composite layer.
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`
any idea when these will be available in Canary?
visit chrome://flags in canary and enable the Developer Tools Experiments. You should have a shiny new 'experimental' tab in the settings
do not allow javascript debugging for end users, how to achieve this
Thanks.........
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.
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....
5:15 "The old frames UX was removed. Now there is a single view provided for the Timeline." github.com/google/WebFundamentals/issues/2390
A 2014 video should not be among first Google answers when googling "chrome performance tab advanced" come on guys it's 2020