Ce que les développeurs doivent savoir sur les compétences du didacticiel HTML5 Performance Analysis_html5

Du point de vue des performances, HTML5 réduit d'abord le document HTML pour le rendre plus facile.
Premièrement, en termes de lisibilité pour l'utilisateur, il y avait à l'origine beaucoup de choses que les débutants ne pouvaient pas comprendre lorsqu'ils les voyaient pour la première fois, mais la méthode de déclaration HTML5 est évidemment plus conviviale.
Deuxièmement, la déclaration de l'encodage du document est très simple en utilisant HTML5. Beaucoup de gens demandent ce qu'est HTML5 ? Nous disons que la première façon d'utiliser HTML5 est de changer d'abord le DOCTYPE, car actuellement de nombreuses pages utilisent encore la méthode traditionnelle. La méthode HTML5 elle-même est compatible avec les navigateurs IE, de IE6 à IE10, y compris les navigateurs avancés. Le moyen le plus simple d’adopter HTML5 est donc de modifier le DOCTYPE.

1. Balises plus concises
La chose suivante n'est peut-être pas une chose très courante, mais c'est quelque chose que je recommande, et c'est plus simple à utiliser. . méthode d'étiquetage. Comme son nom l’indique, HTML5 est hérité de HTML4. HTML4 a un mode strict et un mode de transition. HTML5 prend en charge ce mode de transition, c'est-à-dire que vous ne pouvez pas fermer certaines balises. Cependant, je ne recommande pas toutes les balises. Par exemple, si la balise BODY n’est pas fermée, nous ne le recommandons pas. Mais la balise P la plus couramment utilisée est la balise de liste LI. Pourquoi dites-vous cela ? Tout d’abord, d’un point de vue visuel, cette méthode est plus simple. Ensuite, la clé est que pendant le processus de transfert de documents, le contenu sera moindre.
La déclaration d'attribut de balise HTML5 prend en charge trois méthodes : les crochets simples, les crochets doubles et l'absence de crochets. Afin de réduire la taille du document, je choisis la méthode sans guillemets doubles ou la méthode avec guillemets simples. Cependant, veuillez noter que supposer est une déclaration d'un attribut de classe, car l'attribut peut inclure plusieurs classes et doit être mis entre parenthèses lorsqu'il existe plusieurs classes. À cet égard, permettez-moi de vous montrer une pratique de Google. Google lui-même dispose d'une page qui implémente complètement ce qui précède, réduisant la taille du document de 20 % et réduisant la transmission des documents HTML de 20 %. Si vous mettez le tout en pratique, vous pouvez obtenir une réduction comprise entre 5 et 20 %. C'est la première étape, réduire la taille du document HTML.
　2. Optimisation des images
Vient ensuite l'optimisation des images. Les images sont toujours un élément d'amour-haine. Parce que lorsqu’il y a beaucoup d’images, cela ralentira considérablement la vitesse de chargement de la page entière. Concernant les méthodes d'optimisation des images, il y a de nombreuses introductions dans le livre "High Performance Website". En résumé, il y a trois points principaux : l'utilisation des sprites, l'optimisation de la taille des images, et l'utilisation des DATA URI. Je n'entrerai pas dans les détails ici. .
Une autre idée pour l'optimisation des images est : pas d'image. Abandonnez les images et adoptez CSS3. Il était à l'origine nécessaire de définir une image avec un effet de coin arrondi, et maintenant il utilise border-radius en CSS3, il était à l'origine nécessaire de définir une image avec un effet d'ombre, et maintenant il utilise box-shadow en CSS3 ; être une image d'arrière-plan qui nécessitait de définir un dégradé, et elle est maintenant utilisée dans le dégradé CSS3.
　3. Prélecture
Parlons ensuite de la prélecture, de la prélecture, qui est une autre idée d'optimisation. Nos idées d’optimisation actuelles ne sont que quelques-unes. Beaucoup d'entre elles s'inscrivent dans une perspective de réduction, comme la réduction de la taille des documents et la réduction de la taille des images. De nombreuses images sont transformées en image sprite afin de réduire le nombre de requêtes envoyées. La prélecture est une autre façon de penser. Les ressources sont chargées à l'avance lorsque l'utilisateur clique dessus, elles sont déjà chargées, ce qui est nettement plus rapide.
La prélecture comporte deux parties : l'une est la prélecture des ressources et l'autre est la prérésolution DNS.
Il y a plusieurs points à noter concernant le préchargement des ressources :
Le préchargement ne sera effectué que lorsque le navigateur est inactif, mais il n'y a aucune garantie qu'il soit effectué. C'est un point très important. Parce que le navigateur lui-même dispose d'un écouteur global, qui est une interface interne, lorsque le navigateur est inactif, il effectuera les choses que le navigateur devrait faire lorsqu'il est inactif, mais ce rappel d'inactivité peut ne pas être déclenché, il n'y a donc aucune garantie. un préchargement sera effectué.
Chrome ne prend pas en charge le préchargement des ressources HTTPS. Par exemple, si Alipay est une page HTTPS, Chrome ne la préchargera pas.
Bien qu'une page pré-extraite ne soit pas visible une fois qu'elle existe, elle est en fait analysée normalement. Supposons que je pré-récupère la page de connexion. La page de connexion contient de nombreuses ressources, telles que des images, des fichiers CSS et des fichiers JS. Elle sera analysée normalement de haut en bas. Pendant le processus d'analyse, cette page n'apparaît pas, mais elle existe réellement. En HTML5, l'état actuel de la page peut être obtenu via document.visibilityState. Habituellement, la page a deux états, visible et invisible, mais il existe désormais un nouvel état appelé état pré-rendu. Vous pouvez déterminer directement si la page est dans l'état pré-rendu en fonction du fait que document.visibilityState est égal à prerender.
　4.Analyse DNS
Vient ensuite l’analyse du DNS. Parfois, sur notre page de connexion, il est relativement difficile de détecter les endroits sur lesquels les utilisateurs peuvent cliquer. Bien sûr, nous allons parfois creuser pour découvrir que la plupart des prochaines actions de l'utilisateur consistent à aller vers l'intérieur. Mais dans certains cas, nous ne savons pas à quelle page l'utilisateur ira ensuite, mais nous savons vers quel domaine il ira. À ce stade, je peux pré-résoudre le DNS. Parce qu'en fait, il y a un long processus de résolution DNS dans l'ensemble du processus de demande de page. Si nous le faisons à l'avance, nous pouvons permettre aux utilisateurs de voir davantage cette page.
Ce qui suit est un exemple de fond d'écran Q. Le fond d'écran Q est un certain système de Q. Tout d'abord, toute l'architecture de Q est basée sur le client WEB. Ce que nous voyons maintenant est une page WEB. Bien qu'il s'agisse d'un shell client à l'extérieur, son cœur est WEB. Lorsque nous avons terminé l'ensemble du processus pour la première fois, comme il y avait de nombreuses images, toutes les ressources statiques ont été allouées à plus d'une douzaine de serveurs statiques. En d'autres termes, si je veux tirer, je dois résoudre 10 DNS. Ce temps prend beaucoup de temps, au moment le plus lent, cela peut être retardé de quelques secondes, ce que l'on peut ressentir à l'œil nu. Si nous effectuons une pré-résolution DNS, je ne sais pas de quelle ressource il s'agit, et toutes les images sont aléatoires, nous pouvons donc seulement dire que nous devrions travailler dur sur la pré-résolution DNS pour améliorer sa vitesse. Dans ce cas, cela peut prendre 2 secondes, mais cela prendra 1 seconde.
Parlons ensuite de l'application en Q. Nous serons comme dans QQ. Il y a de nombreux liens texte dans QQ et Q, c'est-à-dire qu'il y a un texte d'informations sur l'APP dans le coin inférieur gauche de la fenêtre. Ici, le backend est extrait de temps en temps via le WEB, et le backend est extrait et affiché au premier plan. Mais à une certaine période, les informations opérationnelles transmises par toutes les applications sont corrigées. Si l'on analyse le tableau correspondant à chaque lien texte selon une APP spécifique, il s'agit d'une très grande quantité de données. Parce que chacun ici fait environ trois à quatre cents octets. Du point de vue de l'optimisation, nous stockons ces fichiers localement à chaque fois. Ensuite, stockez-le localement dans localStorage. Nous sommes dans le même domaine et toutes les informations entre les applications sont accessibles les unes aux autres. Ensuite, tous les identifiants qui ont été extraits ne le seront plus.
Il y a aussi un point qui mérite attention ici. La mise en œuvre actuelle de localStorage par de nombreux fabricants est synchrone. Si vous appelez souvent l'interface localStorage, cela bloquera votre processus de rendu. À ce moment-là, lorsque l'utilisateur fait glisser la page vers le bas et que vous stockez des données à ce moment-là et que les données sont relativement volumineuses, l'utilisateur aura l'impression que votre page est très bloquée. Ils ont déjà discuté de ce problème. La conception de l'interface d'IE est asynchrone, tandis que leur conception est synchrone. Cela laissera supposer que vous disposez de nombreux programmes lors de l'ajustement de cette interface, car il existe un processus de sérialisation, la sérialisation sur le disque. Dans ce cas, l’ensemble du processus semblera plus lent. De plus, localStorage lui-même peut partager ces données entre différentes fenêtres et verrouillera ces données. Si une grande quantité de données appelle cette interface locale, elle semblera bloquée. Il n’y a donc pas de solution particulièrement bonne pour le moment, mais c’est quelque chose à garder à l’esprit. Même si le maximum actuel est supérieur à cinq mégaoctets, si vous utilisez plus de cinq mégaoctets, cela rendra les utilisateurs malheureux. Parce que si vous appelez cette excuse et que l'utilisateur fait glisser la souris, il se sentira très coincé.
　5. Stockage hors ligne
Parlons ensuite des avantages que le stockage hors ligne apporte aux utilisateurs en termes de performances. Le premier est le fichier de définition pour le stockage hors ligne. Tous les modules système de Q ont une prise en charge hors ligne définie. Cela signifie que toutes les applications peuvent toujours être utilisées même si le réseau est déconnecté. Ajouter un fichier MANIFEST au document. MANIFEST est un fichier de définition qui déclare quelles parties de la page actuelle doivent être stockées localement. Quelles sont celles qui doivent être remplacées par de nouvelles images ou quelque chose du genre si la demande échoue ? ?De cette façon Divisé en trois parties :
Premièrement, le CACHE, qui doit être stocké localement.
Deuxièmement, NETWORK ne sera pas stocké localement. Il reviendra et le demandera à chaque fois. Mais ce qu'il faut souligner ici, c'est que le stockage local et le stockage du navigateur sont en fait deux choses différentes. . Même si NETWORK doit indiquer à l'APP que je dois l'extraire à chaque fois, car comme Chrome, son cache de stockage est très haineux et difficile à vider. Il doit être vidé manuellement pour être pleinement efficace. Ainsi, même si vous le configurez pour ne pas le stocker localement, le navigateur peut le stocker lui-même car il le stocke à deux endroits différents.
Troisièmement, RETOUR. Si une image indique que la requête a échoué, il s'agit du 404. Quelle image dois-je utiliser à la place ? Je pense que c'est plus amusant.
Comment définir MAEIFEST ? Il y a trois points à noter ici dans MANIFEST :
Restriction de même origine pour MANIFEST
Le type MIME doit être text/cache-manifest. formats, ça ne marchera pas;
CHROME, si vous voulez voir si cette chose est efficace, vous pouvez la saisir dans le navigateur via le pseudo-protocole CHROME, chrome://appcache-internals.
À propos de la façon de mettre à jour le cache de l'application. Pourquoi le stockage hors ligne ? Le stockage hors ligne est local Lorsque le navigateur sait que vous disposez d'un stockage hors ligne, il accède d'abord au répertoire de stockage hors ligne pour savoir si la ressource a été mise en cache. Une fois mise en cache, il obtiendra la ressource directement à partir d'ici et n'enverra pas d'autre requête. Parce que la requête du navigateur est comme ça, lorsqu'il y a un stockage hors ligne, même la requête ne sera pas envoyée, elle sera donc plus rapide. Si parfois nous devons mettre à jour, que devons-nous faire lors de la mise à jour ?
Les utilisateurs peuvent vider manuellement le cache du navigateur, et le stockage local sera automatiquement effacé à ce moment-là.
Modifier n'importe quel contenu du MANIFEST C'est la méthode recommandée, et c'est également la méthode que nous utilisons en ligne. C'est-à-dire que nous pouvons modifier les éléments spécifiques à l'intérieur, mais il est préférable de modifier les commentaires ici, car chaque fois que je publie, nous avons un mécanisme de publication automatique. Lors de la publication, modifiez simplement les commentaires ci-dessus. Dans ce cas, chaque fois que le contenu est publié, il sera synchronisé avec le client local en temps réel
Il est exécuté via le programme, et le programme est window.applicationCache.update(). Autrement dit, je souhaite exploiter le stockage hors ligne. En fait, je l'appelle parfois stockage d'applications car sa sémantique est le stockage d'applications. Mettons à jour la boutique d'applications manuellement.
　6.Web Worker
　 Vient ensuite le Web Worker. Web Worker est un processus JS multithread. En fait, nous n’avons pas de scénarios d’application en ligne, je n’y reviendrai donc pas. Mais je peux parler des scénarios d’application spécifiques que j’ai vus.
Tout d'abord, présentons ce qu'est WEBWORK ? C'est un fil de discussion au niveau du système d'exploitation. Avant d'imiter le multi-threading, nous ouvrions en fait une fenêtre supplémentaire. Mais maintenant, le navigateur lui-même le fournit. Cela apportera plus de commodité à l'opération et alourdira l'ensemble de notre document, ce qui n'est pas une méthode très recommandée.
Ensuite, les capacités d'accès de WebWorker sont limitées et il ne peut pas accéder à de nombreux objets globaux. Par exemple, l'objet documnet n'est pas accessible. Le scénario le plus approprié pour WebWorker est celui des opérations informatiques gourmandes en CPU. Lorsque nous créions des jeux auparavant, nous utilisions BOX2D. Beaucoup de gens ont dû entendre que cela implique beaucoup de calculs, c'est-à-dire que dans toute la page, tous les objets ci-dessous doivent calculer leurs relations de collision. Ce montant de calcul est très important. Mais s'il est exécuté dans le processus JS actuel, le montant du calcul est énorme. Une fois calculé, la page entière sera très bloquée. Mais si vous utilisez WebWorker pour le faire, il s'agit d'un processus asynchrone, envoyé en temps réel, et vous pouvez faire d'autres choses pendant le processus de calcul. C'est du multithread.
　7. API de l'appareil
Parlons de l'API de l'appareil. Je pense que l'API de l'appareil est la plus importante en termes de performances, et c'est également la première API actuellement implémentée. L’un est CONNECTION, qui est la bande passante du réseau. Qu’est-ce que cela fait ? Dans ce scénario en Chine, nous devons nous rappeler que la vitesse Internet de nombreux utilisateurs est encore très faible. Nous espérons permettre aux utilisateurs de passer automatiquement à un forfait inférieur lorsque la vitesse de leur réseau est faible. Nous ne pouvons pas le faire avec la technologie existante. Mais nous pouvons utiliser l'API de l'appareil. Parce que nous savons que ces informations peuvent être obtenues à partir de l'appareil. Quelle est sa bande passante et que pouvons-nous faire avec cette bande passante ? Par exemple, lorsque le haut débit est bon, j'utilise des images haute définition. Lorsque la bande passante est relativement faible, des images de définition inférieure sont utilisées.
　8. Batterie
　Le suivant concerne la batterie. Je pense que du point de vue des performances, c’est principalement une question de puissance. Si la batterie de l'utilisateur est relativement faible, je pense qu'il devrait en faire le moins possible. Il n'y a jamais eu de percée dans la technologie des batteries de téléphones portables. Je pense que donner à l'APP un aspect plus performant est également un point fort promotionnel.
　9.CANVAS
　Vient ensuite CANVAS. Parlons de plusieurs points d'optimisation des performances de CANVAS. En utilisant ces éléments, les performances seront améliorées de 10 fois.
Premièrement, chaque CANVAS est une toile Lorsque nous voulons restituer un graphique, nous pouvons le superposer. Tout comme dans PS, il y a une couche, deux couches et trois couches. Lorsque de nombreux utilisateurs créent des jeux, ils mettent directement tout dans une seule couche, et tout sera mis à jour lors de la mise à jour. Mais si vous le superposez, vous placez l'arrière-plan sur le calque d'arrière-plan et les caractères sur le calque de caractères. Dans ce cas, lorsque je souhaite mettre à jour le personnage, seul le personnage sera mis à jour et le calque d'arrière-plan n'a pas besoin d'être modifié. Laissez le processeur faire moins de travail et les performances s'amélioreront naturellement.
Deuxièmement, context.drawImage. Ne redimensionnez pas l'image. Nous avons fait une erreur au début. L'image créée par notre artiste était toujours incompatible avec la nôtre. Ensuite, nous devons redimensionner l'image. Étant donné que la taille de l'image de l'appareil lui-même est la suivante, nous devons redimensionner l'image proportionnellement. Après avoir zoomé sur l'image, nous avons constaté qu'elle serait très bloquée sur les appareils bas de gamme, tels que l'iPad ou l'iPhone. Nous nous sommes demandé pourquoi nous avons effectué une analyse de code. L'utilisation de cette méthode prend beaucoup de temps.
Troisièmement, requestAnimationFrame. Il s'agit d'une méthode spécifiquement optimisée pour le rendu. Son principe est le suivant : chaque fois que le navigateur passe une image, cette méthode sera déclenchée. Lorsque je la déclencherai, Canvas comprend que le navigateur est prêt à faire l'image suivante. Si vous utilisez la méthode traditionnelle, il ne prendra pas en compte davantage vos affaires, il saura seulement combien de temps s'est écoulé et je l'exécuterai. Si l'utilisateur a été bloqué auparavant et que cette méthode est exécutée toutes les 10 secondes, dans les 10 secondes, son travail précédent n'est pas réellement terminé, et ce travail sera alors retardé. Il est optimisé pour rendre l'animation plus fluide, car à chaque image, il vous indique que vous pouvez faire quelque chose. (Texte : infoq)