preface

Long time no blog, my original title was “XXX from entering URL to page loading complete”?

But I thought, this is something that people chew over a lot, it’s not challenging, and there are so many things that can be optimized during the page operation.

Well, dig yourself a hole. At least you spent a year in O&M.

This article will try to describe the optimization of the whole site from the analysis to the operation process from the front and back end or operation perspective.

1. Process review

1. URL input to the browser to parse a series of events

A lot of big companies like to ask this interview question, what happens when you type in the URL to the page you see? Today we will sum up. In short, there are several processes

  1. Enter the url in your browser
  2. Domain name Resolution (DNS), find the IP server
  3. initiateTCPThe connection,HTTPThree handshakes, sending requests (Request)
  4. The server responds to HTTP(Response)
  5. Browser Download resourceshtml css js imagesEtc.
  6. Browser parsing code (if the server has itgzipCompress, browser decompress first)
  7. The browser renders to the user

2. Click the Close TAB

We do something after the page is rendered:

  • Button repeat click
  • Rolling operation
  • Conditional query retrieval

Let’s classify all the above as ==> 8. Interface operation

Also in step 3: Insert before initiating TCP connection:

  • Optimization of browser-allowed concurrent requests

Let’s start with DNS resolution…

2. DNS resolution process

Take Chrome as an example:

  1. Chrome first searches the browser’s own DNS cache.

    (The cache time is short, 1 minute by default, and can only hold 1000 caches)

Note:chrome://net-internals/#dnsTo look atChromeIts own cache)

  1. If no corresponding entry is found in the browser’s own cache, thenChromeIt searches the OPERATING system’s own DNS cache

  • Windows – The procedure for viewing DNS cache entries in Windows is very simple. Simply open a command prompt and type the following command: ipconfig /displaydns.

  • Mac – The procedure for viewing DNS cache entries on a Mac is slightly different. To get to the search bar, open the console application, select the device from the left sidebar, and enter: any: mdNSResponder. Next, open the command line and type the following command:

    sudo log config --mode "private_data:on"
sudo killall -INFO mDNSResponder
Copy the code

    Then, go back to the console application and view the list of cached DNS records. For example, the screenshot below shows a cached CNAME record for wx.qlogo.cn.

  1. If not found in your system’s DNS cache, try reading the hosts file. Check whether there is an IP address corresponding to the domain name. If yes, the resolution succeeds.

    • Note:WindowsLocated in theC:\Windows\System32\drivers\etc.MacIt is/etc/hosts.
    • This type of OS level domain name resolution can often be exploited by malicious people by modifying youhostsThe contents of the file resolve the domain name to the one he specifiedipAddresses that cause so-called domain name hijacking, so willhostsThe file is set to read-only mode to prevent malicious tampering.

  2. If no entry is found in the hosts file, the browser makes a DNS system call asking the local domain name server localDNS (LDNS) to resolve the domain name.

  • throughUDPAgreement toDNSThe request is a recursive request, that is, a carrier’s requestDNSThe server will

Provide us with the IP address of the domain name)

  • The first time the local domain name server (LDNS) to resolve the domain name, this service is usually located in a corner of your city, not far away, and its performance is very good, usually cache domain name resolution results, about 80% of the domain name resolution is finished here.
  • If the local DNS server does not record the domain name, the system starts recursive and iterative resolution

At this point, all the DNS parsing a browser can do is complete, and the next step is server specific. What you don’t want to see can be ignored.

  1. iflocalDNSStill no hit, go straight to itRoot ServerDNS request resolution.
  2. The root DNS server returns to the local DNS server a primary DNS server (gTLD ServerAddress).gTLDIs the international top-level domain name server, such as.com,.cn,.orgThere are only about 13 in the world.
  3. Local domain name serverlocalDNSIt’s going back one step upgTLDThe server sends the request.
  4. requisitionedgTLDThe server finds and returns the corresponding of this domain nameName ServerThe address of the DNS server. HereName ServerFor example, a user applies for a domain name from a domain name service provider. The domain name resolution task is performed by the domain name provider’s server.
  5. Name ServerThe DNS server queries the mapping table between domain names and IP addresses. In normal cases, the DNS server obtains the destination IP address based on the domain name and returns it with a TTL valueDNS ServerDomain name server.
  6. Returns the corresponding of the domain nameIPandTTLValue,LDNSWill cache the domain name andIPThe cache time is determined byTTLValue control.
  7. The domain name resolution result is returned to the user and cached in the local cache according to the TTL value. The domain name resolution process is complete.

Note: In the actual DNS resolution process, there may be more than these 11 steps (step 1 is actually negligible). For example, the Name Server may have many levels or a GTM for load balancing control, which may affect the domain Name resolution process.

If you don’t want to look at text, look at pictures:

3. The DNS optimization

The DNS cache has multiple levels of cache, sorted by distance from the browser:

  • Browser cache
  • System cache
  • Router cache
  • IPSServer cache
  • Root DNS server cache
  • Top-level domain name server cache
  • Primary DNS cache.

Is it too time-consuming to go through so many steps each time? How do you reduce the number of steps in the process? Then you need DNS optimization. There are two things related to DNS in front-end optimization:

  • To reduceDNSNumber of requests
  • DNSPreliminary analysis

DNS is the basic protocol of the Internet, and its resolution speed seems to be easily overlooked by website optimizers. Most new browsers have been optimized for DNS resolution. A typical DNS resolution takes 20-120 milliseconds, so reducing the time and frequency of DNS resolution is a good optimization. Here will not tell, focus on DNS pre-resolution.

3.1 the front:DNS prefetch

DNS Prefetch enables domain names with this attribute to be resolved in the background without the user clicking the link. Domain name resolution and content loading are serial network operations, so this method can reduce the waiting time of users and improve user experience.

By default, the browser Prefetch the domain name of the page that is not in the same domain as the current domain name (the domain name of the page being viewed) and cache the result. This is the implicit DNS Prefetch.

If you want to pre-fetch domains that do not appear on the page, you use the displayed DNS Prefetch.

It is also easy to use by adding the corresponding attribute to the link tag:

*/ <meta http-equiv="x-dns-prefetch "content="on" /> <link rel="dns-prefetch" href="//example.com">Copy the code
  • If your page needs a lot of resources that access different domains, you can use this technology to speed up the acquisition of resources for a better user experience.
  • It’s important to note that,DNSPreparsing is good, but it can’t be abused. If multiple pages are parsed repeatedly, the DNS query times are increased.

Many large sites now use this optimization, for example:

Taobao:

Jingdong:

If you want to disable implicit DNS Prefetch, you can use the following tags:

<meta http-equiv="x-dns-prefetch-control" content="off">
Copy the code

3.2 Back-end & O&M:CDNwithHTTPDNS

In fact, there are three types of optimization that back-end operations can do:

  • CDN
  • HTTPDNS
  • DNSLoad balancing

However, for larger Web sites, DNS load balancing is basically abandoned, with too many disadvantages. Those who are interested can search for information by themselves.

1. CDNwithDNScycle

CDN stands for Content Delivery Network. Its purpose is to add a new layer of CACHE(CACHE) layer in the existing Internet, the content of the website will be published to the nearest user’s network “edge” node, users can get the content needed nearby, improve the response speed of users to visit the website.

DNS cycle: When the authoritative DNS discovers that a domain name maps to multiple IP addresses, it uses IP polling to evenly allocate IP addresses to multiple DNS requests to achieve load balancing.

Why is it neededCDN?

  • Due to theDNSYou can’t optimize the distribution based on the load on different servers. Even if one of the servers goes down,DNSUnable to learn of the situation in a timely manner to the serverIPIf it is allocated, it will be inaccessible.
  • Therefore, in authorityDNSAnd the serverCDNLayers are necessary.
  • CDNOn the basis of having the ability to schedule and allocate servers, the system can synchronize the running status of servers and adjust the scheduling policy accordingly, which greatly improves the load balancing capability.

CDNBenefits:

  • Solve the “first kilometer” problem on the server side.
  • It mitigates or even eliminates bottlenecks between different operators.
  • Reduce the pressure on the export bandwidth of the provinces.
  • Relieves the pressure on the backbone.
  • Optimized the distribution of hot online content.

CDNAccess steps:

(1) Before CDN application is deployed:

Network request path:

  • Request: Local network (LOCAL area network) carrier Network Application server room
  • Response: Application Server Room — Carrier Network — Local Network (LAN)

Without considering the complex network, it takes 3 nodes and 6 steps to complete a user access operation from request to response.

(2) After CDN application is deployed:

Network path:

  • Request: Local network (LOCAL area network) — carrier network

  • Response: Carrier Network — Local Network (LAN)

Without considering the complex network, it takes two nodes and two steps to complete a user access operation from request to response.

Compared with no CDN service deployment, 1 node and 4 steps of access are reduced. Greatly improve system response speed.

The following steps are combined with specific network operation and maintenance:

Step1: The user sends a request to localDNS to query the IP address corresponding to the entered domain name (the IP address is returned directly if there is cache, otherwise, go to rootDNS to query the IP address). Step2: localDNS iterates to rootDNS query, iterates step by step,rootDNS=> top-level DNS=> permission DNS; Step3: After obtaining the permission DNS, localDNS sends a domain name resolution request to the permission DNS. Step4: The permission DNS usually resolves the domain name CNAME (if there is a CNAME, the CDN service corresponding to the CNAME will be resolved; otherwise, it defaults to a common request and directly returns the resolved IP address) to another domain name. This domain name will eventually be pointed to the intelligent DNS load balancing system in the CDN network. Step5: the DNS load balancing system returns the most appropriate CDN node IP address to localDNS through some intelligent algorithms. Step6: localDNS returns the obtained IP address to the user; Step7: After obtaining the IP address of the node, the user initiates an access request to the node. Step8: THE CDN node returns the request file. If the requested file does not exist in this node, it will return to the source station to obtain the file and then return it to the user.Copy the code

2. HTTPDNS: solveDNSHeld:

HTTPDNS + HTTPS

In the conventional impression, many times feel that the site on the HTTPS protocol on VANS. It’s not:

  • Despite the use ofHTTPSThe technology, part of the evil operator, is still usedDNSContaminating technology, allowing domain names to point to their own servers.
  • These servers are not deployedSSLService (triggered even if deployedSSLcertificateCommon nameInconsistent alarm), causing port 443 to be rejected directly.

Operators in order to earn advertising money, provincial network settlement is unscrupulous. A common method of hijacking is to fake DNS domain names provided by ISPs. Is there a solution to DNS hijacking?

The industry has a solution for such scenarios, namely HTTPDNS:

The HTTPDNS uses THE HTTP protocol to resolve domain names instead of the UDP-based DNS protocol. Domain name resolution requests are directly sent to the HTTPDNS server, bypassing the carrier’s Local DNS and avoiding domain name hijacking and inaccurate scheduling problems caused by the Local DNS.

HTTPDNS is a protocol that can be hijacked easily, and it uses HTTP to request Domain <-> IP mapping. After obtaining the correct IP address, the Client assembles the HTTP protocol to prevent isPs from tampering with the data.

Tencent, the first cloud service provider to provide HttpDNS, has published two articles four years apart that reveal the technical details in great detail:

  • How to build hundreds of billions of HttpDNS services
  • A new idea for global precise traffic scheduling -HttpDNS service details

To be continued…

The next article will focus on two broad directions for HTTP optimization:

  • Reduce the number of requests.
  • Reduce the time spent on a single request.

Its corresponding contents are:

  • Optimization of concurrent requests allowed by browsers,nginxConfiguration/Convergence of domain names.
  • The compression and consolidation of resources,webpack/GzipRelated.
  • And other things of interest…

A collection of articles by authors digging for gold

Need to reprint to the public number call me to add the white list on the line.

  • “True ® Full Stack Road” Back-end guide to Web front-end development
  • “Vue Practice” 5 minutes for a Vue CLI plug-in
  • “Vue practices” arm your front-end projects
  • “Intermediate and advanced front-end interview” JavaScript handwritten code unbeatable secrets
  • The answer to the Vue question “Learn from source” that no interviewer knows
  • “Learn from the source” Vue source JS operations
  • “Learn from source” thoroughly understand the Vue option Props
  • The “Vue Practice” project upgrades vuE-CLI3 to correct posture
  • Why do you never understand JavaScript scope chains?

The public,