What do browsers have?

Technical straight star 2021-09-15 09:08:36

What front-end personnel most often contact is browser , No matter what page we usually write ,F12 Check it out Element, Or write js Function debugging Console, Or used to debug the interface Network. But what else does our browser have , Because this is also a big content , So I set up a special column to introduce , Today, let's talk about his composition , To lay the foundation for the specific principle and mechanism in the future .

The main functions of the browser

The main function of the browser is to input the information entered by the user web Resources are displayed graphically , The general resource format is HTML Format . User use URI(Uniform Resource Identifier Uniform resource identifiers ) To specify the location of the requested resource . That's when the user enters URL What does the post browser do ? We have to understand what the browser has .

The composition of the browser

  1. The user interface
  2. Browser engine
  3. Rendering engine
  4. The Internet
  5. Show the back end
  6. JS Interpreter
  7. Data persistence layer

The user interface (User Interface)

In addition to the pages displayed in the browser window , What other users see belongs to The user interface , such as : Address bar 、 Bookmarks 、 Preferences 、 The avatars ( Browser with login function )、 Forward / back off / Refresh 、 Downloader wait . It is a functional component for users to interact with the browser itself .

Browser engine (Browser Engine)

In the user interface and Rendering engine Transfer instructions between , yes Rendering engine An interface of .
Used to load the specified URI, Make progress 、 back off 、 Refresh and other functions .
Used to query / modify Rendering engine Set up .

Rendering engine (Rendering Engine)

It is the most important module of the browser , Responsible for the designated URI Generate a visual interface , analysis html,css And resources such as pictures .
In fact, the process of parsing is the most important thing we should understand and pay attention to : backflow , Repaint ,cssom,DOM Trees , The sequence of execution of different threads on a process, etc . I will write these one after another , Please also pay attention and look forward to .
Rendering engine Also known as Browser kernel , There are five common kernels on the market :

  1. Trident Common browsers :IE,360 Secure browser (1.0-5.0 by Trident,6.0 by Trident+Webkit) Cheetah browser .
  2. Gecko Common browsers : Firefox
  3. Presto Common browsers :Opera Early use of browsers , At present, it is abandoned due to compatibility and other problems .
  4. Webkit Common browsers : Google browser ,Safari, Mobile phone browser .
  5. Blink Common browsers : Google ,Opera, It's Google and Opera Jointly developed .

The Internet (Networking)

Realization http/https,FTP File transfer protocol . You can convert between different character sets . You can also cache recently retrieved resources . Here comes a topic :
1. Browser caching mechanism , The main thing is http cache , Among them Strong cache , Negotiate the cache What are the differences , How to perform .
2.http/https difference ,get,post Equal request

Show the back end (Display Backend)

Draw a collection of user interface controls , Combo box ( A drop-down box , List box ), Font collection, etc . for example input Different from type The style of , The bottom layer uses the user interface of the operating system .

JS Interpreter

To explain , perform JavaScript Code . stay ES6 Before , Rendering engine and JS Interpreter Work together . What we often mention is Webkit, Namely WebCore Typesetting engine and JavaScriptCore Composition of parsing engine , but Chrome Script parsing is developed by ourselves V8 engine .
It leads to some topics :
1. Rendering engine and Js Interpreter Work together , The event loop .
2.Js Interpreter Medium Garbage collection mechanism .
3.V8 in Interpreter , Parser , optimizing compiler How it works . perform Js when , Parser Analytic AST, Bytecode , lexing , Syntax parsing and so on .

Data persistence layer (Data Persistence)

The data saved by the browser on the hard disk :
1. Bookmarks 、 Advanced data such as toolbar settings .
2.Cookie, A security certificate 、 Cache and other low-level data .
We should pay more attention to their cache :Local Storage,Session Storage,indexedDB,Web SQL. These are all HTML5 As defined in the specification . In the future, I will take out a chapter to describe and compare them .

The user entered URL What does the post browser do ?

This is also a classic interview question . The answer can be rough or detailed . Roughly speaking here , Because detailed explanation can tear down many articles .
1.DNS Domain name resolution ;
2. establish TCP Connect ;
3. send out HTTP request ;
4. Server processing request ;
5. Return the response result ;
6. close TCP Connect ;
7. Browser parsing HTML And layout rendering ;

DNS Domain name resolution

DNS Try to parse the semantic domain name , Become a server ip Address .
1. First find... In the browser DNS cache , Is there a domain name corresponding to ip.
2. Not looking for... From the operating system .
3. The system has no corresponding ip, Use recursive or iterative query , In order to Root domain server Top-level domain server Authoritative domain name server Initiate a query request , Until you find one or a group IP Address , Back to the browser .

establish TCP Connect

To find the corresponding ip after , You need to shake hands with the server three times , establish TCP Connect .
We can talk about... Later TCP Three handshakes , Four waves ,UDP No connection protocol , Characteristics and differences between .

send out HTTP request

The browser starts sending HTTP request , A request message is sent by the request line 、 Request header 、 Blank line 、 Entity (Get The request did not ) form .

Server processing request

After the browser request message arrives at the server , The server interface will process the request message , Execute the code corresponding to the interface , Respond to the client after processing .

Return the response result

The browser processes the returned results . When the message header sent by the client accept( The type of data the client expects , This is the request header automatically encapsulated by the browser ), If the server returns content-type yes accept Any one of them , Browsers can parse , And show it directly on the web page .

close TCP Connect

  1. The server sends... To the client Alert message , The type is Close Notify, Notify the client that it will no longer send data , Closing connection , Again , This message is also encrypted .
  2. The server calls close Function actively closes the connection , Send to client with FIN Grouping of flag bits , Serial number for m.
  3. The Client acknowledges receipt of the packet , Send to the server with ACK Grouping of flag bits , The confirmation number is m+1.
  4. After the client sends all the data , Send to the server with FIN Grouping of flag bits , Serial number for n.
  5. The server acknowledges receipt of the packet , Send to client with ACK Grouping of flag bits , Serial number for n+1. After the client receives the confirmation packet , Enter immediately CLOSED state ; meanwhile , The server is waiting 2 individual MSL(Maximum Segment Lifetime, Maximum message lifetime ) After , Get into CLOSED state .

Browser parsing HTML And layout rendering

The browser parses HTML, Generate DOM Trees , analysis CSS, Generate CSS The rule tree , And then through DOM Trees and CSS Rule trees generate render trees . This is about Rendering engine The work of , Let's take an article to describe it .\

thus , The general introduction to the browser is completed , At the same time, it also causes many problems :
1. Browser caching mechanism .
2.http/https The difference in agreement .
3.GET/POST And other requests
4. Browser garbage collection mechanism .
5. Rendering engine ,Js How does the interpreter work .
6.Event Loop.
7.V8 How the script engine works .
8. Browser storage mechanisms .
How interesting the front end is , A browser is enough for us to explore so deeply . Please pay attention to me , I'll make up these articles .
If this article is helpful or enlightening , That would be my pleasure
本文为[Technical straight star]所创,转载请带上原文链接,感谢

  1. Contrôle de l'arbre en vue converti en style de table
  2. CSS3 animation flash Effect
  3. Discuter des propriétés de la file d'attente pour l'événement bloc
  4. Node around USModules
  5. Webpack - - Premier aperçu (concept de base)
  6. Mise en œuvre du cadre de base mvvm par JS natif
  7. Calculer les propriétés par rapport aux auditeurs, etc.
  8. Configuration standard dockerfile et docker-composer.yml
  9. Collection de questions d'entrevue HTML
  10. Conteneur, définir la largeur et la hauteur ne répond pas?
  11. Introduction et syntaxe des objets (mise à jour à long terme)
  12. Bubble Mart invests in cat galaxy, which is a vertical e-commerce platform around the quadratic element
  13. Exigences et dépendances dans package-lock.json
  14. Mouvement tridimensionnel de la terre, du ciel et de la lune basé sur three.js
  15. Compréhension et analyse de l'objet de base JS
  16. Simple use of status data management (context, mobx, Redux)
  17. Simulated drumming
  18. Array method
  19. Performance optimization issue 03 - HTTP request optimization
  20. Vue learning -- watch listener
  21. Learn more about nexttick in Vue
  22. Talk about some moves used by vue3.0 in the project - External skill chapter (I)
  23. JavaScript genrator generator
  24. La dernière réponse à l'entrevue de développement Android, l'hiver froid de l'industrie
  25. Maserati's motorcycle has less than 10 in the world. It is definitely a work of art
  26. 2021 partage des questions du dernier examen écrit d'entrevue Android, pas d'accord
  27. Programmation asynchrone Java scirp, développement frontal de base
  28. 2021 dernier examen écrit d'entrevue Android, écrit trop bien
  29. Quels aspects doivent être pris en considération dans le tableau principal du distributeur libre - service?
  30. He inherited his mother's hundreds of millions of property for his boyfriend to squander. Unexpectedly, he was ruthlessly abandoned when he had 100 yuan left
  31. The fuel cost is half less than that of fuel vehicles at the same level. Is it really cheap to use song Pro DM?
  32. Le dernier résumé de l'expérience d'entrevue d'embauche de l'école Android de l'usine est nécessaire pour l'usine
  33. Le dernier dictionnaire avancé de programmeurs d'usine, l'expérience d'entrevue d'embauche de l'Agence de développement Android
  34. La dernière collection d'entrevues Android Golden nine Silver ten
  35. L'expérience d'entrevue de l'Ingénieur d'algorithme de saut d'octets, 2 mois d'entrevue Tencent, station B, Netease et ainsi de suite sur 11 entreprises résumé!
  36. La dernière collection d'entrevues d'Android Golden nine Silver ten recommande un projet github
  37. Yuan Li's recent situation revealed that he was obsessed with public welfare, dressed simply and fearless, grew fat, and married an 11-year-old husband
  38. Initial experience of template tool plop of [front end Engineering]
  39. Dernière question d'entrevue avancée et réponse d'Alibaba Android, Alibaba P8 vous apprendra en personne
  40. Partage des dernières questions d'entrevue pour Android haute fréquence, Introduction aux compétences d'entrevue pour le développement d'Android
  41. Partager les dernières questions d'entrevue Android haute fréquence avec quelques conseils
  42. About JavaScript modules
  43. Iteratable object and class arrays
  44. Function realization of Vue elementui exporting excel form
  45. Use canvas to realize a small screenshot function
  46. Object oriented programming (2)
  47. Several common value transfer methods between Vue components
  48. Démarrer avec le serveur de base zéro: Hello World
  49. J'a I construit un escalier pour aller sur la lune, combien de façons puis - je poursuivre la sœur Chang'e?
  50. CSS implémente la fonction d'expansion et d'arrimage du Texte multiligne
  51. Varlet CLI | vue3 Component Library Quick Prototyping Tool
  52. Belle vue sur les trois rivières Xiapu
  53. La partie Web qui déploie SharePoint ajoute son propre module de fonctionnalité
  54. React Native (mise à jour à long terme)
  55. La conception et le codage de l'arbre binaire requis pour chaque entrevue d'embauche de la société Java millet;
  56. 10 jours pour obtenir l'offre d'emploi Android d'Alibaba, entrevue Android
  57. A remporté avec succès Byte, Tencent, Pulse offer, 7 ans Java une expérience d'entrevue de baise,
  58. 10大前端常用算法,web应用与开发
  59. Nginx - minimum configuration! You deserve it
  60. Les questions d'entrevue couramment utilisées pour le cadre Java sont - elles prometteuses pour le développement Java?