Conseils d'optimisation JavaScript et de développement front-end
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="/static/imghw/default1.png" data-src="images/ui.png" class="lazy" / alt="Conseils d'optimisation JavaScript et de développement front-end" >
</body>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'imageLors 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.
优化还远远没有结束，在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;
}();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;
};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);
})();
};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';
}
}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'}});
2）chrome插件JSON-handle
服务器返回的很多都是JSON格式的数据，通常写好后给你个接口，顺便给你几个demo参数。
在浏览器中打开后，就是一串字符串，但要给人看的话，就得格式化一下了，这个插件就是用来让人看的。
更多Conseils doptimisation JavaScript et de développement front-end相关文章请关注PHP中文网！
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal?
Apr 04, 2025 pm 02:06 PM
Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...
La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents?
Apr 04, 2025 pm 05:12 PM
Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...
