Maison > Article > interface Web > Explication détaillée de l'optimisation des performances en HTML5
Explication détaillée de l'optimisation des performances en HTML5
- 黄舟original
- 2017-07-27 09:56:101681parcourir
Optimisation des performances HTML5
--Réduire le redessin
Une fois la page HTML affichée, la modification dynamique des éléments de la page ou l'ajustement des styles CSS entraîneront le redessin du navigateur, la perte de performances dépend directement de l'ampleur des changements dynamiques : si vous modifiez uniquement des informations telles que la couleur d'un élément, seul l'élément sera redessiné et si vous ajoutez ou supprimez des nœuds ou ajustez la position du nœud, ses nœuds frères le seront également ; être redessiné.
Réduire le redessinage ne signifie pas ne pas redessiner, mais faire attention à la plage de redessinage : ① Plus l'élément DOM est modifié en profondeur, plus l'impact est faible, alors essayez d'effectuer des changements de nœuds plus profonds ; ② Quel est le poids ; le poids de certains styles DOM ? Les modifications doivent être fusionnées et modifiées autant que possible.
Prenons comme exemple la modification de la couleur d'arrière-plan, de la largeur et de la couleur d'une balise 3499910bf9dac5ae3c52d5ede7383485
<a href="javascript:void(0);" id="example">传统的代码</a>
<script>
var example = document.getElementById("example");
example.ondblclick = function() {
example.style.backgroundColor = "red";
example.style.width = "200px";
example.style.color = "white";
}
</script>
Ce qui précède sera redessiné 3 fois, mais s'il est exécuté plusieurs fois via CSS au lieu de javascript, un seul redessin sera effectué.
<style>
.dblClick {
width: 200px;
background: red;
color: white;
}
</style>
<a href="javascript:;" id="example">CSS优化的代码</a>
<script>
var example = document.getElementById("example");
example.ondblclick = function() {
example.className = "dblClick";
}
</script>Évitez le chargement du script bloquant
lorsque le navigateur analyse les balises de script normales, cela doit attendre que le script soit téléchargé avant de l'analyser et de l'exécuter, tandis que le code HTML suivant ne peut qu'attendre. L'introduction du fichier CSS doit être placée dans l'en-tête 93f0f5c25f18dab9d176bd4f6de5d30e, car il s'agit d'un élément nécessaire au rendu HTML. Afin d'éviter de bloquer le chargement, le script doit être placé à la fin du document, et le CSS doit être placé en tête !
<head> <link rel="stylesheet" href="common.css">......<script src="example.js"></script> </body>
--Évitez l'imbrication profonde des nœuds
Des nœuds imbriqués de niveau profond sont souvent nécessaires lors de la phase initiale build Cela prend plus de mémoire et sera plus lent lors de la traversée des nœuds. Ceci est lié au mécanisme du navigateur pour créer des documents DOM. Le navigateur stocke la structure de l'ensemble du document HTML sous la forme d'une structure « arborescente » DOM. Lorsque le niveau d'imbrication des nœuds du document est plus profond, le niveau de l'arborescence DOM construite sera plus profond.
Le code suivant peut supprimer complètement l'une des balises e388a4556c0f65e1904146cc1a846bee
<p>
<span>
<label>嵌套</label>
</span>
</p>
Cache de page
Habituellement, lorsque le cache n'est pas défini, la page sera relue chaque fois que la page est actualisée, récupérez les fichiers du serveur, et si le cache est configuré, tous les fichiers peuvent être récupérés localement, ce qui améliore évidemment considérablement l'efficacité de la page.
Nous pouvons définir le délai d'expiration de la page en définissant expires dans l'en-tête de la page. En définissant le délai d'expiration plus long, nous pouvons obtenir une mise en cache "permanente".
<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />
Bien entendu, si le code de votre projet change, le dernier fichier ne sera pas disponible car le client met en cache le fichier, ce qui provoquera inévitablement des erreurs d'affichage. La solution à ce problème consiste à ajouter un horodatage au fichier lié. Si l'horodatage change, le navigateur pensera qu'il s'agit d'un nouveau fichier et demandera le dernier fichier au serveur.
<script src="example2014-6-17.js">
</script>//如果是JSP，可以用EL表达式来取时间戳信息，这样管理更加方便
<script src="example${your time param}.js">
</script>//或者这样的写法更优秀：
<script src="example.js?time=2014-6-7"></script>
<script src="example.js?time=${your time param}"></script>
Compresser les fichiers fusionnés
Tous les fichiers impliquant des données de requête doivent être compressés autant que possible, par exemple comme les fichiers Javascript, les fichiers CSS et les fichiers image, en particulier les fichiers image, s'il n'y a pas d'exigence de haute définition, ils peuvent être compressés avant utilisation.
Un petit nombre de gros fichiers se charge plus rapidement qu'un grand nombre de petits fichiers, vous pouvez donc parfois envisager de fusionner plusieurs fichiers js et plusieurs fichiers css ensemble.
En plus de réduire la taille des documents HTML, vous pouvez également adopter les méthodes suivantes :
① Supprimer les espaces, les lignes vides et les commentaires qui n'ont aucun impact sur les résultats d'exécution des documents HTM
②Évitez la mise en page du tableau
③Utilisez HTML5
--HTML+CSS3+Javascript effectuent leurs propres tâches
Laissez les trois éléments s'exécuter leurs propres tâches Créer des pages Web performantes : HTML est la base de la page et la source du contenu, avec lui, il peut interagir avec CSS et Javascript ; CSS3 peut être considéré comme un maître de la présentation, et le CSS de plus en plus puissant. peut remplacer Javascript pour effectuer de nombreuses choses dynamiques telles que les dégradés, les effets mobiles et autres ; Javascript est le roi des données dynamiques. Les anciens navigateurs s'appuyaient sur js pour compléter l'affichage des effets dynamiques, mais désormais CSS peut également compléter le travail de js. , alors essayez de laisser le travail au CSS, ce qui permettra d'obtenir de meilleures performances . (C'est un peu gros)
--La fusion d'images implémente les Sprites CSS
La fusion d'images consiste en fait à intégrer certaines images d'arrière-plan de la page Web dans un seul fichier image. Utilisez ensuite la combinaison de CSS "background-image", "background-repeat" et "background-position" pour positionner l'arrière-plan. La position d'arrière-plan peut utiliser des nombres pour localiser avec précision la position de l'image d'arrière-plan.
Si une page utilise plusieurs icônes, vous pouvez fusionner plusieurs icônes en une seule image. Il vous suffit ensuite d'envoyer une demande d'image une seule fois et de diviser les icônes via le positionnement CSS.
--Évitez d'utiliser Iframe
使用iframe并不会增加同域名下的并行下载数，浏览器对同域名的连接总是共享浏览器级别的连接池，在页面加载过程中iframe元素还会阻塞父文档onload事件的触发。并且iframe是html标签中最消耗资源的标签，它的开销比p、SCRIPT、STYLE等DOM高1~2个数量级。
避免onload事件被阻塞，可使用JavaScript动态的加载iframe元素或动态设置iframe的src属性（但其仅在高级浏览器IE9及以上有效）。
<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");--多域名请求
一般来说，浏览器对于相同域名的图片，最多用2-4个线程并行下载（不同浏览器的并发下载数是不同的）。而相同域名的其他图片，则要等到其他图片下载完后才会开始下载。
有时候，图片数据太多，一些公司的解决方法是将图片数据分到多个域名的服务器上，这在一方面是将服务器的请求压力分到多个硬件服务器上，另一方面，是利用了浏览器的特性。（大家可以去新浪、腾讯门户网站查看，这些大型站点同一页面加载的图片可能由多个站点提供）
注：一个HTML请求的域名也不要太多（2~3个差不多），多了可能造成不同服务器连接时间差异，反而影响速度。
--避免空链接属性
如624a480c6387e73c22b4f60ddcc0f14e8fb0647cc270c6c60ce1679670afa6fc这样的设置方式是非常不可取的，即使链接为空，在旧的浏览器也会以固定步骤发送请求信息。
另外9dba6f1f949f5e07bed667bf670fd9c45db79b134e9f6b82c0b36e0489ee08ed也不可取，最好的方式是在链接中加一个空的js代码af60cb7cd5eb3467eaa609628cdd0ba95db79b134e9f6b82c0b36e0489ee08ed
--使用图像的BASE64编码
base64是一串字符串，他可以代表一个图片的所有信息，也就是可以通过09522e18412c10a262484dd8ba0b09ee（S表示一串base64码）来显示图片，这种方式不需要再向服务器发送请求，完全由浏览器解析成图片。
目前高级浏览器都支持此功能，但要注意两点：①低版本浏览器（如IE7）不支持；②base64字符串长度随图片的大小及复杂度成正比，base64也像URL一样，也有超出长度的情况（在IE8下很常见）。所以要根据情况来使用。
--显式设置图片的宽高
如果HTML里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再“回溯”该图片并重新显示，这会消耗额外时间。
<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");--显式指定文档字符集
如果浏览器不能获知页面的编码字符集，一般都会在执行脚本和渲染页面前，把字节流缓存，然后再搜索可进行解析的字符集，或以默认的字符集来解析页面代码，这会导致消耗不必要的时间。
<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");--渐进式增强设计
渐进式增强设计的通俗解释就是：首先写一段满足所有浏览器的基本样式，再在后面针对不同高级浏览器编写更漂亮的样式
如下代码，所有浏览器都支持background-color: #2067f5;满足了浏览器基本现实需求，而后面的background-image: -webkit-gradient等则为不同高级浏览器使用，只要浏览器识别就能执行这段代码（不识别，CSS也不会报错只会直接忽略）。
<p class="someClass"></p>
.someClass
{ width: 100px;
height: 100px;
background-color: #2067f5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2067f5),
to(#154096));
background-image: -webkit-linear-gradient(top, #2067f5, #154096);
background-image: -moz-linear-gradient(top, #2067f5, #154096);
background-image: -ms-linear-gradient(top, #2067f5, #154096);
background-image: -o-linear-gradient(top, #2067f5, #154096);
background-image: linear-gradient(to bottom, #2067f5, #154096);
}--懒加载与预加载
预加载和懒加载，是一种改善用户体验的策略，它实际上并不能提高程序性能，但是却可以明显改善用户体验或减轻服务器压力。
预加载表示当前用户在请求到需要的数据之后，页面自动预加载下一次用户可能要看的数据，这样用户下一次操作的时候就立刻呈现，依次类推。
懒加载表示用户请求什么再显示什么，如果一个请求要响应的时间非常长，就不推荐懒加载。
--Flush机制
Lorsqu'une page est très volumineuse et contient beaucoup de contenu, elle peut être renvoyée à la page par parties sous forme de flush. Cela peut indiquer à l'utilisateur que je travaille et que l'affichage d'une partie du contenu est bien meilleur que. attendre longtemps avec un écran vide. Dans la technologie Web Java, l'implémentation de Flush est très simple. Il suffit d'appeler la méthode flush du flux de sortie HttpServletResponse.getWriter pour réécrire le contenu chargé sur le client.
Cette méthode ne convient que pour les situations où il y a beaucoup de données renvoyées et où le temps de requête est particulièrement long. Pour les données régulières, il est préférable de renvoyer toutes les données en temps réel normal. Cette méthode de mise en œuvre augmentera en fait le temps de rendu du navigateur et le temps d'attente global de l'utilisateur, mais elle sera meilleure en termes d'expérience utilisateur.
Optimisation des performances du serveur
--Mécanisme CDN
Le soi-disant CDN est un Un réseau de distribution de contenu qui utilise une technologie intelligente de routage et de gestion du trafic pour découvrir rapidement le nœud d'accélération qui peut fournir la réponse la plus rapide aux visiteurs, et dirige la demande du visiteur vers le nœud d'accélération, qui fournit des services de contenu.
En termes simples, vous achetez un produit auprès d'un vendeur pékinois (serveur) à Chengdu (navigateur), et le vendeur pékinois envoie le colis par livraison express (service CDN). Vous pouvez marcher, prendre une voiture ou. train de Pékin à Chengdu ou avion, et la livraison express via CND choisira l'avion direct car cette méthode d'expédition est la plus rapide.
Bien sûr, il y a deux choses à noter lors de l'utilisation du CDN :
1. Les services d'accélération CDN sont très chers. Si vous pensez que votre site Web mérite une accélération, vous pouvez choisir de l'acheter ;
2. Le CDN n'est pas adapté aux sites Web locaux. Par exemple, votre site Web n'est accessible qu'à partir d'une certaine zone ou d'un réseau local, car le réseau régional est déjà très proche et ne nécessite pas d'accélération CDN.
--Utilisation appropriée du protocole HTTP
L'amélioration des performances apportée par la mise en cache du navigateur est déjà connue de tous, mais beaucoup de gens ne sont pas conscients du délai d'expiration de la mise en cache du navigateur, la suppression du cache, les pages qui peuvent être mises en cache, etc. peuvent tous être contrôlés par nos programmeurs. Tant que vous êtes familier avec le protocole HTTP, vous pouvez facilement contrôler le navigateur.
Lecture approfondie : Compréhension approfondie du protocole HTTP
--Séparation du dynamique et du statique
La soi-disant séparation du dynamique et du statique static consiste à séparer le statique et le statique dans les applications Web. Le contenu est placé sur différents serveurs Web et le contenu dynamique et statique est traité de manière ciblée pour améliorer les performances. Nous savons que si un HTML a plusieurs noms de domaine, les demandes de fichiers de données augmenteront.
Le serveur Tomcat est relativement faible dans la gestion des problèmes statiques et de concurrence, donc la méthode de séparation statique et dynamique à l'avance est généralement Apache+Tomcat, Nginx+Tomcat, etc.
En prenant Apache+Tomcat comme exemple, son mécanisme de fonctionnement est le suivant : la demande de page est d'abord envoyée à Apache, puis Apache analyse si les informations de la demande sont statiques ou dynamiques. Le traitement statique est effectué localement, et le traitement dynamique. est remis à Tomcat.
Il s'agit en fait du prototype d'équilibrage de charge. Cette implémentation ne nécessite aucun développement particulier des développeurs. Un ad9fd35425518ae8aa6a6d6c2800cfa8 ce fichier, il provient d'Apache, l'obtient toujours de Tomcat, les développeurs n'ont donc pas du tout besoin d'y prêter attention.
--Connexion persistante HTTP
La connexion persistante (Keep-Alive) est également appelée connexion longue. C'est une méthode de connexion TCP. le navigateur et mise en cache par le serveur, la connexion mise en cache est réutilisée lors de votre prochaine connexion au même serveur. La nature sans état de HTTP signifie qu'il n'appartient pas aux connexions longues, mais HTTP/1.1 prend en charge les connexions longues (mais cela doit s'appuyer à la fois sur le navigateur et sur le serveur pour prendre en charge la fonction de connexion longue. L'exemple le plus courant de HTTP). les connexions longues sont "Téléchargement du point d'arrêt".
Le navigateur ajoute Connection:Keep-Alive à l'en-tête de la requête pour indiquer au serveur "Je prends en charge les connexions longues. Si vous le prenez en charge, établissez simplement une connexion longue avec moi." connexions, puis ajoutez "Connection:Keep-Alive" à l'en-tête de réponse pour indiquer au navigateur "Je le prends en charge, alors établissons une longue connexion." Le serveur peut également indiquer au navigateur le long délai d'expiration de la connexion via l'en-tête Keep-Alive:timeout=..., max=....
La configuration de connexions longues nécessite généralement des paramètres de prise en charge du serveur. Les données de test montrent que la comparaison des performances entre l'utilisation de connexions longues et la non-utilisation de connexions longues. Pour Tomcat configuré avec maxKeepAliveRequests de 50, l'efficacité a augmenté de près de 5 fois.
--Technologie de compression GZIP
Le protocole HTTP prend en charge le format de compression GZIP Lorsque l'en-tête d'informations HTML renvoyé par le serveur contient Content-Encoding:gzip, il l'indique. Dans le navigateur du navigateur, les données de retour de cette réponse ont été compressées au format GZIP. Une fois que le navigateur a obtenu les données, il doit effectuer une opération de décompression, ce qui réduit dans une certaine mesure la pression sur le serveur pour transmettre les données.
很多服务器已经支持通过配置来自动将HTML信息压缩成GZIP，比如tomcat、又比如很火的Nginx。如果无法配置服务器级别的GZIP压缩机制，可以改为程序压缩。
// 监视对 gzipCategory 文件夹的请求
@WebFilter(urlPatterns = { "/gzipCategory/*" })
public class GZIPFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
String parameter = request.getParameter("gzip");
// 判断是否包含了 Accept-Encoding 请求头部
HttpServletRequest s = (HttpServletRequest)request;
String header = s.getHeader("Accept-Encoding");
//"1".equals(parameter) 只是为了控制，如果传入 gzip=1，才执行压缩，目的是测试用
if ("1".equals(parameter) && header != null && header.toLowerCase().contains("gzip")) {
HttpServletResponse resp = (HttpServletResponse) response;
final ByteArrayOutputStream buffer = new ByteArrayOutputStream();
HttpServletResponseWrapper hsrw = new HttpServletResponseWrapper(
resp) {
@Override
public PrintWriter getWriter() throws IOException {
return new PrintWriter(new OutputStreamWriter(buffer,
getCharacterEncoding()));
}
@Override
public ServletOutputStream getOutputStream() throws IOException {
return new ServletOutputStream() {
@Override
public void write(int b) throws IOException {
buffer.write(b);
}
};
}
};
chain.doFilter(request, hsrw);
byte[] gzipData = gzip(buffer.toByteArray());
resp.addHeader("Content-Encoding", "gzip");
resp.setContentLength(gzipData.length);
ServletOutputStream output = response.getOutputStream();
output.write(gzipData);
output.flush();
} else {
chain.doFilter(request, response);
}
}
// 用 GZIP 压缩字节数组
private byte[] gzip(byte[] data) {
ByteArrayOutputStream byteOutput = new ByteArrayOutputStream(10240);
GZIPOutputStream output = null;
try {
output = new GZIPOutputStream(byteOutput);
output.write(data);
} catch (IOException e) {
} finally {
try {
output.close();
} catch (IOException e) {
}
}
return byteOutput.toByteArray();
}
……
}总结
细节决定成败，系统慢是由一个又一个不良的小细节造成的，所以开发初期做好充足的准备，开发中认真负责、不偷工减料，维护期更要注重代码质量，这样才能让我们的系统稳定高效。
个人觉得一个产品的新版本质量可以从核心js文件看出来：如果核心js文件大小比上一版本大太多，明显在性能上就会有问题，我们要争做像谷歌、亚马逊这样优秀的团队--能够在功能升级的同时减小核心js文件大小。
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!