Ce que les développeurs doivent savoir sur l'analyse des performances HTML5

Commentaire: L'article suivant a été écrit par un technicien informatique nommé Zhang Liming, et il a été publié sur la page Web InfoQ. Cette fois, il a analysé les performances de HTML5 à partir de 9 aspects différents du texte intégral, qui vaut toujours la peine d'être lu par des développeurs correspondants.

Premièrement, du point de vue de la lisibilité de l'utilisateur, il y avait beaucoup de choses qui n'étaient pas à l'origine compris par les débutants pour la première fois pour voir ces choses, et la méthode de déclaration HTML5 est évidemment plus amicale avec les utilisateurs.

Deuxièmement, la déclaration de codage du document est très simple si elle est dans HTML5. Beaucoup de gens demandent ce qu'est HTML5? Nous disons que la façon dont nous pouvons utiliser HTML5 en premier est de changer d'abord Doctype, car de nombreuses pages sont toujours de la manière traditionnelle. La méthode HTML5 est compatible avec IE Browser et peut être utilisée de IE6 à IE10, et elle peut être prise en charge par des navigateurs avancés. Ainsi, la façon la plus simple d'embrasser HTML5 est de changer Doctype.

La prochaine chose n'est peut-être pas une chose très courante, mais c'est quelque chose que je préfère, en utilisant une méthode d'étiquette plus simple. Comme vous pouvez le voir à partir de ce nom, HTML5 est hérité de HTML4. HTML4 a un mode strict et un mode de transition. HTML5 prend en charge ce mode de transition, ce qui signifie que vous ne pouvez pas fermer certaines balises. Cependant, je ne recommande pas toutes les balises, par exemple, la balise corporelle n'est pas fermée, ce que nous ne recommandons pas. Mais le P-LABEL le plus couramment utilisé est également la balise de liste Li. Pourquoi dites-vous cela? Tout d'abord, d'un point de vue visuel, cette méthode est un peu plus simple. Ensuite, la clé est que pendant le processus de transfert de documents, il y aura moins de contenu.

La déclaration d'attributs de balises HTML5 prend en charge trois façons: supports simples, doubles supports et supports non ramifiés. Pour réduire la taille du document, j'ai choisi la méthode sans citations doubles ni citations simples. Cependant, il convient de noter que, en supposant qu'il s'agit d'une déclaration d'attributs de classe, car les attributs peuvent inclure plusieurs classes, et lorsque plusieurs classes, elles doivent être enfermées entre parenthèses. À cet égard, permettez-moi de vous montrer une pratique de Google. Google lui-même a une page qui pratique complètement ce qui précède, réduisant la taille du document de 20%, réduisant le transfert de documents HTML de 20%. Si le tout est pratiqué, il peut atteindre une diminution entre 5% et 20%. Il s'agit de la première étape, réduisant la taille du document HTML.

Vient ensuite l'optimisation des images, qui sont toujours des éléments qui aiment et hainent. Parce que lorsqu'il y a trop d'images, cela entraînera sérieusement la vitesse de chargement de toute la page. En ce qui concerne les méthodes d'optimisation des images, il existe de nombreuses introductions dans le livre "Site Web High Performance". Pour résumer, il y a trois points principaux: l'utilisation des elfes, l'optimisation de la taille des images et l'utilisation des données URI. Je n'entrerai pas dans les détails ici.

Une autre idée de l'optimisation de l'image est: sans image. Abandonnez les images et embrassez CSS3. À l'origine, j'avais besoin de régler une image avec un effet d'angle arrondi, mais maintenant j'ai utilisé Border-Radius dans CSS3; J'ai utilisé l'image avec un effet d'ombre, mais maintenant j'utilise Box-Shadow dans CSS3; J'avais l'habitude de définir une image d'arrière-plan de dégradé, mais maintenant j'utilise le gradient dans CSS3.

3. Pré-pied

Ensuite, parlons de la pré-échantillon, ce qui est une autre façon d'optimisation. Nos idées d'optimisation actuelles ne sont rien de plus que peu. Beaucoup d'entre eux sont du point de vue de moins de choses, par exemple, la taille du document a été réduite avant et la taille de l'image a été réduite. De nombreuses images deviennent des elfes afin de réduire le nombre de demandes d'envoi. Pour la pré-échantillon, c'est une autre façon de penser. Chargement des ressources tôt. Lorsque l'utilisateur va au point, il a réellement chargé, donc ce sera certainement plus rapide.

Il y a deux parties pour la prélecture: l'une est la prélecture des ressources, et l'autre pré-résoudre le DNS.

Il y a plusieurs points à noter lors du préchargement des ressources:

Le précharge ne tirera que lorsque le navigateur est inactif, mais il n'est pas garanti de le tirer. C'est un point très important. Parce que le navigateur lui-même a un auditeur mondial, qui est une interface interne. Lorsque l'air de navigation est inactif, il exécutera le navigateur lorsqu'il est inactif, mais ce rappel inactif peut ne pas être déclenché, il ne garantit donc pas que la précharge sera effectuée.

Chrome ne prend pas en charge le préchargement des ressources HTTPS. Par exemple, Alipay est une page HTTPS, Chrome ne sera pas pré-pulsé.

Bien qu'une page pré-tirée ne soit pas visible après son existence, elle analyse en fait normalement. Si je pré-échoue la page de connexion, la page de connexion dispose de nombreuses ressources, telles que des images, des fichiers CSS et des fichiers JS. Il sera analysé de haut en bas normalement. Pendant le processus d'analyse, cette page n'apparaît pas, mais elle existe en fait. Dans HTML5, vous pouvez obtenir l'état actuel de la page via Document.VisibilityState. Habituellement, la page a deux états, visibles et invisibles, mais il y a maintenant un nouvel État appelé State de pré-rendu. Vous pouvez déterminer directement si la page se trouve dans l'état de prérenrinage en fonction de savoir si Document.CisibilityState est égal à Prerender.

4.DNS Résolution

Vient ensuite la résolution de DNS. Parfois, lorsque nous nous connectons à la page, il est relativement difficile de détecter où l'utilisateur peut cliquer. Bien sûr, nous allons parfois faire des points d'enterrement pour découvrir que le prochain comportement de l'utilisateur se déroule principalement. Mais dans certains cas, nous ne savons pas à quelle page l'utilisateur ira ensuite, mais nous savons à quel domaine il ira. À l'heure actuelle, je peux pré-parse 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 en outre permettre aux utilisateurs de voir cette page.

Ce qui suit est un cas de fond d'écran Q +. Le fond d'écran Q + est un certain système. Tout d'abord, toute l'architecture de Q + est basée sur le client Web +. Ce que nous voyons maintenant, c'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, car il existe de nombreuses images, toutes les ressources statiques sont allouées à plus d'une douzaine de serveurs statiques. En d'autres termes, si je veux tirer, je dois analyser 10 DNS. Cette fois, cela prend beaucoup de temps, et le temps le plus lent peut être retardé de quelques secondes, ce que nous pouvons ressentir à l'œil nu. Si vous effectuez une pré-résolution DNS, car je ne sais pas de quelle ressource il s'agit, toutes les images sont aléatoires, nous pouvons donc seulement dire que nous travaillons dur sur la pré-résolution DNS pour améliorer sa vitesse. De cette façon, cela peut prendre 2 secondes et je deviendrai 1 seconde.

Ensuite, parlons de l'application dans Q +. Nous aurons de nombreuses chaînes de texte dans QQ et Q +, tout comme dans QQ, ce qui signifie qu'il y a une information de texte texte poussée dans le coin inférieur gauche de la fenêtre. Ceci est le backend est tiré de temps en temps sur le Web, et le backend est tiré puis affiché au premier plan. Mais à une certaine période, les informations opérationnelles totales poussées par toutes les applications sont réellement fixées. Si vous analysez le tableau correspondant de chaque chaîne de texte selon une application spécifique, il s'agit de très grands données à l'heure actuelle. Parce que l'un ici a environ trois ou quatre cents octets, du point de vue de l'optimisation, nous retirerons ces zones localement. Ensuite, enregistrez le storage local local. Nous sommes dans le même domaine et toutes les informations entre les applications sont accessibles les unes par les autres. Ensuite, vous ne tirerez pas tous les identifiants que vous avez tirés.

Il y a aussi un point qui doit être prêté attention ici. Actuellement, de nombreux fabricants de localstorage sont synchronisés. Si vous appelez LocalStorage en grande quantité, il bloquera en fait votre processus de rendu. À l'heure actuelle, lorsque l'utilisateur fait glisser la page vers le bas, vous stockez des données pour le moment et les données sont relativement importantes. Pour le moment, l'utilisateur sentira que votre page est très bloquée. Ils ont déjà discuté de cette question. La conception de cette interface est conçue de manière asynchrone, et elles sont conçues comme synchrones. Cela vous fera faire cette excuse lorsque vous créez plus d'applications car il y a un processus de sérialisation, une séquence sur le disque. De cette façon, l'ensemble du processus apparaîtra plus lent. De plus, LocalStorage peut partager ces données entre différentes fenêtres et se verrouillera sur ces données. Si une grande quantité de données appelle cette interface locale, elle semblera relativement bloquée. Il n'y a donc pas de solution particulièrement bonne pour le moment, mais c'est quelque chose à retenir. Même si le plus grand pour le moment est plus de 5 heures, si vous utilisez plus de 5 heures, cela rendra l'utilisateur très triste. Parce que si vous appelez cette excuse et que l'utilisateur traîne et utilise la souris, elle sera très coincée.

Ensuite, parlons des avantages du stockage hors ligne pour les utilisateurs en termes de performances. Tout d'abord, le fichier de définition est entré dans le stockage hors ligne. Tous les modules système dans Q + ont une prise en charge hors ligne de définition. C'est-à-dire que si toutes les applications sont déconnectées, elles peuvent toujours être utilisées. Ajoutez un fichier manifeste au document. Manifeste est un fichier de définition qui déclare quelles pages doivent être stockées localement? Lesquels n'ont pas besoin d'être stockés? Lesquels doivent être remplacés si la demande échoue? Ceci est divisé en trois parties:

Tout d'abord, le cache, qui doit être stocké localement.

Deuxièmement, le réseau ne sera pas stocké localement. Il reviendra et le demandera à chaque fois. Mais il convient de souligner ici que le stockage local et le stockage du navigateur sont en fait deux choses différentes. Ils stockent deux pièces différentes. Même si le réseau doit dire à l'application que je dois le retirer une fois à chaque fois, car comme Chrome, son cache de stockage est très haineux et difficile à effacer. Il doit être éliminé manuellement pour prendre effet. Donc, même si vous le définissez pour ne pas le stocker localement, le navigateur peut le stocker lui-même car il stocke deux endroits différents.

Troisièmement, se repliant. Si une image échoue, c'est 404. Alors, quelles images devraient être utilisées à la place? Je pense que c'est plus amusant.

Comment définir Maeifest? Il y a trois choses à noter sur Manifest:

Restriction homologue manifeste;

Le type MIME doit être du texte / cache-manifest, qui est standard et ne prendra pas effet s'il est dans d'autres formats;

Chrome, si vous voulez voir si cette chose prend effet, vous pouvez l'entrer dans le navigateur via le chrome pseudo-protocol, chrome: // appcache-interals.

Sur la façon de mettre à jour le cache de l'application. Pourquoi avez-vous besoin d'un stockage hors ligne? Stockez hors ligne localement. Lorsque le navigateur sait que vous avez un stockage hors ligne, il ira d'abord au répertoire de stockage hors ligne pour savoir si cette ressource a été mise en cache. Lorsqu'il aura été mis en cache, il obtiendra la ressource directement à partir d'ici et n'enverra pas une autre demande. Parce que la demande du navigateur est comme ceci, lorsqu'il y a un stockage hors ligne, même la demande ne sera pas envoyée, ce sera donc plus rapide. Si parfois nous devons mettre à jour, que devons-nous faire lorsque nous mettons à jour?

Les utilisateurs peuvent effacer manuellement le cache du navigateur et le stockage local sera automatiquement effacé à ce moment.

Modifier tout contenu de Manifest est une manière plus recommandée et c'est aussi la façon dont nous l'utilisons en ligne. C'est-à-dire que nous pouvons modifier les projets spécifiques à l'intérieur, mais il est préférable de modifier les commentaires ici, car chaque fois que je publie, nous publions automatiquement le mécanisme, et commençons et le modifions lors de la publication. De cette façon, chaque fois que le contenu est publié, il sera synchronisé avec la zone locale du client en temps réel;

Exécutez via le programme, et le programme est Window.ApplicationCache.update (). Cela signifie que je souhaite fonctionner le stockage hors ligne. En fait, je l'appelle parfois le stockage d'applications car sa sémantique est un stockage d'applications. Nous allons mettre à jour manuellement le stockage d'application.

6. Web Worker

Prochain travailleur du web. Le travailleur Web est un processus JS multi-thread. En fait, si nous n'avons pas de scénarios d'application en ligne, je n'en parlerai pas. Mais nous pouvons parler des scénarios d'application spécifiques que j'ai vus.

Tout d'abord, permettez-moi de présenter ce qu'est le travail Web? Il s'agit d'un fil de niveau OS. Avant, nous avons imité le multi-lancement, mais en fait, nous avons ouvert une fenêtre de plus. Mais maintenant, le navigateur lui-même le fournit, ce qui apportera plus de commodité à l'opération et est un moyen de rendre notre document entier plus lourd et pas très recommandé.

Ensuite, Webworker a des capacités d'accès limitées et ne peut pas accéder à de nombreux objets globaux. Par exemple, l'objet Documnit ne peut pas être accessible. Le scénario le plus approprié pour le travailleur Web est les opérations informatiques à forte intensité de processeur. Lorsque nous jouions à des jeux auparavant, nous avons utilisé Box2D. Beaucoup de gens en ont entendu parler. Cela implique beaucoup de calculs, c'est-à-dire que tous les objets ci-dessous dans toute la page doivent calculer leur relation de collision, qui est très grande. Cependant, s'il est exécuté dans le processus JS actuel, le calcul est important et une fois le calcul calculé, la page entière sera très bégayée. Cependant, si vous utilisez un travailleur Web pour le faire, c'est un processus asynchrone qui est envoyé en temps réel et peut faire d'autres choses pendant le processus de calcul, qui est multi-threading.

Parlons de l'API de l'appareil. Je pense que la chose la plus importante à propos de l'API de l'appareil est les performances, et c'est aussi la première API actuellement mise en œuvre. L'une est la connexion, qui est la bande passante réseau. Quelle est la fonction de cela? Dans ce scénario en Chine, il est nécessaire de se rappeler que les vitesses Internet de nombreux utilisateurs sont encore très faibles. Nous espérons que lorsque la vitesse Internet des utilisateurs est faible, ils peuvent automatiquement se rétablir vers une solution relativement faible. Nous ne pouvons pas le faire si nous utilisons 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. Qu'est-ce que son haut débit? Qu'est-ce que le haut débit? Ce que nous pouvons faire quand c'est. Par exemple, lorsque le haut débit est bon, j'utilise des images haute définition. Lorsque le haut débit est relativement faible, utilisez des images avec une clarté plus faible.

8. Batterie

La suivante concerne la batterie. Je pense que du point de vue des performances, il s'agit principalement de la puissance. Si la puissance de la batterie de l'utilisateur est relativement faible, je pense qu'il devrait essayer de faire moins de choses. La technologie de la batterie du téléphone mobile elle-même n'a pas encore fait des percées. Je pense que faire paraître l'application plus performant est également un moment fort de la publicité.

9.Canvas

Ensuite, c'est toivas. Parlons de plusieurs points d'optimisation des performances de Canvas. Si vous utilisez ces choses, les performances seront améliorées de 10 fois.

Tout d'abord, chaque toile est une toile. Lorsque nous voulons rendre un graphique, nous pouvons le superposer. Tout comme à l'intérieur de PS, il s'agit d'une, deux et trois couches. De nombreux utilisateurs imitent directement tout en une couche lors de la fabrication de jeux, et tout doit être mis à jour une fois qu'ils sont mis à jour. Mais si vous le superposez, vous mettez l'arrière-plan dans la couche d'arrière-plan et le caractère dans le rôle. De cette façon, lorsque je souhaite mettre à jour le rôle, je ne mettrai à jour que le rôle et la couche d'arrière-plan n'a pas besoin d'être modifiée. Comme le CPU le fait moins, les performances s'amélioreront naturellement.

Deuxièmement, context.Drawimage. N'allongez pas l'image. Nous avons fait une erreur au début. Les images prises par nos artistes sont toujours incompatibles avec nous, puis nous voulons faire évoluer l'image. Parce que la taille de l'image de l'appareil lui-même est comme ceci, nous devons mettre à l'échelle l'image par rapport. Après avoir zoom sur l'image, j'ai constaté que sur les appareils bas de gamme, par exemple, l'iPad ou l'iPhone sera très coincé. Pourquoi? Il suffit de effectuer une analyse de code. Lorsque vous utilisez cette méthode, cela coûtera cher.

Troisièmement, DequestanimationFrame. Il s'agit d'une méthode spécifiquement optimisée pour le rendu. Son propre principe est le suivant: lorsque le navigateur passe un cadre, cette méthode sera déclenchée. Lorsque je le déclenche, Canvas obtient le navigateur est prêt à faire le cadre suivant. Si vous utilisez la méthode traditionnelle, vous ne considérerez pas plus de vos affaires. Il ne saura que combien de temps j'ai passé et je l'exécuterai. Si l'utilisateur est bloqué avant et exécute cette méthode toutes les 10 secondes, en 10 secondes, les travaux précédents n'ont pas été terminés, puis les travaux seront reportés. Il est optimisé pour que l'animation soit plus fluide, car chaque trame, il vous dit que vous pouvez faire quelque chose. (Texte: infoq)