Je maintiens toujours mon propre lecteur RSS. C’est cool et ça me permet de faire face à des problèmes parfois incongrus pour des petits projets.

Déjà, faut savoir que ma connexion est pourrie (<2 Mo/s) et que je ne souhaite pas encombrer mon serveur de requêtes trop lourdes. Pour le moment, mon lecteur RSS tourne donc en local.
Si je met ça en ligne, ça me prendrait beaucoup de temps pour ne serait-ce qu’ouvrir le lecteur RSS.

Certains lecteurs RSS font une requête à chaque ouverture d’un post ou d’un site. C’est impensable pour moi : je ne veux pas attendre 3 secondes à chaque clics.

Depuis le début, l’ensemble des flux RSS "non lus" sont envoyés au navigateur. Généralement, ça fait entre 2 et 3 Mo, mais comme c’est en local, c’est instantané.

Je cherche à améliorer ça.

Je suis aussi sur le point de transformer mon lecteur RSS en PWA (application mobile en HTML/JS/CSS). Pour ça, je dois scinder l’interface de l’application des données. Vu que je bosse intégralement en JSON, c’est très simple.

Concernant la vitesse, en quelques lignes de JS j’ai ma page qui s’affiche et une fois chargée, fait une requête vers le serveur avec les données. C’est pas plus lent qu’avant (mais je fais un pas de plus vers la PWA).

Là où je m’interroge, c’est comment accélérer ça encore plus ?

Sur les 3 Mo transférés, la plus grande partie provient du contenu des articles, le reste étant plutôt des méta-données : date, ID, nom du flux et le titre de l’article.

J’essaye donc :
– à l’affichage de la page, l’interface s’affiche.
– Pendant ce temps, une première requête qui récupère titre + métadonnées et qui suffisent pour afficher les flux dans une liste.
– une seconde requête est ensuite faite qui récupère le contenu des articles et les attache à la liste principale.

La première requête suffit pour afficher la liste des flux : l’utilisateur peut commencer à lire les titres et à trier visuellement les articles qu’il souhaite lire (du moins, perso je fonctionne comme ça).
Pendant qu’il repère les articles qu’il va lire, la page récupère le contenu des articles (2,5 Mo).

Dans l’ensemble, ça prend peut-être quelques ms de plus pour charger, mais beaucoup moins de temps pour s’afficher : l’interface s’affiche instantanément, par exemple. C’est une question de perception de rapidité.

PS :
Quand je combine le résultat des deux requêtes, je fais deux boucles imbriquées, pour vérifier l’égalité tableau1[i].id === tableau2[j].id.
C’est un super-exemple d’utilisation du « break » dont je parle dans cet article. Une fois qu’il y a une égalité, on sort de la boucle et on passe à l’élément suivant.

Résultat : j’ai 471 éléments RSS à parser, donc 471×471 = 221 841 tours de boucles à faire. Avec le break, je prédisais qu’on gagne environ 50 % de la charge. Ça se vérifie sur cet exemple : le nombre de tours de boucle est de 111 214. Le gain est de 49,86 %. On y est.

En fait, je même beaucoup mieux : comme les deux requêtes renvoie deux tableaux de la même base de donnée rapidement à la suite, il est fort probable que les deux tableaux (triés en SQL) comportent la même indexation (sauf si une mise à jour des données RSS s’est glissée pile entre les deux requêtes).

On peut donc faire ça :

// si les ID sont identique, on ne reboucle pas (les deux tableaux comparent à la position « i »)
if (tableau1[i].id === tableau2[i].id) {
	# code here
}
// autrement, on recherche dans tout le tableau (tableau 1 sur « i », et le tableau2 sur « j »)
else {
	for (var j=0, len2 = _this.feedList.length ; j<len2 ; j++) {
		if (newFeeds[i].id === _this.feedList[j].id) {
			# code here
			break;
		}
	}
}

Dans le cas idéal, on passe à 471 tours de boucle (pour 471 éléments)
… au lieu de 111 214…
… au lieu de 221 841.

C’est bien non ?

— (permalink)