Plantage editeur markdown sur Android about lairdubois HOT 16 CLOSED

Wep, j'avais pas pu passé à la nouvelle version et pas l'énergie d'écrire mon propre éditeur :).
Et en plus le bootstrap-markdown de LADB est une version modifiée pour pouvoir y ajouter les boutons que je voulais.

from lairdubois.

Après, je suis pas bloqué à utiliser cette lib. Faut juste soit le réécrire, soit trouver une lib qui ait les mêmes fonctions de préécrire le markdown.

from lairdubois.

Il faudrait d'abord isoler le problème. Cela peut être autre chose, notamment les scripts autosize
jquery-textcomplete que tu cite.

from lairdubois.

Voici le résultat de mes premiers test :

• J'ai désactivé markdown et laissé ladbTextcompletify : c'est ok
• J'ai installé sur une page de test uniquement l'éditeur markown seul avec la même version que ldb : c'est ok.

Je continuerai plus tard les investigations.

from lairdubois.

Arg, ça va pas nous aider à isoler si les deux marchent l'un sans l'autre...

from lairdubois.

Un indice qui peut-être en est pas un. Mais j'ai le sentiment d'avoir commencé à entendre parlé de ralentissements quand j'ai mis en place le LazyLoad sur les images. Un autre JS qui écoute le scroll.

Comment fais-tu tes tests ?

from lairdubois.

En effet je confirme qu'en enlevant le lazyload, c'est ok.
L’événement "scroll" ralentie la page et le "touchmove" la fait presque planter.
Pas de problème avec les autres événements.

C'est ici :

J'ai installé lazy sur ma page de test avec l'éditeur Markdown, mais je n'arrive pas à reproduire le bug : http://www.b1nj.fr/airdubois/

Je continue demain.

Pour tester j'ai juste copié le code source de la page.
Je tenterai d'installer le site quand j'aurai un peu plus de temps.

from lairdubois.

Merci pour ces tests !
Dans mon souvenir, j'avais ajouté toutes ces écoutes sur les evt, parce que sinon sur mobile, ça ne chargeait pas les lazy dans les divers cas.
La question va être de savoir comment apporter une solution.

• Une autre lib de lazyload qui repose sur des evt plus "modernes" (yall.js) ?
• Ne pas écouter les evt sur mobile et donc pas de lazyload ? (c'est dommage, parce que ça décharge bien le serveur)
• ...

from lairdubois.

Hello, pour référence et si ça aide, j'ai constaté de très fort ralentissement dans la rédaction d'un commentaire, sur un laptop récent tournant Ubuntu 20.04 et Firefox 77.0.1.

Je n'ai pas du tout investigué encore (je me suis inscrit aujourd'hui :) ), mais je suis tombé par hasard sur cette issue donc je le note ici si ça peut aider. Je peux jeter un coup d'oeil plus avancé mais je n'ai jamais fait de dev web de ma vie.

Edit : précision : après un refresh de la page, le problème avait disparu, c'est pour ça que j'avais laissé tombé.

from lairdubois.

Une analyse un peu plus poussée. J'ai l'impression que la saisie ne rame pas tout de suite, mais comment à ramer soit avec le temps, soit avec la longueur du commentaire (j'ai testé avec un commentaire sur cette page : https://www.lairdubois.fr/ateliers/328-construction-atelier-ossature-bois.html).

L'analyseur de performance de Firefox est clair : dès que j'écris dans la zone de commentaire, le frame rate s'effondre (60fps tant que je ne fais rien, 3fps quand je tape au clavier). C'est la zone rouge dans la capture attachée. En se focalisant uniquement sur cette période, on voit qu'on passe quasiment tout notre temps dans la manipulation du DOM, appelé par la fonction z du script 27c36d2.js à la ligne 1636 (merci l'obfuscation).

27c36d2.js est en fait jQuery UI, et la ligne 1636 appartient à Zepto Lazy. Ça confirmerait donc que même sur PC (Ubuntu + FF), lazy() soit le coupable.

from lairdubois.

Arg, merci pour les investigation @Plonk42. Il va falloir trouver à remplacer cette lib ou la désactiver à l'édition dun champ de texte alors ...

from lairdubois.

Je penses avoir compris. Le problème se trouve bien ici :

Avec ce code, tu créé une nouvelle instance de Lazy à chaque événements. Il faut mieux utiliser la metode update() de Lazy.

Aussi, quand on utilise un événement de type scroll, il faut mettre un timmer pour éviter les problèmes d'appel trop fréquent. La librairie lazy, le fait par exemple ici :

https://github.com/eisbehr-/jquery.lazy/blob/dfd9bbd33bb040d5592f9989f7ee4656aa238184/jquery.lazy.js#L607

Si tu as vraiment besoin des événements supplémentaires (load orientationchange touchmove focus) que la librairie ne propose pas de base, tu peux peut être les rajouter directement dans le fichier lazy ici ?

https://github.com/eisbehr-/jquery.lazy/blob/dfd9bbd33bb040d5592f9989f7ee4656aa238184/jquery.lazy.js#L255

Ou sinon ce genre de truc :

var scrollTimer = null;

$lazy = $('[data-src]').Lazy({
    effect: "show",
    effectTime: 0,
    threshold: 0,
    chainable: false
});

function lazyLoad() {
    if (scrollTimer) {
        clearTimeout(scrollTimer);   // clear any previous pending timer
    }
    scrollTimer = setTimeout(function() { 
        $lazy.update();
    }, 100);   // set new timer
}

$(window).on('load orientationchange  touchmove focus', lazyLoad); 

from lairdubois.

Salut @b1nj, j'ai fais une petite mise à jour en tenant compte de tes retours. Merci !

Si tu as vraiment besoin des événements supplémentaires (load orientationchange touchmove focus) que la librairie ne propose pas de base, tu peux peut être les rajouter directement dans le fichier lazy ici ?

Tu veux dire que la lib de base bind déjà le scroll ?

from lairdubois.

Super !

Oui, scroll et resize.

from lairdubois.

Ok, ben je sais plus dire pourquoi j'avais ajouté le bind de l'evt scroll alors ...

from lairdubois.

Et pour les autres événements (load orientationchange touchmove focus) tu avais eu des problèmes, c'est bien cela ?

from lairdubois.