À partir de [Bytecode cache] et de [http cache], intervieweur: « est - ce si mince? »

Nugget Anthony 2021-10-13 09:28:07
partir bytecode cache et http


Petite connaissance,Grand défi!Cet article participe「Les programmeurs ont besoin de peu de connaissances」Activités créatives

Cet article a été impliqué dans 「Le programme Nugget Star」 ,.Gagner un grand sac cadeau pour la création,Remise en question des incitatifs à la création.

Cache Bytecode

Qu'est - ce qu'un cache Bytecode?

Cache Bytecode(Bytecode Cache),Est un élément important du mécanisme d'optimisation des performances du navigateur,Par cache Analyse(pasing)+Compiler(compilation)Les résultats de,Réduire le temps de démarrage du site;Les principaux navigateurs actuellement disponibles sur le marché ont la fonction de cache Bytecode;

Par Chrome Par exemple,V8 La méthode de génération directe de code machine binaire a été utilisée au début,C'est - à - dire::

js Code source => AST Arbre de syntaxe abstrait => Binaires

image.png

Bien que le cache de code binaire ait également été utilisé à l'époque ( Cache en mémoire et sur disque dur ) Pour éviter de répéter le temps de compilation ;

Mais, Le problème avec le code binaire est que :1. Grande consommation de mémoire;2. Grande complexité du Code;3. La compilation paresseuse ne cache que le Code externe ;

Alors,Et puis V8 L'architecture Bytecode a également été introduite :

js Code source => AST Arbre de syntaxe abstrait => Bytecode => Binaires

image.png

L'avantage de l'introduction du Bytecode est :1. Faible consommation de mémoire;2. Compiler rapidement 、Démarre!;3. Réduire la complexité du Code;

Sauf que Google,Les pairs Mozilla Le mécanisme de cache Bytecode est également appliqué ; Pour en savoir plus, consultez le site officiel blog Introduction: 《Mozilla - JavaScript Démarrer le cache Bytecode 》

image.png

image.png

Et a également comparé Si activé JSBC(The JavaScript Startup Bytecode Cache) Statistiques de performance sur les principaux sites Web :

image.png

Politique de cache à deux niveaux

Positif ouvert —— Politique de cache à deux niveaux !

En fait,,Pour V8 Code byte compilé,Chrome Il existe une politique de cache à deux niveaux :

  1. Isolate Cache mémoire;
  2. Cache de disque dur entièrement sérialisé ;

1. Isolate Cache mémoire:

Isolate Le cache se produit dans le même processus ( Sur la même page ), Il tente d'utiliser le plus rapidement et le plus petit possible les données déjà disponibles ;

Son inconvénient est que :a. Faible taux de succès (80%);b. Impossible de traverser les processus;

Quand V8 Lors de la compilation du script , Le script compilé est stocké dans un hashtable Moyenne(In V8 Dans la pile),Quand Chrome Exigences V8 Lors de la compilation d'autres scripts ,V8 Vérifiez d'abord si la source du script correspond hashtable Valeur en.Si oui, Renvoie le code byte existant .

2. Cache de disque dur entièrement sérialisé :

La mise en cache du disque dur est faite par Chrome Gestion( Exactement par Blink ), Il est rempli de  Isolate  Le cache ne peut pas être dans plus d'un processus ou Chrome Espace vide dans le cache de code partagé entre les sessions .

Il utilise les HTTP Cache de ressources, Gérer à partir de Web Données mises en cache et expirées reçues , Le processus spécifique est :

Quand on demande pour la première fois JS Documentation(C'est - à - dire: cold run)Heure,Chrome Il sera téléchargé et remis à V8 Pour compiler. Il stocke également les fichiers dans le Cache disque de votre navigateur .

Quand la deuxième demande JS Documentation(C'est - à - dire: warm run)Heure,Chrome Le fichier est obtenu à partir du cache du navigateur , Et le remettre à V8 Pour compiler.Et pourtant, Le Code compilé cette fois est sérialisé , .Et joint comme métadonnées au fichier de script mis en cache .

Troisième(C'est - à - dire: hot run),Chrome Obtenir les métadonnées des fichiers et des fichiers du cache , Et donne les deux à V8.V8 Désérialiser les métadonnées et sauter la compilation .

image.png

In warm run Utiliser le cache de mémoire ,In hot run Utiliser le cache de disque ;

Regarde encore HTTP Cache

Connaissez - vous et connaissez - vous les uns les autres?、Une centaine de batailles ne sont pas perdues!

Sur la base de【Cache Bytecode】Et 【 Politique de cache à deux niveaux 】Cognition, Nous aurons une idée plus claire de l'utilisation du mécanisme de mise en cache du Navigateur pour améliorer les performances de chargement du site !

Rappelez - vous cette question sur la mise en cache 、 Négocier un organigramme de cache ?

image.png

Du point de vue du cache Bytecode , Nous pouvons donner plus de détails à l'intervieweur !

Lorsque le serveur retourne 304 Not Modified Heure, Notre cache Bytecode reste warm run( Course au chaud ) Ou hot run( Fonctionnement à chaud ); Quand le retour est  200 OK Heure, Mettre à jour les ressources du cache , Et effacer le cache Bytecode ,Retour à cold run( Fonctionnement à froid )Statut;(Ouah!!HTTP Mise en cache des fichiers pour une meilleure compréhension !De【Cache de fichiers】À【 Cache Bytecode après compilation du fichier 】Compréhension~)

Alors..., Réduire les changements de code , Est toujours la règle la plus fondamentale et la plus efficace pour utiliser le cache ;

Bien sûr., C'est la même chose que : Ne pas modifier les ressources au hasard URL, Parce que le cache Bytecode et le script URL Liens,Modifier URL, Un nouveau portail de ressources est créé dans la ressource cache du navigateur , Et avec une entrée de cache froide ;

Et 1 Un détail est ,On y va. A/B Au moment du test, Vous pouvez également mettre en cache différentes ressources ,Alors... Assurer la sécurité de fonctionnement , C'est aussi la prémisse pour s'assurer que le cache correspondant peut marcher :

if (Math.random() > 0.5) {
A();
} else {
B();
}
Copier le Code

Et un cliché HTTP Politique de mise en cache: Séparer les bibliothèques tierces stables en fichiers séparés ;

En général,, Nous ne recommandons pas JS Le script est fusionné en un grand bundle Moyenne, Diviser en plusieurs scripts plus petits est souvent plus avantageux pour d'autres raisons que le cache Bytecode (Par exemple:: Plusieurs demandes de réseau 、 Compilation de flux 、 Interaction de page, etc ).

Note:: La limite minimale de taille de fichier pour le cache Bytecode est 1 Kb, Le dossier est trop petit pour ;

Compilation forcée

Mais, Réfléchis bien ici :

Ce n'est que lorsque l'exécution du Code est terminée que le Code compilé est ajouté au cache Bytecode , Il y a donc beaucoup de types de fonctions qui s'exécuteront plus tard , Mais il ne sera pas mis en cache .Par exemple::Gestionnaire d'événements(Même si onload)、promise Chaîne、 Fonctions de bibliothèque inutilisées et quelques autres compilations retardées qui ne sont pas en cours d'exécution à  </script> Précédemment appelé, Sont retardés sans être exécutés , Ils ne sont pas mis en cache sous forme de Bytecode ;

Comment faire??

Oh, mon Dieu.,On peut passer par Exécuter la fonction maintenant(IIFE) Pour les forcer à les compiler !

(function foo() {
// …
})();
Copier le Code

Parce que IIFE L'expression est appelée immédiatement ,La plupart JavaScript Le moteur tentera de les détecter et de les compiler immédiatement , Et faire une compilation complète ;

En raison des différents moyens de détection ,Maintenant, Les fonctions sont compilées même si elles ne sont pas réellement exécutées immédiatement ,Comme suit:

const foo = function() {
// Lazily skipped
};
const bar = (function() {
// Eagerly compiled
});
Copier le Code

( Une seconde. )

service worker Cache

service worker Il y a aussi un mécanisme de cache Bytecode ;

Nous savons que service worker Vous permet de construire des caches de ressources locales , Quand vous envoyez votre demande , Les ressources seront fournies à partir du cache local . Si vous voulez construire une application hors ligne , C'est particulièrement utile ,Par exemple:PWA Application.

Exemple de code:

  • service worker Pour l'installation (Créer une ressource)Et accès( Fournir des ressources à partir d'un cache potentiel ) Gestionnaire d'ajout d'événements .
// sw.js
self.addEventListener('install', (event) => {
async function buildCache() {
const cache = await caches.open(cacheName);
return cache.addAll([
'/main.css',
'/main.mjs',
'/offline.html',
]);
}
event.waitUntil(buildCache());
});
self.addEventListener('fetch', (event) => {
async function cachedFetch(event) {
const cache = await caches.open(cacheName);
let response = await cache.match(event.request);
if (response) return response;
response = await fetch(event.request);
cache.put(event.request, response.clone());
return response;
}
event.respondWith(cachedFetch(event));
});
Copier le Code

Ces caches incluent JS Cache de ressources.Mais... service worker Le cache est principalement utilisé pour PWA,C'est pourquoi il est Chrome De“Automatique” Le mécanisme de mise en cache est légèrement différent ;

service worker Moyenne,Quand JS Lorsque la ressource est ajoutée au cache , Ils créent immédiatement un cache Bytecode ,Cela signifie Le cache Bytecode est disponible lors du deuxième chargement ( Au lieu d'un cache à deux niveaux comme nous l'avons mentionné précédemment qui n'est disponible que lorsqu'il est chargé pour la troisième fois );

Deuxièmement,,service worker Ces scripts ont généré “Total”Cache Bytecode, Il n'y a pas de compilation retardée , Tout est compilé et mis en cache . Cela présente l'avantage d'une performance rapide et prévisible , Aucune dépendance à l'ordre d'exécution , Mais au prix d'une utilisation accrue de la mémoire ;

Votre attention, s'il vous plaît., Cette politique ne s'applique qu'à service worker Cache,Sans objet Cache API Autres utilisations de.En fait,,Maintenant. Cache API Le cache Bytecode n'est pas exécuté .

Résumé des étapes

Ci - dessus, Cet article commence par Qu'est - ce qu'un Bytecode,Et je l'ai dit. Stratégie de mise en cache à deux niveaux pour les bytecodes , Encore une fois Vu du mécanisme de mise en cache du Bytecode HTTP Cache, Donner des conseils correspondants et une compréhension sous différents angles (Core); Encore un détail :Compilation forcée; J'ai fini par service worker CacheMoyenne, Différences dans le cache Bytecode ;

Pour certains développeurs , Cache quelque chose ,Ça marche., Performance ou autre ,loading C'est tout.; Mais après avoir étudié certains des mécanismes internes du navigateur ,On verra.: La raison pour laquelle nous sommes si haut , Parce qu'il a marché sur l'épaule du géant !

06b9e718.gif

ok,Terminé.!

C'est dur d'écrire.,Un peu d'encouragement

Je suis Nugget Anthony.,Numéro public du même nom,Output exposure input,Un aperçu technique de la vie,Au revoir.~

Références

版权声明
本文为[Nugget Anthony]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211013092746969S.html

  1. Nodejs + Serverless实现LaTeX公式渲染服务
  2. Analyse des questions d'entrevue: déstockage des tableaux et complexité temporelle
  3. Flux de données pour l'analyse des sources de vue
  4. Take group photos, sing songs and write blessings... Everyone on the Fuxing train celebrates the national day
  5. React核心 -- React-Hooks
  6. Mise en œuvre du Service de rendu de formule latex par nodejs + serverless
  7. React Core - React Hooks
  8. After autumn, wear less black, white and gray, and choose more gentle "light colors"
  9. Wu Qili sent blessings on the national day. She looked haggard and thin on her own. It was worrying
  10. Grand sens de la vue à la fois, la force dure est excellente, toute la série 2.0t, le film réel 2021 haver h9!
  11. With the blessing of Toyota power, GAC motor's new gs8 is open for pre-sale, starting from 188800 yuan
  12. Test drive Xingyue L: the price is less than 200000, but there are 400000 cards. Is it inevitable to sell more than 10000 a month?
  13. Entrevue de première ligne 3 + 1 tous les jours - jour 909
  14. Entrevue de première ligne 3 + 1 par jour - jour 910
  15. Xiao Zhan's 18 word blessing copy triggered a heated discussion, and fans expressed their attitude and wished the motherland together
  16. Engineering Knowledge Card 005: comment webpack injecte - t - il les ressources JS emballées dans html?
  17. ant design vue 设置表格选择框,全选按钮选不全
  18. 五分钟掌握用Vue脚手架搭建一个完整项目!
  19. 100 questions d'entrevue Python de base partie 2 (41 - 60)
  20. 五分鐘掌握用Vue脚手架搭建一個完整項目!
  21. ant design vue 設置錶格選擇框,全選按鈕選不全
  22. Cinq minutes pour construire un projet complet avec l'échafaudage vue!
  23. La vue de conception ant définit la zone de sélection de la table, le bouton sélectionner tout n'est pas sélectionné
  24. vuex中助手函数的几种使用技巧总结
  25. La nouvelle voiture roule à grande vitesse, le tableau de bord apparaît "tasse de café" prompt, directement au magasin 4S!
  26. Résumé de plusieurs techniques d'utilisation de la fonction Helper dans vuex
  27. Un disciple féminin est venu à guozijian: Zhuo Wenyuan a été complètement noirci, et le frère aîné de sang qi a été blessé par lui!
  28. JavaScript - - quatre façons de juger les types de données
  29. HTTPS|SSL笔记-SSL分手过程(Encrypted Alert)
  30. The film arrangement rate exceeds 40%, and the box office exceeds 390 million in less than two days! Why is Changjin lake?
  31. Nouvelle grande expérience de prise de vue en direct 2022 Geely Howe
  32. Apprenez à connaître CSS - Comment organiser votre code CSS
  33. Can the Zero run C11 with less than 200000 become the leader of medium-sized pure electric SUV?
  34. Https | SSL Notes - SSL break Process (encrypted Alert)
  35. HTTPS|SSL筆記-SSL分手過程(Encrypted Alert)
  36. Récemment, j'a i été interrogé par des fans sur les génériques Java, donc j'ai regardé en arrière et j'espère que l'entrevue de mon frère cadet se passera bien.
  37. Comment utiliser la nouvelle spécification es dans votre projet
  38. JavaScript - - orienté objet
  39. South Korean actress Liu Renna, wearing a white strapless skirt and walking on the red carpet, has a hot body and attracts eyes. She smiles so sweet
  40. Nginx (3): process model
  41. Projet Java: système de gestion du rendement des employés (Java + SSM + MySQL + Maven + HTML)
  42. CSS tips | one line of code to realize the integration of avatar and national flag
  43. Maotai and Paris Fashion Week joined hands to make Chinese elements appear on the show
  44. Wang Xiaoya showed up in a sleeveless skirt and reappeared her intellectual elegance. She was still full of temperament after leaving the nest CCTV
  45. Comment écrire un document de conception frontale
  46. Créer une api javascript haute performance avec Rust et l'exécuter dans webassembly
  47. Analyse de certains principes techniques clés du SDK de surveillance frontale
  48. Point de vue: la NFT de type portrait a formé un modèle d'entreprise. Quelles sont ses perspectives d'avenir et ses difficultés?
  49. Stars celebrate the motherland's birthday in patterns: Tang Yan Bixin, Liu Xiaoqing in military uniform, Zhao Liying and he Jiong send blessings
  50. L'amour entre Wing Mei et Luan Tree: de l'amour à première vue à l'amour éternel
  51. Disappeared car companies: tape measure is useless? Zhongtai is on the verge of death and has no way to return to heaven
  52. BUUCTF [极客大挑战 2019]Http
  53. element缓存到本地使用
  54. How can the volunteer army with less steel and more gas beat the American army with more steel and less gas? Changjin Lake gives you the answer
  55. CentOS installation source package nginx error
  56. Mise en cache des éléments pour utilisation locale
  57. Disappeared car companies: tape measure is useless? Zhongtai is on the verge of death and has no way to return to heaven
  58. He saifei est si naturel!58 ans est si beau, porter des vêtements de vieillesse pour accepter de vieillir!
  59. Finally pregnant! Seven years of pregnancy, collective blessing of the entertainment industry
  60. Wu Qili sent blessings on the national day. She looked haggard and thin on her own. It was worrying