1. Your URL

1.1 ctrl + e(or CTRL + K)Enter the search in Chrome

More shortcuts, such as CTRL + Enter, can automatically complete www. and.com

1.2 Automatic completion and candidate field

  • Match url will automatically complete (cannot be closed, unless delete history and close synchronization)
  • Just match the search engine addresstabSwitch search engine (TAB switching prompt, input complete but not displayed)
  • ctrl eWill enter the search mode, enter is the full URL will search
  • Already open Windows are matched in the candidate field

1.3 Determine whether to search or address

The address will be marked in blue

2. The DNS

If you enter a URL (Uniform Resource Locator), the DNS will resolve the URL to an IP address. The IP address is displayed for humans, and the IP address is displayed for machines.

2.1 Browser Cache

Chrome chrome://net-internals/# DNS, from which you can clear the browser DNS cache

2.2 system hosts

  • C:\Windows\System32\drivers\etc
  • Not just browsers, but other software uses this
  • Before the DNS server response is slow, their server address stored in, you can directly access. They don’t need it anymore, they use it for other things.

2.3 Router Cache

  • They say there’s a router cache, but searching the network, they don’t go into details about the router DNS cache.
  • Computer Networking: the Top-down Approach to 7th is mentioned onlyLocal serverDNS cache is available.
  • “Computer Networks Xie Xiren” mentioned that the domain name server has cache
  • The router cache is even more similarThe MAC tableCaching, the rest is writing hardware information

2.4 Local Server Cache

ISP cache is the DNS cache of the local information service provider. The cache duration is generally 1 hour

2.5 ISP Initiated query: Root, Top-level, and authoritative

Generally only provided to the secondary domain name, the tertiary domain name in the domain name purchase platform that configuration

Front-end development you should know about the browser mentioned, also need to get the port number. But the default access port number 80, 443, may have a special environment.

3. A TCP connection

3.1 The server is ready to accept incoming connections through socket, bind, and LISTEN. The server is in listen state

3.2 TCP three-way handshake

  • SYN(Synchronize) synchronizes data. ACK(acknowledge) Indicates that a message has been received. Seq (sequence) Indicates the sequence number

3.3 the SSL handshake

  1. The customer sends a list of the cryptographic algorithms it supports, including a customer’s uncountable number.
  2. From this list, the server selects a symmetric algorithm (such as AES), a public key algorithm (such as RSA with a specific key length), and a MAC algorithm which returns its selection to the client along with the certificate and a server non-multiplicity.
  3. The client verifies the certificate, extracts the server’s public key, generates a pre-master Secret (PMS), encrypts the PMS with the server’s public key, and sends the encrypted PMS to the server.
  4. Using the same key export function (as defined by the SSL standard), the client and server independently calculate the Master Secret (MS) from the PMS and non-multiplicity, which is then sliced to generate two passwords and two MAC keys in addition, When the chosen symmetric cipher is applied to a CBC (such as 3DES or AES), two Initialization vectors (ivs) are also obtained from the MS, one for each end of the connection. Since then, all packets sent between the client and the server are encrypted and authenticated (using MAC).

4. HTTP requests

If the browser is made by Google, instead of using HTTP to retrieve page information, it will send a request to the server to discuss using SPDY.

In September 2015, Google announced plans to remove support for SPDY. The HTTP/2 standard was officially published as RFC 7540 in May 2015. The key features of HTTP/2 are derived from SPDY technology. Most major browsers already supported the protocol at the end of 2015.

4.1 After TCP is established, a GET request is sent immediately.

(TTFP, the longest Time To First Byte)

4.2 Subsequent requests are the HTML files returned based on the first request

Most resources are returned directly to the browser cache.

5. Page rendering

5.0 Preload scanner

The browser building the DOM tree takes up the main thread, and the preload scanner will parse the available content and request high-priority resources such as CSS, JavaScript, and Web fonts without having to wait until the resources are parsed.

  • When the order of JavaScript parsing and execution is not important, you can add the Async or defer properties

5.1 HTML Rendering (DOM)

According to the content-type: text/HTML. Charset = utF-8 Specifies that the text format is parsed into a DOM (Document Object Model) tree-like structure of node objects.

  • Parsing can also continue when a CSS file is encountered
  • <script>Tags (especially without the async or defer attributes) block rendering and stop parsing the HTML

5.2 CSS Rendering (CSSOM)

After the DOM is built, the browser reads all CSS code (outer chain, inline, inline, user agent (browser), etc.) to build a DOM-like CSSOM (CSS Object Model) tree.

  • CSSOM does not include nodes in the DOM that are not displayed, such as meta-information
  • CSS selectors are read from right to left

5.3 Render Tree

DOM + CSSOM filters some non-rendered nodes (display: none, or width: 0; height: 0; And so on), and you get the render tree.

  • Opacity :hidden or opacity:0 will still appear in the rendering tree

5.4 Rendering Sequence

Layout Operation

Calculates the size and position of each element.

Reflow or browser reflow

When the page scrolls, the browser window adjusts, or the DOM is manipulated, backflow is triggered, causing the layout to be recalculated.

Paint operation

The diversity of the layout of elements, the drawing will be done in layers. The color filling of each layer of elements is called rasterization, and one thread is used for each layer.

  • One of the more tools in Chrome Development tools is the Layers tool

  • Promoting content to a layer on the GPU (rather than the main thread on the CPU) improves drawing and redrawing performance.
  • There are specific properties and elements that can instantiate a layer, including and, any CSS element with opacity, 3D transformation, will-change, and a few other elements.
  • Layers do improve performance, but they come at the expense of memory management and should not be overused as part of a Web performance optimization strategy.

Compositing operation

Combine the different layers.

  • Not everything will be redrawn and composited

Browsers also build the AOM Accessibility Object Model that assistive devices use to analyze and interpret content, similar to a semantic version of the DOM. Screen readers cannot access the content.

reference

  • Explain what happens when the browser enters the URL – nuggets
  • What happens when you type a URL in the browser and press enter? — medium.com
  • Behind the Screens: What happens when you type a URL in a browser — educative.io
  • What happens when you type a URL in your browser and press ENTER? — codeburst.io
  • skyline75489/what-happens-when-zh_CN — github
  • What you don’t know about browser page rendering – Nuggets
  • Front-end development what you should know about browsers – Nuggets
  • Computer Network
  • Computer Networking: Top down
  • How the browser renders a web page? DOM, CSSOM, and Rendering — medium.com