{"id":10032,"date":"2019-04-26T16:41:38","date_gmt":"2019-04-26T14:41:38","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=10032"},"modified":"2019-04-28T13:06:27","modified_gmt":"2019-04-28T11:06:27","slug":"video-web-performance-mini-series-animations","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/video-web-performance-mini-series-animations\/","title":{"rendered":"Video: Web Performance Mini Series: Animations (Paul Lewis)"},"content":{"rendered":"\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Web Performance Mini Series: Animations\" width=\"648\" height=\"365\" src=\"https:\/\/www.youtube.com\/embed\/ohc8ejzSn48?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>By Paul Lewis. See also his article on HTML 5 Rocks:<br><a rel=\"noreferrer noopener\" aria-label=\"https:\/\/www.html5rocks.com\/en\/tutorials\/speed\/high-performance-animations\/ (opens in a new tab)\" href=\"https:\/\/www.html5rocks.com\/en\/tutorials\/speed\/high-performance-animations\/\" target=\"_blank\">https:\/\/www.html5rocks.com\/en\/tutorials\/speed\/high-performance-animations\/<\/a><\/p>\n\n\n\n<p>Even more links:<\/p>\n\n\n\n<ol><li><a href=\"https:\/\/eu.udacity.com\/course\/browser-rendering-optimization--ud860\">https:\/\/eu.udacity.com\/course\/browser-rendering-optimization&#8211;ud860<\/a><\/li><li><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/\">https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/<\/a><\/li><li><a href=\"https:\/\/aerotwist.com\/blog\/flip-your-animations\/\">https:\/\/aerotwist.com\/blog\/flip-your-animations\/<\/a><\/li><li><a href=\"https:\/\/developers.google.com\/web\/updates\/2017\/03\/performant-expand-and-collapse\">https:\/\/developers.google.com\/web\/updates\/2017\/03\/performant-expand-and-collapse<\/a><\/li><li><a href=\"https:\/\/aerotwist.com\/blog\/the-anatomy-of-a-frame\/\">https:\/\/aerotwist.com\/blog\/the-anatomy-of-a-frame\/<\/a><\/li><\/ol>\n\n\n\n<p>Takeaway of this video:<\/p>\n\n\n\n<p><strong>The magic goal: 16ms<\/strong><\/p>\n\n\n\n<p>For 60HZ monitors aim for 16ms delay or less. (60fps = ~16ms per frame).<br>Delays above that will make the animation look janky <br>Note: for the 120HZ monitors that are getting more common these days the magic number would of course be 8 ms. <\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>A bit of &#8216;theory&#8217;:<\/strong><\/p>\n\n\n\n<p>What goes into making a frame:<br>&#8211; JS<br>&#8211; Styles<br>&#8211; Layout<br>&#8211; Paint<br>&#8211; Composite<\/p>\n\n\n\n<p><em>Layout<\/em> and <em>Paint<\/em> are typically the most expensive operations here but also the &#8216;easiest&#8217; to take out of the flow<\/p>\n\n\n\n<p><strong>Layout <\/strong>is triggered by a lot of css properties. See <a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1Hvi0nu2wG3oQ51XRHtMv-A_ZlidnwUYwgQsPQUg1R2s\/pub?single=true&amp;gid=0&amp;output=html\">this<\/a> overview for all of them, but to name a few:<\/p>\n\n\n\n<ul><li>width\/height<\/li><li>padding\/margin<\/li><li>position (top\/bottom\/left\/right)<\/li><li>border\/border-color\/border-width<\/li><li>display<\/li><li>float\/ clear<\/li><li>overflow<\/li><li>font-size\/font-weight\/font-family\/line-height<\/li><li>text-align\/vertical-align<\/li><\/ul>\n\n\n\n<p>The most common css properties to trigger <strong>Paint<\/strong> are:<\/p>\n\n\n\n<ul><li>color<\/li><li>visibility<\/li><li>text-decoration<\/li><li>border-radius\/ border-style<\/li><li>box-shadow<\/li><li>background\/ background-image\/ background-repeat\/ background-position<\/li><li>outline\/outline-color\/outline-style\/outline-width<\/li><\/ul>\n\n\n\n<p><strong>Layers <\/strong><br><br>If you have two elements <strong>A<\/strong> and <strong>B<\/strong> on the page, and you want to move element <strong>B<\/strong>, you will have to scrub out <strong>B<\/strong> and paint it again on its new position.<\/p>\n\n\n\n<div style=\"display: flex; justify-content: space-around; border: 1px solid #333; padding: 30px\">\n<div style=\"border: 1px solid black; width: 100px; height: 100px; text-align: center\">\n<span style=\"font-size: 2rem; line-height: 100px;\">A<\/span>\n<\/div>\n<div style=\"border: 1px solid black; width: 100px; height: 100px; text-align: center\">\n<span style=\"font-size: 2rem; line-height: 100px;\">B<\/span>\n<\/div><\/div>\n\n\n\n<p>However, if A and B are on different <em>layers<\/em>, you only have to move around the layer of element B<\/p>\n\n\n\n<div style=\"display: flex; justify-content: space-around\">\n\n<div style=\"display: flex; justify-content: space-around; border: 1px solid #333; padding: 20px; width: 40%\">\n<div style=\"border: 1px solid black; width: 100px; height: 100px; text-align: center\">\n<span style=\"font-size: 2rem; line-height: 100px;\">A<\/span>\n<\/div>\n<\/div>\n<div style=\"display: flex; justify-content: space-around; border: 1px solid #333; padding: 20px; width: 40%\">\n\n<div style=\"border: 1px solid black; width: 100px; height: 100px; text-align: center\">\n<span style=\"font-size: 2rem; line-height: 100px;\">B<\/span>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Now there are some things a browser can animate cheaply (because GPU&#8217;s are optimized for this type of stuff):<\/p>\n\n\n\n<ol><li>Transformations: Translate, Scale, Rotate, Skew, Matrix transformations<\/li><li>Opacity<\/li><\/ol>\n\n\n\n<p><strong>Create a new Layer&nbsp;and&nbsp;transform&nbsp;it<\/strong><\/p>\n\n\n\n<p>Use this CSS to create a new layer:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#box {\n  will-change: transform\n}\n<\/code><\/pre>\n\n\n\n<p>Warning: too many layers will cause your composite layer to grow, so you will have to find a balance there.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>By Paul Lewis. See also his article on HTML 5 Rocks:https:\/\/www.html5rocks.com\/en\/tutorials\/speed\/high-performance-animations\/ Even more links: https:\/\/eu.udacity.com\/course\/browser-rendering-optimization&#8211;ud860 https:\/\/developers.google.com\/web\/fundamentals\/performance\/rendering\/ https:\/\/aerotwist.com\/blog\/flip-your-animations\/ https:\/\/developers.google.com\/web\/updates\/2017\/03\/performant-expand-and-collapse https:\/\/aerotwist.com\/blog\/the-anatomy-of-a-frame\/ Takeaway of this video: The magic goal: 16ms For 60HZ monitors aim for 16ms delay or less. (60fps = ~16ms per frame).Delays above that will make the animation look janky Note: for the 120HZ monitors that [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[132,237,265],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/10032"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=10032"}],"version-history":[{"count":5,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/10032\/revisions"}],"predecessor-version":[{"id":10043,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/10032\/revisions\/10043"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=10032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=10032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=10032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}