Les performances et la sécurité du front-end sont plus importantes et sont souvent mentionnées.
Quelques compréhensions personnelles :
Performances
Fusion de fichiers
Compression de fichiers
Image de sprite
gzip [Généralement configuré sur nginx ou Apache en backend, j'ai l'impression que le front end est hors de question]
Chargement dynamique
cdn (Généralement, il y a du personnel dédié du côté exploitation et maintenance, pas du front end)
Sécurité
injection SQL [attaque intersite]
Question :
Veuillez partager votre expérience et la résumer. Merci!
Performance :
Principe 1 : Réduire les requêtes http, fusionner les images, les fichiers CSS
Principe 2 : Utilisation du cache : utiliser CDN, utiliser des js et css externes, ajouter Exp. ires, réduisez les requêtes DNS, configurez Etag et utilisez la mise en cache Ajax.
Principe 3 : Demander de la bande passante : activez GZIP, rationalisez js, supprimez les scripts en double et optimisez les images.
Principe 4 : Structure des pages : mettez les styles en tête, et js en bas, actualisez la sortie du document dès que possible
Principe 5. Évitez les expressions CSS et évitez les redirections
En fait, à partir de scénarios métiers spécifiques, vous comprendrez plus profondément. Par exemple, la page de résultats de recherche
Sécurité :
XSS
Il se trouve que je me prépare pour une interview récemment, alors j'ai compilé certaines de mes propres opinions
Performances
demande http
L'idée principale de la réduction des requêtes http est de réduire le nombre de ressources liées au sein du document HTML :
Lorsque le projet sera mis en ligne,
CSS
`JavaScript` et d'autres fichiers seront compressés, fusionnés et empaquetés pour réduire le nombre et la taille des fichiers sourceCSS
`JavaScript`等文件压缩合并打包,减少源文件的数量和体积将多张小图片制作成精灵图
将资源转换为
base64
编码使用缓存可以加快网页打开速度,有效减少http请求
使用懒加载,按需加载对应资源
页面打开速度
使用CDN加载资源
将CSS放在页面头部,防止页面闪烁
将JavaScript异步或延迟加载,防止JavaScript运行阻塞页面加载
延迟请求首屏外的文件,即优先加载首屏内容。
执行效率
选择器从右向左解析,嵌套顺序不宜过深
JavaScript中减少作用域链的查找,避免使用
eval
和Function
等性能缓慢的接口DOM操作的代价是十分昂贵的,可以使用
DocumentFragment
base64
L'utilisation du cache peut accélérer l'ouverture des pages Web et réduire efficacement les requêtes http
Utilisez le chargement différé pour charger les ressources correspondantes à la demande
eval
etFunction
🎜🎜 🎜🎜Les opérations DOM sont très coûteuses. Vous pouvez utiliserDocumentFragment
pour stocker temporairement les nœuds insérés dans le document en même temps🎜🎜 🎜 🎜Sécurité frontale🎜 🎜La sécurité frontale fait principalement référence aux problèmes de sécurité qui affectent indirectement les données des utilisateurs via le navigateur. 🎜 🎜XSS🎜 🎜Le Cross Site Scripting fait référence à un attaquant malveillant qui insère du code de script malveillant dans une page Web. Lorsqu'un utilisateur parcourt la page, le code de script intégré dans le Web sera exécuté, atteignant ainsi l'objectif d'attaquer l'utilisateur de manière malveillante, comme le voler. les cookies des utilisateurs. 🎜Le problème avec XSS est de trouver des vulnérabilités qui peuvent être insérées dans le site Web cible pour exécuter des scripts. Par exemple, si un certain élément de contenu d'édition est directement stocké dans la base de données sans traiter la saisie de l'utilisateur, alors lorsque l'utilisateur accède à la page. , le script malveillant sera affiché sur la page. Des attaques correspondantes pourront être effectuées. 🎜 🎜CSRF🎜 🎜Faux de demande intersite, par exemple, la fonction de suppression d'article du site Web cible reçoit une demande de suppression d'article d'un client de site Web malveillant. Cette demande est intersite et falsifiée (pas l'intention de l'utilisateur du site Web cible). 🎜La méthode d'implémentation consiste à construire d'abord une requête GET sur le site Web malveillant (en raison de la restriction de même origine d'Ajax, vous pouvez utiliser la requête src d'img, etc.), puis à tromper l'utilisateur du site Web cible pour qu'il accède au site malveillant. site Web, puis la demande correspondante sera lancée lors de l'accès (et avec les informations d'identification de l'utilisateur correspondantes telles que les cookies), des attaques se produiront également à ce moment-là🎜 🎜Détournement d'opération d'interface🎜 🎜Faux d'interface, vol d'informations utilisateur, etc...🎜La compression de code de performance, la compression d'image, la réduction des requêtes http, l'asynchrone ajax, etc. sont toutes bénéfiques pour les performances
Code de cryptage XXS sécurisé