The basic concept

The browser is the most important interface for users to access the Internet. Essentially, the browser makes it easy for the average Internet user to parse and send HTTP software through the interface

The user agent

Viewing user Agents

  1. Open the Console in Chrome
  2. Enter navigator.userAgent in the console
  3. You’ll find the type string Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko)Chrome/64.0.3282.186 Safari/537.36

The role of user agents

  1. Determine the browser type and use the compatible solution
  2. Check whether the device is a mobile terminal
  3. Identifies the H5 container to facilitate calls to the H5 container-specific interface
  4. Note that userAgent masquerading costs are low and do not rely on it too much

The kernel

For the operating system, the kernel is the core of the operating system, is the first layer of hardware based software expansion, providing the most core and most basic services. Applications use the computer’s hardware by making system calls through the kernel, whose code is simple, efficient and basically bug-free. Since it is the lowest level of services, even a tiny error can cause the whole system to crash. The benefits are obvious, of course. With a single stable kernel, developers can build operating systems and applications for different scenarios.

For browsers, there is also a browser kernel, similar to the operating system kernel. The browser kernel needs to provide apis for browser developers to use, while providing the most core functions, such as loading and rendering web pages, and calling services provided by the operating system.

For browser vendors, efficient use and development of the browser kernel is the core issue. For Web developers, understanding the basic mechanism of the browser kernel is the only way to develop high-performance Web applications.

Browser kernel Definition

We can initially assume that the module in the browser that is responsible for turning characters representing the page into visual images is the browser kernel

Composition of web page content

  • Doctype: displays the HTML version of the browser

Head: HTML header Meta: metadata information

  • Charset: This feature declares the character encoding used by the current document
  • Http-equiv: Client behavior, such as rendering mode, caching, etc
  • Name [keywords]: used by the search engine
  • Name [description]: used by the search engine
  • Name [viewPort]: set the browser viewport

link

  • Script: A script that needs to be loaded or run before the body

Body: HTML entities

  • Script: A script that needs to be loaded or run at body parsing time

Render the work that needs to be done



The image above shows the general rendering process of the rendering engine, with dotted lines representing the important components of the external modules (not part of the rendering engine) on which this stage depends:

  • HTML interpreter: An interpreter that interprets HTML text. HTML text ->DOM tree
  • CSS interpreter: When encountering cascading styles, you need to use the cascading style sheet interpreter. Compute the style information for the DOM object
  • Javascript engine: When you encounter JS code, you need to use the Javscript interpreter and give the JS code the ability to call DOM interfaces and CSSOM interfaces
  • Layout: With CSS, calculate the size and location of each DOM object
  • Drawing: Make images of DOM nodes calculated by layout

Chromium architecture

Network stack

  • 1. Determine the request type and protocol
  • 2. Determine whether to establish a network connection
  • 3. Establish HTTP transactions
  • 4. Establish a TCP socket connection
  • 5. Socket connections

Increase loading speed

  • 1. Merge request: Nginx module, Sprite diagram
  • 2. Cache: from cache(memory disk), localstorage
  • 3. TCP network connection optimization: TCP tuning, HTTP/2. Keepalive
  • 4. Hardware: Increase bandwidth and use CDN (object storage)
  • 5. Resource size: Gzip, WebP, image compression, cookie volume
  • 6. Preloading: multiple CDN city names, DNS prefetch, asynchronous js reading