Optimisation des performances de base des pages Web frontales-tutoriel CSS-php.cn

Cette fois, je vais vous présenter l'optimisation de base des performances des pages Web frontales et quelles sont les précautions. Ce qui suit est un cas pratique, jetons un coup d'œil.

Optimisation des pages

Compression des ressources statiques

Approprié à l'aide d'outils de build (webpack , gulp) Compressez les ressources statiques de la page Web telles que les images, les scripts et les styles.

Image sprite CSS, image en ligne base64

Fusionnez les petites icônes du site en une seule image, utilisez le positionnement CSS pour intercepter l'icône correspondante de manière appropriée ;

Style en haut, script en bas

La page est un processus de rendu étape par étape, le style en haut peut présenter la page à l'utilisateur plus rapidement < ; ;script> en haut bloquera le téléchargement des ressources à l'arrière de la page.

Utilisez des liens externes CSS et js

Plusieurs pages font référence à des ressources statiques publiques, et la réutilisation des ressources réduit les requêtes http supplémentaires.

Évitez les images src vides

Évitez les requêtes http inutiles.

<!-- 空src的图片依然会发起http请求 -->
<img src="" alt="image" />

Copier après la connexion

Évitez de mettre à l'échelle les images en HTML

Essayez d'utiliser la taille spécifiée pour les images selon vos besoins au lieu de charger une grande image, puis de la réduire.

<!-- 实际图片尺寸为600x300，在html中缩放为了200x100 -->
<img src="/static/images/a.png" width="200" height="100" alt="image" />

Copier après la connexion

Préchargement

La définition de l'attribut préchargement sur le rel de la balise de lien permet au navigateur de précharger les ressources avant que le mécanisme de rendu principal n'intervienne. Ce mécanisme permet d'obtenir des ressources plus tôt et ne bloque pas l'initialisation de la page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link ref="preload" href="style.css" as="style">
  <link ref="preload" href="main.js" as="script">
  
  <link ref="stylesheet" href="style.css">
</head>
<body>
  
  <script src="main.js"></script>
</body>
</html>

Copier après la connexion

Dans l'exemple, les fichiers css et js sont préchargés, et ils seront appelés immédiatement une fois utilisés dans le rendu de page ultérieur.

Vous pouvez spécifier le type de pour charger différents types de ressources.

style
script
vidéo
audio
image
police
document
...

Cette méthode peut également précharger des ressources sur plusieurs domaines, il suffit de définir l'attribut crossorigin.

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Copier après la connexion

CSS

Sélecteur

La priorité du sélecteur est de élevée à L'ordre le plus bas est :

Sélecteur d'ID
Sélecteur de classe
Sélecteur de balises
Sélecteur adjacent

h1 + p{ margin-top: 15px; }

Copier après la connexion

sélectionne le paragraphe qui apparaît immédiatement après l'élément h1. Les éléments h1 et p ont un élément parent commun.

Sélecteur d'enfant

h1 > strong {color:red;}

Copier après la connexion

Sélecteur de descendant

h1 em {color:red;}

Copier après la connexion

Sélecteur de caractères génériques

Sélecteur d'attribut

*[title] {color:red;}
img[alt] {border: 5px solid red;}

Copier après la connexion

Pseudo-classe sélecteur

Expérience d'utilisation du sélecteur :

Préférer le sélecteur de classe, qui peut remplacer le sélecteur d'étiquettes multicouches ;
Utilisez le ID du sélecteur avec prudence. Bien qu'il soit efficace, il est unique dans la page et n'est pas propice à la collaboration et à la maintenance en équipe
Faire un usage raisonnable de l'héritage du sélecteur
Évitez les expressions CSS.

Réduire le niveau des sélecteurs

En fonction de la priorité du sélecteur précédent, l'intégration de sélecteurs multi-niveaux doit être évitée autant que possible Il est préférable de ne pas dépasser 3 couches.

.container .text .logo{ color: red; }
/*改成*/
.container .text-logo{ color: red; }

Copier après la connexion

Rationnalisez le fichier de style de page et supprimez les styles inutilisés

Le navigateur effectuera une correspondance de style redondante, ce qui affectera le temps de rendu de plus, si le. Le fichier de style est trop volumineux, cela affectera également la vitesse de chargement.

Utilisez l'héritage CSS pour réduire la quantité de code

En utilisant les attributs héritables de CSS, l'élément parent définit le style et l'élément enfant n'a pas besoin de définir encore une fois.

Attributs héritables communs tels que : couleur, taille de police, famille de polices, etc. ; attributs non héritables tels que : position, affichage, flotteur, etc.

Lorsque la valeur de l'attribut est 0, aucune unité n'est ajoutée.

Lorsque la valeur de l'attribut CSS est 0, aucune unité n'est ajoutée pour réduire la quantité de code.

.text{ width: 0px; height: 0px; }
/*改成*/
.text{ width: 0; height: 0; }

Copier après la connexion

JavaScript

使用事件委托

给多个同类DOM元素绑定事件使用事件委托。

<ul id="container">
  <li class="list">1</li>
  <li class="list">2</li>
  <li class="list">3</li>
</ul>

Copier après la connexion

// 不合理的方式：给每个元素都绑定click事件
$('#container .list').on('click', function() {
  var text = $(this).text();
  console.log(text);
});
// 事件委托方式：利用事件冒泡机制将事件统一委托给父元素
$('#container').on('click', '.list', function() {
  var text = $(this).text();
  console.log(text);    
});

Copier après la connexion

需要注意的是，虽然使用事件委托时都可以将事件委托给document来做，但这是不合理的，一个是容易造成事件误判，另一个是作用域链查找效率低。应该选择最近的父元素作为委托对象。

使用事件委托除了性能上更优，动态创建的DOM元素也不需要再绑定事件。

DOMContentLoaded

可在DOM元素加载完毕（DOMContentLoaded）后开始处理DOM树，不必等到所有图片资源下载完后再处理。

// 原生javascript
document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
}, false);
// jquery
$(document).ready(function() {
  console.log("ready!");
});
// $(document).ready()的简化版
$(function() {
  console.log("ready!");
});

Copier après la connexion

预加载和懒加载

预加载

利用浏览器空闲时间预先加载将来可能会用到的资源，如图片、样式、脚本。

无条件预加载

一旦onload触发，立即获取将来需要用到的资源。

图片资源预加载。（3种实现图片预加载的方式）。

基于用户行为的预加载

对于用户行为可能进行的操作进行判断，预先加载将来可能需要用到的资源。

当用户在搜索输入框输入时，预先加载搜索结果页可能用到的资源；
当用户去操作一个Tab选项卡时，默认显示其中一个，当要去点击（click）其他选项时，在鼠标hover时，就可先加载将来会用到的资源；

懒加载

除页面初始化需要的内容或组件之外，其他都可以延迟加载，如剪切图片的js库、不在可视范围的图片等等。

图片懒加载。（判断图片是否在可视区域范围内，若在，则将真实路径赋给图片）

避免全局查找

任何一个非局部变量在函数中被使用超过一次时，都应该将其存储为局部变量。

function updateUI(){
  var imgs = document.getElementsByTagName("img");
  for (var i=0, len=imgs.length; i < len; i++){
    imgs[i].title = document.title + " image " + i;
  }
  var msg = document.getElementById("msg");
  msg.innerHTML = "Update complete.";
}

Copier après la connexion

在上面函数中多次使用到document全局变量，尤其在for循环中。因此将document全局变量存储为局部变量再使用是更优的方案。

function updateUI(){
  var doc = document;
  var imgs = doc.getElementsByTagName("img");
  for (var i=0, len=imgs.length; i < len; i++){
    imgs[i].title = doc.title + " image " + i;
  }
  var msg = doc.getElementById("msg");
  msg.innerHTML = "Update complete.";
}

Copier après la connexion

值得注意的一点是，在javascript代码中，任何没有使用var声明的变量都会变为全局变量，不正当的使用会带来性能问题。

避免不必要的属性查询

使用变量和数组要比访问对象上的属性更有效率，因为对象必须在原型链中对拥有该名称的属性进行搜索。

// 使用数组
var values = [5, 10];
var sum = values[0] + values[1];
alert(sum);
// 使用对象
var values = { first: 5, second: 10};
var sum = values.first + values.second;
alert(sum);

Copier après la connexion

上面代码中，使用对象属性来计算。一次两次的属性查找不会造成性能问题，但若需要多次查找，如在循环中，就会影响性能。

在获取单个值的多重属性查找时，如：

var query = window.location.href.substring(window.location.href.indexOf("?"));

Copier après la connexion

应该减少不必要的属性查找，将window.location.href缓存为变量。

var url = window.location.href;
var query = url.substring(url.indexOf("?"));

Copier après la connexion

函数节流

假设有一个搜索框，给搜索框绑定onkeyup事件，这样每次鼠标抬起都会发送请求。而使用节流函数，能保证用户在输入时的指定时间内的连续多次操作只触发一次请求。

<input type="text" id="input" value="" />

Copier après la connexion

// 绑定事件
document.getElementById('input').addEventListener('keyup', function() {
  throttle(search);
}, false);
// 逻辑函数
function search() {
  console.log('search...');
}
// 节流函数
function throttle(method, context) {
  clearTimeout(method.tId);
  method.tId = setTimeout(function() {
    method.call(context);
  }, 300);
}

Copier après la connexion

节流函数的应用场景不局限搜索框，比如页面的滚动onscroll，拉伸窗口onresize等都应该使用节流函数提升性能。

最小化语句数

语句数量的多少也是影响操作执行速度的因素。

将多个变量声明合并为一个变量声明

// 使用多个var声明
var count = 5;
var color = "blue";
var values = [1,2,3];
var now = new Date();
// 改进后
var count = 5,
  color = "blue",
  values = [1,2,3],
  now = new Date();

Copier après la connexion

改进的版本是只使用一个var声明，由逗号隔开。当变量很多时，只使用一个var声明要比单个var分别声明快很多。

使用数组和对象字面量

使用数组和对象字面量的方式代替逐条语句赋值的方式。

var values = new Array();
values[0] = 123;
values[1] = 456;
values[2] = 789;
// 改进后
var values = [123, 456, 789];

Copier après la connexion

var person = new Object();
person.name = "Jack";
person.age = 28;
person.sayName = function(){
  alert(this.name);
};
// 改进后
var person = {
  name : "Jack",
  age : 28,
  sayName : function(){
    alert(this.name);
  }
};

Copier après la connexion

字符串优化

字符串拼接

早期浏览器未对加号拼接字符串方式优化。由于字符串是不可变的，就意味着要使用中间字符串来存储结果，因此频繁的创建和销毁字符串是导致它效率低下的原因。

var text = "Hello";
text+= " ";
text+= "World!";

Copier après la connexion

把字符串添加到数组中，再调用数组的join方法转成字符串，就避免了使用加法运算符。

var arr = [],
  i = 0;
arr[i++] = "Hello";
arr[i++] = " ";
arr[i++] = "World!";
var text = arr.join('');

Copier après la connexion

现在的浏览器都对字符串加号拼接做了优化，所以在大多数情况下，加法运算符还是首选。

减少回流和重绘

在浏览器渲染过程中，涉及到回流和重绘，这是一个损耗性能的过程，应注意在脚本操作时减少会触发回流和重绘的动作。

回流：元素的几何属性发生了变化，需要重新构建渲染树。渲染树发生变化的过程，就叫回流；
重绘：元素的几何尺寸没有变化，某个元素的CSS样式（背景色或颜色）发生了变化。

触发重排或重绘的操作有哪些？

调整窗口大小
修改字体
增加或者移除样式表
内容变化，比如用户在框中输入文字
操作class属性
脚本操作DOM（增加、删除或修改DOM元素）
计算offsetWidth和offsetHeight属性
设置style属性的值

如何减少重排和重绘，提升网页性能？

1、脚本操作DOM元素

将DOM元素设置为display:none，设置过程中会触发一次回流，但之后可以随意改动，修改完后再显示；
将元素clone到内存中再进行操作，修改完后重新替换元素。

2、修改元素的样式

尽量批量修改，而不是逐条修改；
预先设定好id、class，再设置元素的className。

3、为元素添加动画时将元素CSS样式设为position:fixed或position:absolute，元素脱离文档流后不会引起回流。

4、在调整窗口大小、输入框输入、页面滚动等场景时使用节流函数（上面已提到过）。

HTTP

浏览器缓存

合理设置浏览器缓存是网页优化的重要手段之一。

Expires 和 Cache-Control

Expires出自HTTP1.0，Cache-Control出自HTTP1.1，同时设置两者时，Cache-Control 会覆盖 Expires。

Expires指定的是实际过期日期而不是秒数。但Expires存在一些问题，如服务器时间不同步或不准确。所以最好使用剩余秒数而不是绝对时间来表达过期时间。
Cache-Control可设置max-age值，单位秒，指定缓存过期时间。如：Cache-Control: max-age=3600。

ETag 和 Last-Modified

ETag 和 Last-Modified都由服务器返回在response headers中，其中ETag的优先级比Last-Modified高，也就是说服务器会优先判断ETag的值。

ETag是附加到文档上的任意标签，可能是文档的序列号或版本号，或者是文档内容的校验等。当文档改变时ETag值也会随之改变。与ETag相关的是 If-None-Match，当浏览器发起请求时，会在If-None-Match字段携带ETag的值发给服务器；
Last-Modified是文档在服务器端最后被修改的时间。与Last-Modified相关的是If-Modified-Since，当浏览器发起请求时，会在If-Modified-Since字段携带Last-Modified的值发送给服务器。

强缓存和协商缓存

Les types de cache sont le cache fort et le cache négocié. La différence entre les deux est que le cache fort n'enverra pas de requête au serveur, mais le cache négocié enverra une requête si la correspondance réussit, il renverra 304 Non modifié, si la correspondance échoue, il renverra. 200 ; le navigateur vérifiera d’abord le cache fort, et si le cache fort manque, effectuera alors une vérification du cache de négociation.

Comment configurer le cache du navigateur

Ajouter Expires et Cache-Control dans la réponse de retour du serveur Web
Configurez Expires et Cache-Control dans le fichier de configuration de nginx ou apache.

Pourquoi devrions-nous réduire les requêtes HTTP

Les mesures visant à réduire les requêtes http jouent un rôle important dans l'optimisation des performances, telles que : l'utilisation de sprite CSS images Remplacez plusieurs demandes d'images, évitez les images src vides, utilisez des images en ligne, utilisez des liens externes css et js, du cache, etc.

Le processus depuis la saisie de l'URL jusqu'à la fin du chargement de la page comprend :

Résolution DNS
Connexion TCP
Demande et réponse HTTP
Page de rendu du navigateur
Fermer la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Rédiger des spécifications et de l'ordre dans des projets pratiques CSS

Css+transition pour rendre l'animation visible et invisible

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!