#18189

How browser rendering works — behind the scenes – LogRocket

Un article qui explique succintement comment fonctionne un moteur de rendu d’un navigateur, en particulier comment il traite le JS, l’arbre DOM (le HTML) et le CSSOM (le CSS).

La connaissance de ceci permet de savoir où placer les différents éléments.

Par exemple : le HTML commence à charger, mais le JS est bloquant : dès qu’il y a du JS dans la page (inline, ou non), alors le parsage du HTML se pause : ceci, car le JS peut modifier le HTML. Il est donc inutile de parser un truc qui peut être changé par la suite.

Or, le JS peut également toucher au CSS. Pour ça, le CSSOM doit être prêt. Donc le CSS doit être parsé pour que le JS puisse être éxécuté, et le JS doit être exécuté si on peut que le HTML soit parsé.

Dit autrement, le navigateur doit avoir fini de charger dans cet ordre :
– le CSS
– le JS (se finit après le JS)
– le HTML (terminé à la fin, quand la dernière balise se ferme)

Aussi, si on veut que la page s’affiche vite pour que le lecteur le lise rapidement, il faut donc que le CSS soit fini le plus tôt possible pour que l’information (portée par le HTML) soit affichée correctement.
Enfin, vu que le JS est bloquant, l’information utile de la page doit être affichée avant l’exécution des scripts.

Du coup, on voit bien que le CSS doit être placé au début du document et le JS à la fin : https://lehollandaisvolant.net/?d=2015/08/27/18/46/54-pourquoi-mettre-le-javascript-a-la-fin-et-le-css-au-debut

https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10

#18188

html5 - Resize image with javascript canvas (smoothly) - Stack Overflow

Mh…

Donc quand on redimensionne une image en JS avec canvas, en particulier pour la réduction d’une image, la qualité n’est pas géniale : ça utilise une interpolation linéaire.

Pour avoir quelque chose de plus « doux », les logiciels de dessin utilisent une interpolation cubique, ou bi-cubique.

On peut approcher ce résultat avec canvas, mais pour ça il faut redimensionner l’image en 2 étapes : on redimensionne une première fois de 50 %, puis de nouveau de 50 %.
On utilise deux canvas successifs, avec l’image produite par la première utilisée en entrée par la seconde.

Une alternative est d’utiliser ça (en JS) :


ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = "high"

Mais ça n’est supporté que par Chrome pour le moment.

https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly

#18134

Awesome RSS | Chris Zuber

Le blog de l’auteur de Awesome RSS.
Sous Firefox, faites un clic droit sur la page : le sommaire se retrouve dans le menu contextuel !!

WHAT SORCERY IS THAT ?? :o

ÉDIT : C’est l’élément « menu » https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu
Qui semble être le seul élément qui est à la fois déprécié et dans la recommandation HTML 5.1/5.2… Ça marche dans Firefox et dans Edge (en partie).

Je sais déjà où je vais mettre ça ;)

https://shgysk8zer0.github.io/posts/2018/03/02/awesome-rss/

#18119

Efficiently loading inlined JSON data – Work Friends

Whoa… encore une astuce pour rendre le JS plus rapide : si vous avez de gros bloc de données JSON à mettre dans une balise <script>, ajoutez le « type="application/json" » : le navigateur n’essayera pas de le parser comme du JS et on gagne beaucoup de temps (~50 % sur de gros blocs).

Dans mon lecteur RSS, par exemple, les données sont envoyées en JSON au navigateur et la page est construite en JS. Je vais ajouter ça pour gagner quelques un bon paquet de cycles CPU.

Je pense que je vais créer un document "checklist" des bonnes pratiques HTML/JS/PHP/etc., « bonnes » du point de vu de la vitesse.

https://quipblog.com/efficiently-loading-inlined-json-data-911960b0ac0a

#18111

Why doesn't JavaScript have a native Date() formatting method? : javascript

J’avoue : autant certaines lib de JS sont sympa, autant celle de Date() est merdique.

Celle de PHP permet de placer et déplacer les éléments (H, Y, m, i…) dans une chaîne. JS ? Non.
En plus de ça, y a des trucs débiles :
– les heures vont de 0 à 60. Ok.
– les minutes et les secondes aussi : de 0 à 60.
– les jours de 1 à 31.
– les mois vont de 0 à 11.

Wait… what ?

Je veux bien qu’on indexe les éléments en commençant à 0, d’habitude, en prog, mais alors pourquoi les mois oui et les jours non ?

https://www.reddit.com/r/javascript/comments/20zx5n/why_doesnt_javascript_have_a_native_date/

#18086

element.addEventListener | MDN

Tiens, je ne connaissais pas l’option « {once: true} » à mettre sur les eventListeners.

C’est pratique : ça permet d’ajouter un eventListener à usage unique : dès que l’événement est déclenché, il s’exécute puis de désactive et disparaît.

Je l’utilise pour les menus clicables : je déroule un menu au clic. Mais je veux qu’un clic quelque part ailleurs sur la page (en dehors du menu) referme ce menu.

Dans le clic sur le menu, j’ajoute un window.eventListener(click, {}, {once: true}), et je teste si le clic a lieu sur le menu. Si c’est en dehors du menu, je ferme le menu.

Ça évite d’ajouter un événement sur le document qui écoute en permanence pour un click (alors qu’il n’y en a besoin que si un menu est ouvert, en fait).

https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener

#18083

Note [JS]

Ok, donc il est beaucoup plus rapide (environ 40%) de faire un template HTML que l’on clone et remplit, puis qu’on .append au DOM, que de ne pas avoir de template et de le recréer à chaque fois (node par node, avec .createNode()).

https://lehollandaisvolant.net/?mode=links&id=20181218133030

#17966

dataset vs getAttribute · jsPerf

Ok, donc "dataset" est environ 450 fois plus lent que getAttribute.
Pourquoi les nav n’utilisent pas un alias de l’un sur l’autre ?

J’imagine que dataset utilise quelques tests en plus (typage, etc), mais quand-même…

C’est pas la première fois que le JS a un fonctionnement surprenant. Par exemple, même pour un nœud dom bien rempli, il est beaucoup plus rapide de parcourir les nœud et les supprimer un par un que de faire un .innerHTML = "".

https://jsperf.com/dataset-vs-getattribute-and-setattribute/13

#17934

SortTable.js

Un petit code pour trier des tableaux HTML.

Ça n’est pas universel et il faut que le tableau possède un <thead> mais ça marche pas mal : ça trie de façon numérique pour les colonnes numériques et de façon naturelle (alphabétique) le reste du temps.

Le JS fait moins de 50 lignes (non minifié et légèrement commenté).

Pour l’utiliser :
– utilisez le JS
– prenez aussi le CSS (pour les petites flèches)
– mettez un "id="sortMe" sur votre tableau (le code est à adapter pour mettre plusieurs tables dans une page)
– ajoutez "data-do-sort="1"" sur les <th> des colonnes que vous voulez rendre triables

Et c’est bon.

Ça marche sur Firefox, Chrome/Vivaldi. Pas essayé le reste.

https://lehollandaisvolant.net/tout/examples/table-sort/

#17912

Use lazysizes to lazyload images  |  web.dev - Le Hollandais Volant

Si vous voulez d’autres codes JS ultra-simples, checkez mon codepen :

Un générateur de sommaire (1 ko)
https://codepen.io/lehollandaisvolant/pen/BWpKRG

Un slider d’images (470 octets)
https://codepen.io/lehollandaisvolant/pen/PQEKWP

Un code pour détecter le sens du scroll et l’afficher (475 octets) :
https://codepen.io/lehollandaisvolant/pen/ryrrGx

Le reste c’est du CSS, dans la même veine (super léger).

https://lehollandaisvolant.net/?mode=links&id=20181113162019

#17911

Use lazysizes to lazyload images  |  web.dev

Un script de 6.62 ko minifié pour faire du lazyload sur des images.
Et Google recommande ça.

Are you fucking kidding me ? AYFKM ?

Vous pariez que je peux le faire en moins de 1 ko non-minifié ?

ÉDIT :
@Google
@Microsoft
@Vivaldi
@Opera
@Mozilla : À quand un attribut « lazyload="" » automatiquement implémenté dans les navigateurs ? Ou au moins dans vos paramètres de navigateur ?

(~Je reviens~)

ÉDIT :
Voilà.

531 octets.
CINQ CENT TRENTE-ET-UN OCTETS.

Chez moi :
https://lehollandaisvolant.net/tout/examples/lazy-lazyload/ pour la version simple (531 o)
https://lehollandaisvolant.net/tout/examples/lazy-lazyload/lazy-lazyload_optim.html pour une version optimisée pour le CPU (803 o)

Et je l’ai aussi mis sur CodePen
https://codepen.io/lehollandaisvolant/pen/RqKYKp

Ça marche sur Firefox, Chrome, Vivaldi, Edge et IE11.

Enjoy.

Maintenant allez bien vous faire foutre avec vos libs à la con de 6.62 ko.

(PS : on me signale que la version "normale" non minifiée du code initial fait 17 ko *facepalm*)

https://web.dev/fast/use-lazysizes-to-lazyload-images

#17789

math-as-code/README.md at master · Jam3/math-as-code · GitHub

Très intéressant : une lib qui transforme du code JS en équations (façon LaTeX).

L'idée est d'enseigner la prog à ceux qui connaissent déjà la notation mathématique.

Par ex la notation Somme(0,50)(x) est équivalent à for(i=0;i<=50;i++) somme+=i.

https://github.com/Jam3/math-as-code/blob/master/README.md

#17722

JavaScript Clone Array

(je_rale_contre_JS pour la 25436e fois)

Comment dupliquer un tableau en JS.

Ça ?

var new_table = old_table

Nope, car si on modifie old_table, alors le new_table s’en trouvera également modifié : ce n’est pas une duplication de la variable mais une référence à l’ancien tableau : c’est comme si les mêmes données sont accessibles sous deux noms.

Pour dupliquer un tableau à une seule dimension, il faut faire :

for (var i in table) {
    new_table[i] = table[i];
}

Mais si le tableau est un tableau d’objets, ou même un objet d’objets (donc de plus d’une dimension) ?
Ben la méthode précedente ne marche pas : si table[i] contient un objet, alors cet objet sera rendu accessible dans new_table[i], mais sans y être copié !

Modifier table[i] changera donc également new_table[i].

La seule méthode que j’ai trouvé (dans le lien) qui tienne en une ligne c’est ça :

var clone = JSON.parse( JSON.stringify( myArray ) );

On prend le tableau, on le transforme en une représentation textuelle JSON (à ce stade c’est juste du texte, sans objets, références, indexes…) puis on le retransforme entièrement en tableau. Là il sera dupliqué totalement, même si le tableau fait 15 dimensions.

C’est farfelu, oui.

https://davidwalsh.name/javascript-clone-array

#17719

for...of - JavaScript | MDN

Si je comprends bien, en JS, la différence entre for..in et for..of c’est un comme la différence entre foreach ($table => $element) et foreach ($table as $element) du PHP.

L’un place dans $element la clé, et l’autre la valeur.
En PHP, on peut même faire $table => $key as $value, où l’on obtient la clé et la valeur en même temps.

Sauf qu’en JS, on a aussi le for, forEach, .each(), et bien d’autres trucs…

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of