1. Optimisation du réseau
YSlow a 23 règles auxquelles vous pouvez vous référer ici pour le chinois. L'objectif principal de ces dizaines de règles est d'éliminer ou de réduire les retards inutiles du réseau et de compresser au minimum les données qui doivent être transmises.
1) Fusionner et compresser CSS, JavaScript, images et cache CDN de ressources statiques
Avec l'outil de construction Gulp, vous pouvez effectuer la fusion et la compression ensemble pendant le développement.
La raison de la compression de fusion est la suivante : HTTP 1.x ne permet pas aux données de réponses multiples sur une connexion d'arriver entrelacées (multiplexées), donc une réponse doit être complètement renvoyée avant que la réponse suivante ne commence.
C'est-à-dire que même si le client envoie deux requêtes en même temps et que la ressource CSS est prête en premier, le serveur enverra d'abord la réponse HTML puis délivrera le CSS.
L'utilisation du CDN consiste à permettre aux utilisateurs d'utiliser les ressources les plus proches lors de l'accès et à réduire le temps de transmission aller-retour.
HTTP2.0 améliore de nombreux aspects de HTTP1.x.
2) CSS est placé en haut et JavaScript est placé en bas
CSS peut être téléchargé en parallèle, mais JavaScript provoquera un blocage après le chargement.
Mais il y a toujours des exceptions. Si vous placez le script en ligne après la feuille de style, cela retardera considérablement le téléchargement des ressources (le résultat est que le téléchargement des ressources suivantes ne pourra démarrer que lorsque la feuille de style sera téléchargée). et le script en ligne est exécuté).
En effet, les scripts en ligne peuvent contenir du code qui s'appuie sur les styles de la feuille de style, tel que document.getElementsByClassName().
<head>
<link rel="stylesheet" href="css/all-normal.css" type="text/css" />
</head>
<body>
<div id="content"></div>
<script>
var content = '';
for(i=1; i<1000000; i++)
content += '写入页面';
document.getElementById('content').innerHTML = content;
</script>
<img src="images/ui.png" / alt="Conseils d'optimisation JavaScript et de développement front-end" >
</body>Copier après la connexion
Vérifiez-le via l'outil Chrome ci-dessous :
3) Optimisez la résolution DNS et réduisez les redirections
En créer une pendant le "Événement de sélection de déesse", vous devez accéder à l'openid de l'utilisateur dans WeChat. WeChat doit passer par plusieurs étapes pour obtenir les informations de base de l'utilisateur :
Obtenez d'abord le code, puis obtenez l'openid via le code, et Enfin, sautez pour visiter la page statique.
Étant donné que l'entreprise a divisé ses activités en plusieurs groupes, les trois courtes étapes nécessitent en fait la coopération de trois groupes et plusieurs noms de domaine doivent être redirigés.
L'image ci-dessous est le graphique en cascade avant optimisation, mais ce n'est pas le pire des cas. Parfois, il faut plus de 10 secondes pour accéder à une page statique, ce qui est totalement inacceptable. Dans l'image ci-dessous, 4 noms de domaine. sera redirigé :
Au lieu de passer directement au nom de domaine d'index, passez directement à WeChat pour exploiter le nom de domaine, ce qui réduit le saut d'un nom de domaine. est à nouveau optimisé, mais l'effet n'est toujours pas idéal, ce n'est que quelques secondes.
Enfin, j’ai découvert que la résolution DNS prenait trop de temps lors de l’interaction avec le serveur WeChat ! En dernier recours, ajoutez un enregistrement à l'hôte du serveur et faites-le pointer directement via l'IP.
L'image ci-dessous est le résultat final de l'optimisation. Bien qu'elle ne puisse pas atteindre la deuxième ouverture, elle est au moins acceptable :
2. >
1) Préchargement d'image
Lors d'une « Activité Qiu Mingshan », le préchargement d'image a été utilisé. Il y a plus de 120 images dans cette campagne.
Le processus est très simple, il suffit de répondre aux questions, de commenter les résultats et de les partager.
Ça doit être une idée stupide de charger autant de photos à la fois, j'ai finalement décidé. , Lorsque la page se charge, chargez d'abord quelques images courantes.
Lorsque vous répondez aux questions, la page actuelle préchargera les images sur les pages suivantes pour éviter que les images ne s'affichent pas directement lors de l'accès à la page. Les images ont également été fusionnées de manière appropriée.
Mettez l'adresse du site Web sur gtmetrix.com pour tester. Vous trouverez ci-dessous le graphique final en cascade. Vous pouvez constater que les images se trouvent derrière d'autres ressources statiques, afin que la page puisse être affichée aux utilisateurs le plus tôt possible :
优化还远远没有结束，在Chrome中分别模拟了good 2G、good 3G以及4G后，有结果的情况并不理想。
good 2G：
good 3G：
4G：
还有很大的优化空间可以做，关于这个预加载的原理，可以参考《图片预加载与懒加载》
2）减少分支
在写业务逻辑的时候，经常会用到if else，switch之类的逻辑判断，如果每次都做这么多判断，很容易影响性能。
所以可以通过多种方式来避免过多的判断。
1. 惰性模式
这是在看《JavaScript设计模式》的时候看到的。
减少每次代码执行时的重复性分支判断，通过对对象重定义来屏蔽原对象中的分支判断。
惰性模式分为两种：第一种文件加载后立即执行对象方法来重定义，第二种是当第一次使用方法对象时来重定义。
公司有个页面要提供给第三方APP，但是最终发现第三方APP不能使用localStorage缓存，最终只得做兼容的方式。
但为了避免每次引用方法的时候都做判断，就使用加载后立即重定义：
var getFn = function() {
if (sore.enabled)
return sore.get;
return cookie.get;
}();
var setFn = function() {
if (sore.enabled)
return sore.set;
return cookie.set;
}();Copier après la connexion
2. 建立映射关系
页面中经常需要弹出框提示，后面就自己做了一个，但弹出框会有很多款式。
如果用简单工厂模式创建的话，免不了switch分支判断，后面就直接用赋不同的key，还能缓存起来，只初始化一次。
/**
* 弹出框单例模式
*/
var factories = {};
var DialogFactory = function(type, options) {
if (factories[type])
return factories[type];
return factories[type] = new iDialog(options);
};
/**
* 提示框
*/
var Alert = function(content, options) {
var d = DialogFactory('alert', options);
//其他逻辑省略
return d;
};
/**
* 确认框
*/
var Confirm = function(content, options) {
var d = DialogFactory('confirm', options);
//其他逻辑省略
return d;
};Copier après la connexion
3）第三方代码异步加载
第三方代码，例如百度统计、微信SDK等，这些完全可以在将业务资源加载完后再添加。
/**
* 百度统计设置
*/
util.baidu = function(key) {
global._hmt = global._hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?" + key;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
};Copier après la connexion
4）cookie与localStorage缓存
有了缓存后，就能减少与服务器的通信，在本地操作。
公司有个查违章的业务，在本地添加好车辆后，再次进入页面的时候就需要能直接选择事先添加好的车辆。
最理想的方式就是添加好后，就在本地缓存起来，下次进入直接调取缓存。
我会优先使用localStorage，下面的表格就是对比：
cookie
localStorage
数据生命周期
可设置失效时间除非被清除，否则永久保存
数据大
大约4KB 大约5M
与服务器通信
每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
不参与和服务器的通信
本地存储，之前的历史大概如下图所示：
localStorage在浏览器兼容方面，IE8居然也支持了。
5）事件委托
使用事件委托技术能让你避免对特定的每个节点添加事件监听器。
事件监听器是被添加到它们的父元素上，通过事件冒泡，触发执行。
在开发的时候，经常会出现动态添加元素的情况。
如果每次都重新绑定一次事件，那会有很多多余操作，而绑定在此元素的父级，就只需绑定一次即可。
document.getElementById('ul').onclick = function(e) {
var e = e || window.event,
tar = e.target || e.srcElement;
if (tar.nodeName.toLowerCase() == 'li') {
tar.style.background = 'black';
}
}Copier après la connexion
6）节流与去抖动
节流(throttle)：预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
例如mousemove 事件、window对象的resize和scroll事件。
去抖动(debounce)：当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。
例如文本输入keydown 事件，keyup 事件，做autocomplete等。
节流与去抖动最大的不同的地方就是在计算最后执行时间的方式上。著名的开源工具库underscore中有内置了两个方法。
在做公司内部的一个系统的时候，需要方希望在左右滚动表格的时候，能将第一列固定在最左边，方便查看。
为了让操作能更流畅，我再这里用了节流，有些浏览器会出现卡顿，就得需要增加周期时间。
三、小技巧
1）在手机中打印变量
在移动页面的时候经常需要调试字段，又不能用console.log，每次alert的话，碰到对象就看不到内容了。
只能自己写个小方法来打印出来，JSON.stringify，通过这个方法能够方便的实现功能。
var print = function(obj, space) {
space = space || 4;
var html = JSON.stringify(obj, null, space);
html = html.replace(/\n/g, '<br>').replace(/\s/g, ' ');
var pre = document.createElement('pre');
var div = document.createElement('code');
pre.style.cssText = 'border:1px solid #000;padding:10px;background:#FFF;margin-bottom:20px;';
div.innerHTML = html;
pre.appendChild(div);
var body = document.querySelector('body');
body.insertBefore(pre, body.children[0]);
};
print({a:1, b:'demo', c:{text:'content'}});Copier après la connexion
2）chrome插件JSON-handle
服务器返回的很多都是JSON格式的数据，通常写好后给你个接口，顺便给你几个demo参数。
在浏览器中打开后，就是一串字符串，但要给人看的话，就得格式化一下了，这个插件就是用来让人看的。
更多Conseils doptimisation JavaScript et de développement front-end相关文章请关注PHP中文网！
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
