Browser kernel understanding

  • It mainly consists of two parts:Rendering engine,Js engine
  • Rendering engine:Responsible for getting the content of the page (HTML CSS IMG…) , and calculate how the web page will be displayed, and then output to a monitor or printer. Browser kernels interpret the syntax of web pages differently, so the rendering effect is also different
  • Js engines:Parse and execute javascript to achieve dynamic web pages
  • At the beginning, there was no clear distinction between rendering engine and JS engine. Later, JS engine became more and more independent, and the kernel tended to only value rendering engine
  • IE : tridentThe kernel
  • Firefox: geckoThe kernel
  • Safari : webkitThe kernel
  • Opera: used to beprestoThe kernel,OperaNow switch toGoogle - Chrome 的 BlinkThe kernel
  • Chrome:Blink(based onwebkit ，Google and Opera SoftwareJoint development)

HTTP request scenario

  • GetMethod: Get data usually (view data)- view
  • POSTMethod: Submit data to the server usually (create data)-create
  • PUTMethod: Submit data to the server usually (update data)-update, withPOSTIt’s a very similar approach, it’s submitting data, butPUTSpecifies the location of resources on the server, often used to modify data
  • HEADMethod: Request only the header information of the page
  • DELETEMethod: Delete the resource on the server
  • OPTIONSMethod: Used to get the currentURLSupported request modes
  • TRACEMethod: Used to activate a remote application-layer request message loop
  • CONNECTMethod: Convert the request link to transparentTCP/IPThe passage of

The HTTP status code

  • 1XX: Indicates the information status code
    • 100 continueIn general, when sending a POST request, the server will return this information after the HTTP header has been sent, indicating confirmation, and then send specific parameter information
  • 2XX: Indicates the success status code
    • 200 okNormal return message
    • 201 createdThe request succeeds and the server creates a new resource
    • 202 acceptedThe server has received the request but has not yet processed it
  • 3XX: redirect
    • 301 move perThe requested web page has been permanently redirected
    • 302 foundTemporary redirection
    • 303 see otherTemporarily flush redirects and always request new urls using GET
    • 304 not modifiedThe requested page has not been modified since the last request
  • 4XX: Client error
    • 400 bad requestThe server does not understand the format of the request, and the client should not attempt to initiate the request again with the same content
    • 401 unauthorizedRequest not authorized
    • 403 forbiddenBlocking access
  • 404 not foundCan’t find a resource that matches the URL
  • 5XX: Server error
    • 500 internal server errorThe most common server-side errors
    • 503 service unacailableThe server is temporarily unable to process requests (possibly overloaded live maintenance)

What happens when you enter the URL from the browser address bar?

Basic version

  • 1. Browser based on requestURLtoDNSDomain name resolution, find the realIPTo initiate a request to the server;
  • 2. The server returns data to the background and the browser receives the file(HTML, JS, CSS, images, etc.);
  • 3. Browser to loaded resources(HTML, JS, CSS, etc.)Carry on the grammar analysis, establish the corresponding internal data structure(e.g. HTML DOM);
  • 4. Load the parsed resource file, render the page and finish.

A detailed version

  • 1. Receive the message from the browserurlTo enable network request threads (this part can expand the browser mechanism and the relationship between processes and threads)
  • 2. Start the network thread until it emits a completeHTTPRequests (this section involves DNS queries,TCP/IPRequest, five layer Internet protocol stack, etc.)
  • 3. Received the request from the server to the corresponding background (this part may involve load balancing, security interception and internal processing of the background, etc.)
  • 4. Backstage and front deskHTTPInteraction (this section includesHTTPHeader, response code, message structure,cookieAnd so on knowledge, can mention the static resourcescookieOptimization, as well as encoding decoding, e.ggzipCompression, etc.)
  • 5. Separate cache issuesHTTPCache (this section includesHTTP cache header.ETag, catchcontrolEtc.)
  • 6. The browser receives the messageHTTPPacket parsing process (parsinghtml– Lexical analysis and then parsing intodomTree, parsing,cssgeneratecssRule tree, merge intorenderThe tree, and thenLayout, paintingRendering, composition of composite layers,GPUDrawing, processing of external chain resources,The loaded and DOMContentLoadedEtc.)
  • 7.CSSVisual formatting model (rules for rendering elements, such as inclusion blocks, controller boxes,BFC, IFC, etc.)
  • 8.JSEngine parsing process (JSThe interpretation stage, the preprocessing stage, the execution stage generates the execution context,VO, scope chain, recycle mechanism, etc.)
  • 9. Others (can expand different knowledge modules, such as cross-domain,webSecurity,hybridPatterns, etc.)

Detailed Upgrade version

  • 1. Enter a value in the address box of the browserURL
  • 2. Check the cache. If the requested resource is in the cache and fresh, go to transcoding
    • 2.1 If the resource is not cached, initiate a new request
    • 2.2 If it is cached, check whether it is fresh enough and provide it to the client directly. Otherwise, verify with the server.
    • 2.3 There are usually two tests for freshnessHTTPHead controlExpires 和 Cache-Control ：
      • 2.3.1 HTTP1.0provideExpires, the value is an absolute time to indicate the cache fresh date
      • 2.3.2 HTTP1.1increasedCache-Control: max-age=, the value is the maximum fresh time in seconds
  • 3. Browser parsingURLGet protocol, host, port,path
  • 4. Browser assemble oneHTTP (GET)The request message
  • 5. The browser obtains the hostThe IP address, the process is as follows:
    • 5.1 Browser Cache
    • 5.2 Local Cache
    • 5.3 hosts file
    • 5.4 Router Cache
    • 5.5 ISP DNS Cache
    • 5.6 Recursive DNS Query (Inconsistent IP Addresses May Occur Due to Load Balancing)
  • 6. Open onesocketWith the targetThe IP address, the port establishes a TCP connection.Three-way handshakeAs follows:
    • 6.1 The Client Sends a PacketTCP SYN=1, Seq=XPackage to the server port
    • 6.2 Server Send BackThe SYN = 1, ACK = x + 1, Seq = YThe corresponding package
    • 6.3 Client SendingACK = Y + 1, Seq = z
  • 7.TCPSend after the link is establishedHTTPrequest
  • 8. The server receives the request after parsing, will forward the request to the server program, such as virtual host useHTTP HostThe header determines the requested server
  • 9. Check the serverHTTPWhether the request header contains the cache validation information, if the validation cache is fresh, return the corresponding status of 304, etc
  • 10. Develop reasonable procedures to read the complete request and prepare itHTTPAccordingly, operations such as database queries may be required
  • 11. The server forwards the packetTCPThe link is sent back to the browser
  • 12. The browser receives the messageHTTPAnd then turn it off as appropriateTCPThe four-way handshake to close a TCP connection is as follows:
    • 12.1 Sending by the Active PartyFin=1,ACK=z,Seq=xmessage
    • 12.2 Passive SendingACK=X+1,Seq=Ymessage
    • 12.3 Passive SendingFin=1,ACK=X,Seq=Ymessage
    • 12.4 Sending by the Active PartyACK=Y,Seq=xmessage
  • 13. The browser checks the corresponding status code
  • 14. If the resource is cacheable, cache it
  • 15. Decode the corresponding
  • 16. Decide what to do according to the resource type
  • Analytical 17.HTMLDocumentation, buildDOMTree, download resources, buildCSSOMTree, execute JS scripts, these operations in strict order each month
  • Build a DOM tree:
    • 18.1 Tokenizing: Parsing character streams into tags according to the HTML specification
    • 18.2 Lexing: Lexical analysis converts tags into objects and defines attributes and rules
    • 18.3 DOM Construction: Organize objects into DOM trees based on HTML tag relationships
  • 19. When encountering images, stylesheets and JS files during parsing, start downloading
  • 20. BuildCSSOMTree:
    • 20.1 Tokenizing: character stream is converted to tag stream
    • 20.2 Node: Creates nodes based on tags
    • 20.3 CSSOM: the node creates the CSSOM tree
    1. According to theDOM tree and CSSOM treeBuilding a Render tree
    • 21.1 fromThe DOM tree, traverses all visible nodes, invisible nodes include: 1)script , metaSo the tag itself is not visible. 2) Nodes hidden by CSS, such as display: None
    • 21.2 For each visible node, find the appropriateCSSOMRule and apply
    • 21.3 Publish the content and computing styles of visual nodes
  • 22. Js parsing is as follows
    • 22.1 Creating a BrowserThe Document objectAnd parseHTML, add the parsed elements and text nodes to the documentDocument. The readystate is loading
    • 22.2 HTML parser encountered noAsync and defer's script, add them to the document, and then execute inline or external scripts. These scripts execute synchronously, and the parser pauses while the script is downloaded and executed. So it worksdocument.write()Inserts text into the input stream. Synchronous scripts often simply define functions and register event handlers that can iterate and manipulate scripts and their previous document contents
    • 22.3 When the parser encounters SettingsScript for async propertyStart downloading the script and continue parsing the document. The script is executed as soon as it is downloaded, but the parser does not stop for it to download. Do not use asynchronous scriptsdocument.write()They have access to their script and previous document elements
    • 22.4 When the document is parsed,Document. ReadState into interactive
    • 22.5 allDefer the scriptIt is executed in the order in which it appears in the document. Deferred scripts have access to the entire document tree and are prohibiteddocument.write()
    • 22.6 The browser is inDocumentObject on fireDOMContentLoaded event
    • 22.7 At this point, when the document is fully parsed, the browser may still be waiting for content such as images to load and for all asynchronous scripts to load and execute.Document. readState becomes complete, and the window fires the load event
  • 23. Display the page (the page will be displayed gradually as the HTML is parsed)

Cookies, sessionStorage and localStorage

  • cookieData stored (usually encrypted) on a user’s local terminal by a web site to identify the user
  • cookieData is always carried in the same HTTP request (even if it is not needed) and is passed back and forth between the browser and the server (optimization point)
  • sessionStorage 和 localStorageData is not automatically sent to the server and is stored locally
  • Storage size:
    • cookieThe data size cannot exceed 4K
    • SessionStorage and localStorageAlthough there is a storage size limit, it is much larger than cookies, reaching 5M or more
  • Term time:

LocalStorage stores persistent data. Data is not lost after the browser is closed unless the data is deleted

SessionStorage data is automatically deleted after the current browser window is closed

Cookie The cookie set remains valid until the expiration time, even if the window or browser is closed

Browser cache

Browser caches are divided into strong cache and negotiated cache. When a client requests a resource, the process for obtaining the cache is as follows

  • Let’s start with some of this resourcehttp headerDetermine whether it matches the strong cache. If it matches, the cache resources are directly obtained from the local server without sending requests to the server.
  • When the strong cache does not hit, the client sends a request to the server, and the server sends a request through anotherrequest headerVerify that the resource matches the negotiated cache, calledhttpThen verify that, if a match is hit, the server will request back, but does not return the resource, but tells the client to directly get the resource from the cache, the client will get the resource from the cache after receiving the return;
  • Strong and negotiated caches have in common that the server does not return the resource if the cache is hit; The difference is that the strong cache does not send requests to the server, but the negotiated cache does.
  • When the negotiation cache also dies, the server sends the resource back to the client.
  • whenctrl+f5When the page is forced to refresh, it is loaded directly from the server, skipping the strong cache and negotiated cache.
  • whenf5When the page is refreshed, the strong cache is skipped, but the negotiated cache is checked.

As a front-end developer for five years, I would like to share some experience from the perspective of the interviewer, hoping to help friends who want to go all the way to black in the front end:

What kind of resume will stand out?

1. Who am I?

Use a summary description to make a concise, clear and systematic review of your technical system, knowledge system, practical experience, and views on technology and learning. Before you write, ask yourself this question: “What are my thoughts and insights?” “The reason is simple. If all the candidates simply list the skills they know in their stack, and you can share your technical insights, you will stand out.

2. What did I do?

Each experience should be complete, including background, analysis and definition of problems, problem-solving ideas, practice process, problems and challenges, coping methods, highlights, summary and reflection. In the process of description, it is best to have specific data evidence, and in the process of analysis and judgment, it is best to have logical deduction. Before you write, ask yourself one question: “Why are these things different for me?”

3. My bonus?

Learn well, do more, produce more… Are all extra points, learn how to reflect? I think I can record my grades, achievements, competitions and papers. What about doing more? You can express your own study and research projects completely, as long as you can reflect your unique value, you can write out. At the same time, you should also pay attention to what you do in the industry to compare what level is it? No amount of writing can gain traction without unique value, and that’s when it comes to producing cattle. For example: business or user size? Traffic and usage duration, usage frequency? Github’s Star number, industry technology advancement and innovation value, etc.

4. Other content

Whether writing your resume or interviewing for a job, ask yourself: Why am I better than others? Summarize your best points and don’t let the interviewer guide you.

How can students improve their front-end skills?

1, learning,

Well as a student at the core is to learn, to learn very not equal to high scores, nature or whether you study to understand the content of the deep, whether to have their own independent opinions, if verified in practice these insights, whether based on iteration reflection practice again, correct their learning methods, learning process into the bottom and the nature.

2, practice

Only when there is enough depth in a system can more general technical ideas be summarized and refined, and the same goes for the front end.

First of all, don’t try to learn and understand all the popular frameworks, try to focus on one technical area of understanding. For example, one of my classmates was involved in a lot of front-end projects, from React to small programs, from the middle background to the front desk. But when we talked about it, we couldn’t grasp the principles and ideas behind technologies in any technical field.

Secondly, standard software engineering processes should be followed in practice: problem analysis and definition, technology selection, outline design, detailed design, research and development, debugging, testing, release and optimization. Want to exercise oneself to have good actual operation ability, want to start from good, standard operation method first.

Finally, in the application of technology to know the merits and demerits, have their own judgment to do the technology selection. Research and analyze solutions from top companies like FaceBook and Google, and learn the most advanced technologies like imgCook.com. Use your top problem analysis and definition skills, broad vision and technical sensitivity to find the best technology. Design and implementation will come naturally.

Write in the last

To the interviewer, the interview process is just a moment, your past and future are more important. Think about what problems you need to solve at work or in school, try different solutions, and summarize failures and successes. What matters most is what you want to be in the future, and work toward it.

For the interviewer, you need to find the good in each person, learn to appreciate each person, and in the process find a partner who is better than you.

Here is a 280 page PDF of the interview questions I compiled for the front-end school admissions, including HTML, CSS, JavaScript, React, Vue, browser, server and Network, algorithms, etc.

Complete layout test materials free to share, just like your support,Just click here and get it for free.