javascript - Des questions ont été posées au front-end sur les performances et la sécurité. Existe-t-il un résumé complet?

Question

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!

Answer 1

1. 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

2. Sécurité :
   XSS

Answer 2

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

Créez plusieurs petites images en sprites

Convertir les ressources en codage 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

Vitesse d'ouverture des pages

🎜🎜Utilisez CDN pour charger des ressources🎜🎜 🎜🎜Placez CSS en tête de page pour éviter le scintillement de la page🎜🎜 🎜🎜Chargez JavaScript de manière asynchrone ou paresseusement pour empêcher JavaScript de s'exécuter et de bloquer le chargement des pages🎜🎜 🎜🎜 Retardez les demandes de fichiers en dehors du premier écran, c'est-à-dire chargez d'abord le contenu du premier écran. 🎜🎜 🎜 🎜Efficacité d'exécution🎜 🎜 🎜🎜Les sélecteurs sont analysés de droite à gauche et l'ordre d'imbrication ne doit pas être trop profond🎜🎜 🎜🎜Réduisez les recherches de chaîne de portée en JavaScript et évitez d'utiliser des interfaces aux performances lentes telles que eval et Function🎜🎜 🎜🎜Les opérations DOM sont très coûteuses. Vous pouvez utiliser DocumentFragment 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...🎜

Answer 3

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é