window.requestAnimationFrame()<\/code><\/a> qui peut aussi \u00eatre d’une bonne aide.<\/p>\nLe code utilis\u00e9 la plupart du temps<\/h2>\n
Souvent, et de mani\u00e8re assez simple, nous impl\u00e9mentons un \u00e9couteur de la sorte :<\/p>\n
window.addEventListener('resize', function(){\r\n console.log('resizing');\r\n});<\/code><\/pre>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/08\/resize-sucks-js.gif\")
Si vous ajoutez \u00e7a dans les scripts JS de votre projet, et que vous ouvrez la page sur votre navigateur, vous constaterez en ouvrant votre console (F12) et en redimensionnant la fen\u00eatre, que la console s’affole un peu.
\nImaginez qu’\u00e0 la place d’un console.log()<\/code> votre script fasse un contr\u00f4le dans le DOM, change la structure sous certaines conditions (largeur d’\u00e9cran, visibilit\u00e9 d’un \u00e9l\u00e9ment, par exemple), etc. etc., et ce \u00e0 chaque pixel du redimensionnement\u2026<\/p>\nNe vous moquez pas, on est d’accord que le redimensionnement de la fen\u00eatre ainsi fait n’est pas fr\u00e9quent chez l’utilisateur, mais c’\u00e9tait la m\u00e9thode d’un client pour tester si le responsive marchait bien, et il trouvait que \u00e7a ramait un peu sur son Mac. Je ne lui en veux pas, il a probablement lu quelque part que le responsive c’est quand on redimensionne la fen\u00eatre de son navigateur.<\/p>\n
Bref, on peut optimiser la fr\u00e9quence d’ex\u00e9cution de tout ce code au redimensionnement, voyons cela.<\/p>\n
\u00ab\u00a0C’est le m\u00eame, mais en diff\u00e9rent\u00a0\u00bb<\/h2>\n
Le principe est de cr\u00e9er un timeout<\/code> qu’on lance au redimensionnement et qu’on d\u00e9truit au redimensionnement. Oui je sais, c’est bizarre comme logique, mais vous allez comprendre.<\/p>\n\r\nvar the_timer;\r\n\u00a0\r\nwindow.addEventListener('resize', function(){\r\n clearTimeout(the_timer);\r\n the_timer = setTimeout(function(){\r\n console.log('resized');\r\n }, 75);\r\n});<\/code><\/pre>\nPour vous donner une courte explication, il suffit de lire le code de mani\u00e8re lin\u00e9aire : au moment du redimensionnement, nous supprimons le timeout<\/code> (cela arr\u00eate l’ex\u00e9cution de la fonction en param\u00e8tre), puis nous lan\u00e7ons le timeout<\/code>. Celui-ci poss\u00e8de un d\u00e9lai d’ex\u00e9cution de 75 millisecondes. Donc, si entre le premier d\u00e9clenchement de \u00ab\u00a0resize\u00a0\u00bb et le second, moins de 75 ms se sont \u00e9coul\u00e9es, le timeout<\/code> est r\u00e9initialis\u00e9 avant m\u00eame l’ex\u00e9cution de la fonction en premier param\u00e8tre. Vous m’avez suivi\u00a0?
\nCe qui fait que cela fonctionne, c’est la variable (globale) the_timer<\/code> d\u00e9clar\u00e9e avant l’\u00e9couteur.<\/p>\n![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2014\/08\/resize-js-ok.gif\")
Et voil\u00e0, c’est un peu mieux quand m\u00eame. La fr\u00e9quence, ou \u00ab\u00a0sensibilit\u00e9\u00a0\u00bb se r\u00e8gle au nombre de millisecondes (ici 75<\/code>) renseign\u00e9 pour le timeout<\/code>. Au plus vous augmentez ce chiffre, au moins le contenu de votre fonction sera ex\u00e9cut\u00e9 rapidement.<\/p>\nCette m\u00e9thode n’est pas forc\u00e9ment adapt\u00e9e \u00e0 tous les cas pour tous les projets, notamment dans le cadre de l’\u00e9v\u00e8nement \u00ab\u00a0onscroll\u00a0\u00bb, mesurez donc bien l’impact de cette impl\u00e9mentation \ud83d\ude42<\/p>\n
J’esp\u00e8re que cette astuce vous sera utile.<\/p>\n","protected":false},"excerpt":{"rendered":"
Si vous pratiquez couramment le JS, vous avez certainement remarqu\u00e9 que certains \u00e9v\u00e8nements sont d\u00e9clench\u00e9s de mani\u00e8re assez ponctuelle, et d’autres peuvent \u00eatre d\u00e9clench\u00e9s de mani\u00e8re tr\u00e8s fr\u00e9quente et devenir assez difficile \u00e0 g\u00e9rer, c’est le cas de \u00ab\u00a0onscroll\u00a0\u00bb et \u00ab\u00a0onresize\u00a0\u00bb par exemple.<\/p>\n","protected":false},"author":4,"featured_media":4178,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[610,9],"tags":[596,229,403],"coauthors":[597],"class_list":["post-4170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-tutoriels","tag-js","tag-performance","tag-responsive"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=4170"}],"version-history":[{"count":2,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4170\/revisions"}],"predecessor-version":[{"id":6721,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4170\/revisions\/6721"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/4178"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=4170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=4170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=4170"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=4170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}