{"id":228,"date":"2019-07-22T15:18:23","date_gmt":"2019-07-22T15:18:23","guid":{"rendered":"http:\/\/joanalbamaldonado.com\/blog\/?p=228"},"modified":"2019-07-22T15:24:41","modified_gmt":"2019-07-22T15:24:41","slug":"window-requestanimationframe-with-high-resolution-timing-very-precise-and-window-performance-now-polyfills","status":"publish","type":"post","link":"https:\/\/joanalbamaldonado.com\/blog\/2019\/07\/22\/window-requestanimationframe-with-high-resolution-timing-very-precise-and-window-performance-now-polyfills\/","title":{"rendered":"window.requestAnimationFrame (with high resolution timing, very precise) and window.performance.now polyfills"},"content":{"rendered":"\n<p>Two Vanilla JavaScript polyfills:<\/p>\n\n\n\n<p>I have just adapted the <a rel=\"noreferrer noopener\" aria-label=\"requestAnimationFrame polyfill made by Paul Irish (opens in a new tab)\" href=\"https:\/\/gist.github.com\/paulirish\/1579671\" target=\"_blank\">window.requestAnimationFrame polyfill made by Paul Irish<\/a> to work with high resolution timing automatically (when possible) and improved the performance a  little bit. Here it is: <a rel=\"noreferrer noopener\" aria-label=\"https:\/\/gist.github.com\/jalbam\/5fe05443270fa6d8136238ec72accbc0 (opens in a new tab)\" href=\"https:\/\/gist.github.com\/jalbam\/5fe05443270fa6d8136238ec72accbc0\" target=\"_blank\">https:\/\/gist.github.com\/jalbam\/5fe05443270fa6d8136238ec72accbc0<\/a><\/p>\n\n\n\n<p>I have also mixed the <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/gist.github.com\/paulirish\/5438650\" target=\"_blank\">window.performance.now polyfill made by Paul Irish<\/a> with <a href=\"http:\/\/\ufeffgist.github.com\/Aldlevine\/3f716f447322edbb3671\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Aaron Levine&#8217;s<\/a> and modified some of the code to improve it. Here it is: <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/gist.github.com\/jalbam\/cc805ac3cfe14004ecdf323159ecf40e\" target=\"_blank\">https:\/\/gist.github.com\/jalbam\/cc805ac3cfe14004ecdf323159ecf40e<\/a><\/p>\n\n\n\n<p>Both polyfills can be used either separately or together and they will automatically detect whether the web client needs them or not. Just load them in your code (using your favourite way) and, if the client needs them, the polyfills will deploy and be used.<\/p>\n\n\n\n<p>If you want to use them together, remember to load first the code of the <a rel=\"noreferrer noopener\" aria-label=\"&quot;window.performance.now&quot; polyfill (opens in a new tab)\" href=\"https:\/\/gist.github.com\/jalbam\/cc805ac3cfe14004ecdf323159ecf40e\" target=\"_blank\">window.performance.now polyfill<\/a> since the <a rel=\"noreferrer noopener\" aria-label=\"&quot;window.requestAnimationFrame&quot; polyfill (opens in a new tab)\" href=\"https:\/\/gist.github.com\/jalbam\/5fe05443270fa6d8136238ec72accbc0\" target=\"_blank\">window.requestAnimationFrame polyfill<\/a> could need it.<\/p>\n\n\n\n<p>Any comments are welcome!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Two Vanilla JavaScript polyfills: I have just adapted the window.requestAnimationFrame polyfill made by Paul Irish to work with high resolution timing automatically (when possible) and improved the performance a little bit. Here it is: https:\/\/gist.github.com\/jalbam\/5fe05443270fa6d8136238ec72accbc0 I have also mixed the window.performance.now polyfill made by Paul Irish with Aaron Levine&#8217;s and modified some of the code &hellip; <a href=\"https:\/\/joanalbamaldonado.com\/blog\/2019\/07\/22\/window-requestanimationframe-with-high-resolution-timing-very-precise-and-window-performance-now-polyfills\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;window.requestAnimationFrame (with high resolution timing, very precise) and window.performance.now polyfills&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[51,50,97,145,146,9,147,148],"tags":[56,59,138,102,152,151,24,150,149],"class_list":["post-228","post","type-post","status-publish","format-standard","hentry","category-development","category-javascript","category-library","category-others","category-polyfill","category-programming","category-shim","category-shiv","tag-development","tag-javascript","tag-js","tag-library","tag-others","tag-polyfill","tag-programming","tag-shim","tag-shiv"],"_links":{"self":[{"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/posts\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":6,"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/posts\/228\/revisions"}],"predecessor-version":[{"id":234,"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/posts\/228\/revisions\/234"}],"wp:attachment":[{"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/media?parent=228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/categories?post=228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/joanalbamaldonado.com\/blog\/wp-json\/wp\/v2\/tags?post=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}