Principle of CDN

When a user visits a website without a CDN, the process looks like this:

  1. To resolve a domain name to an IP address, the browser sends a request to the local DNS
  2. The local DNS makes requests to the root server, the top-level domain name server, and the authority server in turn, a recursive process to get the IP address of the web site server
  3. The local DNS sends the IP address back to the browser, which makes a request to the web server IP address and gets the resource

If a user visits a website with a CDN deployed, the process looks like this:

  1. Browsers need to resolve domain names to IP addresses, so they need to make a request to the local IP DNS
  2. The local DNS sends requests to the root server, top-level domain name server, and permission server to obtain the IP address of the global load balancing system (GSLB)
  3. The local DNS sends a request to the GSLB. The GSLB determines the user location based on the LOCAL DNS IP address, filters out the local load balancing system that is close to the user, and returns the SLB IP address of the changed system to the local DNS as the result
  4. The local DNS sends the IP address of the SLB to the browser, and the browser sends a request to the SLB
  5. Based on the resource and address requested by the browser, the SLB selects the optimal cache server and sends it back to the browser.
  6. The browser then redirects to the cache server based on the address sent back by the SLB.
  7. If the cache server has a resource that the browser needs, it sends it back to the browser. If not, the resource is requested from the source server, sent to the browser and cached locally.

Reduce the complexity of CSS selectors

  • The browser reads the selector from the right to the left
#block .text p {
	color: red;
}
Copy the code

1. Find all p elements 2. Find if the element in result 1 has a parent element 3 with class name text. Find if the element in result 2 has a parent element whose ID is block

  • CSS selector priority
Inline > ID selector > Class selector > Label selectorCopy the code

Animating is implemented using the transform and opacity property changes

In CSS, changes to transform and opacity do not trigger rearrangement or redraw; they are properties that can be handled independently by the synthesizer

The distinction between null, undefined, or undeclared

  • Null indicates that there is no object, that is, there should be no value at the change point, which is converted to a value of 0.
    • As arguments to a function, indicating that the function’s arguments are not objects
    • As the end of the object prototype chain
  • Undefined means a value is missing, that is, there should be a value here, but it has not been defined, converted to a value of NaN.
    • When a variable is declared but not assigned, it is undefined
    • When the function is called, the argument that should be provided is not provided, which is equal to undefined.
    • The object has no assigned attribute, the value of which is undefined.
    • If the function returns no value, undefined is returned by default.
  • Undeclared: javascript syntax error, used directly without declaring, js cannot find the corresponding context.