Résumé des méthodes d'optimisation des pages

Cette fois, je vais vous apporter un résumé des méthodes d'optimisation des pages et quelles sont les précautions pour l'optimisation des pages. Voici des cas pratiques, jetons un oeil.

Objectif d'arrière-plan

• Rendre la page d'accueil du site officiel plus rapide, répondre plus rapidement aux opérations des utilisateurs et offrir aux utilisateurs une expérience plus conviviale.

• Réduisez le nombre de requêtes de pages, réduisez la bande passante occupée par les requêtes et économisez des ressources.

Les moyens d'optimisation

sont répartis en deux catégories selon la granularité :

• Optimisation au niveau de la page (nombre de requêtes HTTP, fusion et compression des ressources, timing de chargement des ressources, etc.)

• Optimisation au niveau du code (optimisation des opérations DOM, optimisation du sélecteur CSS, optimisation de la structure HTML)

Mesures spécifiques

Optimisation au niveau de la page

L'objectif d'optimisation au niveau de la page est essentiellement de savoir comment réduire le nombre de requêtes HTTP et réduire la taille des ressources demandées. Chaque requête a un coût, comprenant à la fois un coût en temps et un coût en ressources (une requête complète nécessite un processus « long » comme l'adressage DNS, l'établissement d'une connexion avec le serveur, l'envoi de données, l'attente de la réponse du serveur et la réception de données. Complexe processus)

1. Fusion et compression des ressources statiques

Selon le type de fichiers statiques, vous pouvez utiliser l'outil gulp pour fusionner et compresser des fichiers js et des fichiers css.
Par exemple, il y a sept fichiers css et plus de dix ou vingt fichiers js dans le projet de site Web officiel. Après avoir fusionné et compressé les ressources statiques, la surcharge HTTP peut être réduite.

Nous fusionnons et compressons toutes les ressources qui ne changent pas fréquemment (telles que jquery, diverses bibliothèques de bibliothèques, plug-ins, etc.) en un seul fichier, nommé vender.css, vender.js. Les fichiers fréquemment modifiés en ligne sont fusionnés et compressés en un seul fichier, nommé index.css, index.js, et ajoutés avec des tampons de hachage. Le contenu de l'index et des autres fichiers changera essentiellement à chaque fois qu'ils seront en ligne, de sorte que le hachage sera ajouté après. gulp est construit automatiquement. Le poke est également différent, mais le type de rendu reste inchangé, afin que nous puissions utiliser raisonnablement le mécanisme de mise en cache du navigateur.

2. Traitement des images

• Utilisez le plug-in lazyload de jq pour implémenter le chargement paresseux des images. Attendez que la barre de défilement défile jusqu'à l'endroit correspondant avant de charger les ressources d'image requises.

• N'utilisez pas directement la double image fournie par la conception. Utilisez CSS devicePixelRatio pour vérifier le rapport de pixels de l'appareil afin de faciliter la distinction entre les appareils rétiniens et les appareils non rétiniens. décidez si vous souhaitez charger l’image double ou les images au format original.

• Avant de télécharger l'image sur cdn, utilisez l'outil gulp-imagemin pour compresser la taille sans distorsion.

• Transformez toutes les petites images comme celle ci-dessous en images de sprite. Vous pouvez envisager d'utiliser icon-font pour obtenir du monochrome. Ou vous pouvez écrire du code svg directement sur la page et le convertir en base64 et l'écrire sur la page. En bref, vous devez réduire le nombre de requêtes http.

3. Chargement du premier écran

Présentez immédiatement le premier écran à l'utilisateur.
La méthode spécifique consiste à envelopper tous les éléments DOM avec un élément template à l'exception du premier élément DOM d'écran. Une fois que la fenêtre a détecté l'événement de chargement, toutes les parties DOM restantes sont insérées dans la page. (astuces : Pour empêcher les utilisateurs de commencer à faire défiler la page avant d'attendre l'événement de chargement de la fenêtre, vous pouvez étendre la plage du premier écran.)

Pré-lecture DNS

DNS. pré-lecture C'est une fonction qui permet au navigateur d'effectuer activement la résolution de nom de domaine. Les requêtes DNS nécessitent très peu de bande passante, mais la latence est un peu élevée.
Ce qui suit est une citation de MDN :

Dans certains navigateurs, ce comportement de prélecture se produira en parallèle avec le contenu réel de la page (plutôt qu'en série). De ce fait, le processus de résolution de certains noms de domaine à forte latence ne bloquera pas le chargement des ressources.
Cela peut considérablement accélérer le chargement des pages (en particulier dans les environnements de réseau mobile). Dans certaines pages contenant de nombreuses images, la pré-résolution du nom de domaine avant de lancer une demande de chargement d'image augmentera la vitesse de chargement des images d'au moins 5 %.

Méthode spécifique : Ajoutez
head

<link rel="dns-prefetch" href="https://data.dadaabc.com/">

à la balise

data.dadaabc.com comme nom de domaine de la ressource statique. S'il existe d'autres noms de domaine liés, ajoutez-les. ensemble.

5. 多域名分发静态资源

同域下浏览器能并发的请求有限，为了增加并发，尤其是一些静态资源上，可以使用多个域名。但由于域名DNS解析本身也是耗时的，所以也不是越多越好，chrome最大支持6路并发，所以一般设置2-4个域名较为合适。
具体的做法是：再增加cdn域名来下载静态资源。比如图片全部用img.dadaabc.com/域名,css资源全部用css.dadaabc.com/域名，这些域名最终全部指向同样的cdn服务器。静态资源域名加前缀可以用gulp-rev-replace来实现。

6. 统计代码

统计代码全部放到window的load事件之后执行。为了便于管理统计代码，例如页面加上一些埋点，增加删除统计产品，我们可以借助Google Tag Manager工具来统一管理。
具体做法是：页面只拉取Google Tag Manager提供的gtm代码，该js代码含有全部的统计产品，例如百度、Inspelect等， 这些统计产品也都是通过创建script标签来动态插入到页面中的。另外需要注意的是，google提供的gtm代码是在google服务器上的，为了让获取该代码的速度更快，我们可以在自己的服务器上执行crontab定时任务，每分钟获取一次，然后gtm代码直接从自己服务器上获取。

代码级别优化

1. 合理的dom结构

css文件全部放到head里，script文件全部放到body的最底部。
原因：
把样式表移到head里允许页面逐步渲染。
浏览器负责渲染的GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

参考资料：从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

2. 最小化重排和重绘

多个属性改变一次性写：

举个例子：

var ele = document.getElementById('myp');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';

三个样式属性被改变，每一个都会影响元素的几何结构，虽然大部分现代浏览器都做了优化，只会引起一次重排，但是像上文一样，如果一个及时的属性被请求，那么就会强制刷新队列，而且这段代码四次访问DOM，一个很显然的优化策略就是把它们的操作合成一次，这样只会修改DOM一次：

var ele = document.getElementById('myp');
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

总结：同一个DOM的多个属性改变可以写在一起（减少DOM访问，同时把强制渲染队列刷新的风险降为0）

fragment元素的应用：

fragment是个轻量级的document对象，它的设计初衷就是为了完成更新和移动节点这样的任务。fragment的一个便利的语法特性是当你附加一个片断到节点时，实际上被添加的是该片断的子节点，而不是片断本身。只触发了一次重排，而且只访问了一次实时的DOM。
例如：

var fragment = document.createDocumentFragment();
var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);
var li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);
document.getElementById('fruit').appendChild(fragment);

3. 函数防抖和函数节流

触发大量回调函数的事件，例如拖拽时的mousemove事件，window对象的resize、scroll事件，文字输入、自动完成的keyup事件等，需要合理使用函数防抖和函数节流机制。具体可以参考我的另外一篇文章函数防抖和函数节流

4. CSS选择器

CSS选择器的解析式其实是从右到左的，例如：

#p1 a {
    color: red
}

如上面的选择器，浏览器必须遍历查找所有的a元素，再去找ID为p1的元素，这样查找的方式显然很低效。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

React中生命周期使用详解

Explication détaillée de la communication des composants dans React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!