After entering the URL, the browser sends a request to the DNS server to resolve the domain name into an IP address

DNS Domain name Resolution

When building a web service is to have a server first, only a unique IP address for each server, and set up the corresponding application on the server and a web application (for example, nginx service) can directly use the network IP address and port to directly access, if your site is only internal network IP address, not outside the network IP address is inaccessible. However, in order to facilitate user access, a domain name is bound to the IP address. The domain name needs to be purchased and renewed every year.

The DNS is a domain name system that maps domain names to IP addresses.

DNS resolution process: like looking for a book, first ask a friend around to have a book, then go to the library to find the book, find the big category, go to the big category to find the middle category – go to the middle category to find the small category – go to the small category to find the book where – go to the book to find the book

For example, visit www.baidu.com, or www.baidu.com.

Domain name from right to left:

  • Root domain.

  • Top-level domain names are also called level 1 domain names (.com)

  • Secondary domain name (Baidu.com)

  • Third level domain name (www.baidu.com, WWW is the host name, WWW /mail/member/space, www.baidu.com is the main site, member.baidu.com, mail.baidu.com)

  • Root domain name management. Com/.net domain name, top-level domain name server will manage their own domain name server such as Bilibili and QQ as the authoritative domain name server

DNS domain name resolution process:

  • Entering www.bilibili.com in the URL is like going to the library to find a book. The browser will first search for the corresponding IP record in its cache and check whether the local hosts file has the corresponding record. If there is a corresponding record, there is no need to search. Let’s say there’s no cache

  • In order to resolve the domain name, the browser will call the parser for resolution. The parser is like the DNS client, which needs to query the IP address of the DNS server, and the parser will send a request to the DNS server. The network setting of our computer has the address of the local DNS server (generally China Telecom). If you do not have a DNS server address, or the DNS address is incorrectly set, but you can access the Internet, you can use QQ, but you cannot browse the web, because QQ accesses the server through an IP address.

  • The next step is done independently by the local DNS server, and the parser just waits for the result.
    • The client and the local DNS server perform recursive query. The client only needs to send a request to the local DNS server and wait for the local DNS server to return the result to the client.
  • The procedure for querying an IP address on the local DNS server is as followsIterative approachQuery:
    • You can use the command line to simulate the query of the local DNS server
    • Nslookup set type=ns Sets the query type to NS, that is, name server
    • If the local DNS server does not have a cache IP address
    • Query the root domain Name and obtain the Name Server (NS) and Address (A) of the top-level domain Name.com. NS is the Name of the top-level domain Name and A is the IP Address of NS
    • Ask for the top-level domain name and get the NS and A for the secondary domain.tencnet.com
    • Ask for A secondary domain name to get NS and A for the tertiary domain name.cloud.tencent.com
~ % nslookup
> set type=ns
> .     // Query the root server domain name
Server:		114.114114.114.
Address:	114.114114.114.#53  // Port 53 of the root server

Non-authoritative answer:  // The cached result is the root server domain name
.	nameserver = f.root-servers.net.
.	nameserver = e.root-servers.net.
.	nameserver = g.root-servers.net.
.	nameserver = k.root-servers.net.
.	nameserver = a.root-servers.net.
.	nameserver = h.root-servers.net.
.	nameserver = b.root-servers.net.
.	nameserver = m.root-servers.net.
.	nameserver = j.root-servers.net.
.	nameserver = c.root-servers.net.
.	nameserver = i.root-servers.net.
.	nameserver = l.root-servers.net.
.	nameserver = d.root-servers.net.

Authoritative answers can be found from:  // The server sends the result of the request
>

> set type=a / / query
> f.root-servers.net.
Server:		114.114114.114.
Address:	114.114114.114.#53

Non-authoritative answer:
Name:	f.root-servers.net
Address: 192.5. 5241.
> server 192.5. 5241. // Set to the root server
Default server: 192.5. 5241.
Address: 192.5. 5241.#53 
> set type=ns
> com.  // Ask the root server for the address of the com domain name server
;; Truncated, retrying in TCP mode.
Server:		192.5. 5241.
Address:	192.5. 5241.#53

Non-authoritative answer:
*** Can't find com.: No answer Authoritative answers can be found from: Nameserver = b.gtld-servers.net. Com nameserver = b.gtld-servers.net = c.gtld-servers.net. com nameserver = d.gtld-servers.net. com nameserver = e.gtld-servers.net. com nameserver = f.gtld-servers.net. com nameserver = g.gtld-servers.net. com nameserver = a.gtld-servers.net. com nameserver = h.gtld-servers.net. com nameserver = i.gtld-servers.net. com nameserver = j.gtld-servers.net. com nameserver = K.gtld-servers.net. com nameserver = m.gtld-servers.net. l.gtld-servers.net Internet address = 192.41.162.30 // GTLD: Generic Top level domain Indicates the most common type of TLD. L.gtld-servers.net has AAAA address 2001:500: D937 ::30 b.gtld-servers.net Internet address = 192.33.14.30 // Domain name and ipv4 address of the domain name b.gtld-servers.net has AAAA Address 2001:503:231D ::2:30 c.gtld-servers.net Internet Address = 192.26.92.30 c.gtld-servers.net has AAAA address 2001:503:83EB ::30 d.gtld-servers.net Internet address = 192.31.80.30 d.gtld-servers.net has AAAA address 2001:500:856E ::30 e.gtld-servers.net Internet address = 192.12.94.30 E.gtld-servers.net has AAAA address 2001:502:1CA1:: 30 f.gtld-servers.net Internet address = 192.35.51.30 F.gtld-servers.net has AAAA address 2001:503: D414 ::30 g.gtld-servers.net Internet address = 192.42.93.30 G.gtld-servers.net has AAAA address 2001:503: EEA3 ::30 a.gtld-servers.net Internet address = 192.5.6.30 A.gtld-servers.net has AAAA address 2001:503:a83E ::2:30 h.gtld-servers.net Internet address = 192.54.112.30 H.gtld-servers.net has AAAA address 2001:502:8cc::30 i.gtld-servers.net Internet address = 192.43.172.30 I.gtld-servers.net has AAAA address 2001:503:39C1 ::30 j.gtld-servers.net Internet address = 192.48.79.30 J.gtld-servers.net has AAAA address 2001:502:7094::30 K.gtld-servers.net has AAAA address 2001:503: d2D ::30 m.gtld-servers.net Internet address = 192.55.83.30 M.gtld-servers.net has AAAA address 2001:501:b1f9::30 > server 192.41.162.30 192.41.162.30 Address: 192.41.162.30#53 > set type=ns > bilibili.com. Header answer: *** Can' 192.41.162.30 Address: *** Can't find bilibili.com: No answer

Authoritative answers can be found from:
bilibili.com	nameserver = ns3.dnsv5.com.   // Bilibili's two DNS servers, authoritative DNS servers
bilibili.com	nameserver = ns4.dnsv5.com.
ns3.dnsv5.com	internet address = 129.211176.212.
ns3.dnsv5.com	internet address = 162.1418.188.
ns3.dnsv5.com	internet address = 162.1424.251.
ns3.dnsv5.com	internet address = 162.1425.251.
ns3.dnsv5.com	internet address = 18.1942.137.
ns3.dnsv5.com	internet address = 183.192201.94.
ns3.dnsv5.com	internet address = 223.166151.16.
ns3.dnsv5.com	has AAAA address 2402:4e00:1430:1102:0:9136:2b2b:ba61
ns3.dnsv5.com	internet address = 52.77238.92.
ns3.dnsv5.com	internet address = 61.151180.51.
ns4.dnsv5.com	internet address = 101.226220.12.
ns4.dnsv5.com	internet address = 129.211176.151.
ns4.dnsv5.com	internet address = 162.1424.248.
ns4.dnsv5.com	internet address = 162.1425.248.
ns4.dnsv5.com	internet address = 183.192164.119.
ns4.dnsv5.com	internet address = 223.166151.126.
ns4.dnsv5.com	has AAAA address 2402:4e00:1020:1264:0:9136:29b6:fc32
ns4.dnsv5.com	internet address = 52.198159.146.
ns4.dnsv5.com	internet address = 59.36120.147.

> server 129.211176.212. 
Default server: 129.211176.212.
Address: 129.211176.212.#53
> set type=a
> www.bilibili.com. // Request the ipv4 address of www.bilibili.com. From the authoritative DNS server
Server:		129.211176.212.
Address:	129.211176.212.#53

www.bilibili.com	canonical name = a.w.bilicdn1.com.  / / cname record

> a.w.bilicdn1.com. // Get the ipv4 address of the CDN content distribution address
Server:		129.211176.212.
Address:	129.211176.212.#53

a.w.bilicdn1.com	canonical name = s.w.bilicdn1.com.  // The local DNS server takes these addresses and returns them to the parser, which then caches them to the browser. The browser can then connect to the server using an IP address
Name:	s.w.bilicdn1.com
Address: 119.365.164.
Name:	s.w.bilicdn1.com
Address: 119.377.172.
Name:	s.w.bilicdn1.com
Address: 120.92218.109.
Name:	s.w.bilicdn1.com
Address: 120.92168.51.
Copy the code

The following is the DNS resolution result of m.taobao.com

> set type=ns

> m.taobao.com

Server: 2408:840c:de5f:e936::1c

Address: 2408:840c:de5f:e936::1c#53


Non-authoritative answer:

m.taobao.com canonical name = h5.m.taobao.com.danuoyi.tbcache.com.


Authoritative answers can be found from:

danuoyi.tbcache.com

origin = danuoyins7.tbcache.com

mail addr = root.taobao.com

serial = 2012031100

refresh = 3600

retry = 3600

expire = 604800

minimum = 300

> set type=a

> m.taobao.com

Server: 2408:840c:de5f:e936::1c

Address: 2408:840c:de5f:e936::1c#53

Non-authoritative answer:

m.taobao.com canonical name = h5.m.taobao.com.danuoyi.tbcache.com. // LDNS returns the IP address of the CNAME record

Name: h5.m.taobao.com.danuoyi.tbcache.com

Address: 27.221120.54.

Name: h5.m.taobao.com.danuoyi.tbcache.com

Address: 27.221120.53.

>
Copy the code

Dig command can directly view the corresponding domain name including NS records, A records, MX records and other related information

dig m.taobao.com

; <<>> DiG 9.106. <<>> m.taobao.com

;; global options: +cmd

;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 43746
;; flags: qr rd ra; QUERY: 1.ANSWER: 3.AUTHORITY: 0.ADDITIONAL: 1
;; OPT PSEUDOSECTION:
; EDNS: version: 0.flags:; udp: 512;; QUESTION SECTION: ; m.taobao.com. IN A ;; ANSWER SECTION: m.taobao.com.153 IN CNAME h5.m.taobao.com.danuoyi.tbcache.com.
h5.m.taobao.com.danuoyi.tbcache.com. 60 IN A 27.221120.54.
h5.m.taobao.com.danuoyi.tbcache.com. 60 IN A 27.221120.53.


;; Query time: 61 msec
;; SERVER: 2408:840c:de5f:e936::1c#53(2408:840c:de5f:e936::1c)
;; WHEN: Sun Oct 31 17:15:58 CST 2021
;; MSG SIZE  rcvd: 119
Copy the code

Dig m.taobao.com +trace

rainbow@MacBook ~ % dig m.taobao.com +trace

; <<>> DiG 9.106. <<>> m.taobao.com +trace

;; global options: +cmd

. 463166 IN NS k.root-servers.net.

. 463166 IN NS c.root-servers.net.

. 463166 IN NS l.root-servers.net.

. 463166 IN NS i.root-servers.net.

. 463166 IN NS e.root-servers.net.

. 463166 IN NS g.root-servers.net.

. 463166 IN NS j.root-servers.net.

. 463166 IN NS m.root-servers.net.

. 463166 IN NS a.root-servers.net.

. 463166 IN NS f.root-servers.net.

. 463166 IN NS d.root-servers.net.

. 463166 IN NS h.root-servers.net.

. 463166 IN NS b.root-servers.net.

;; Received 239 bytes from 2408:840c:de5f:e936::1c#53(2408:840c:de5f:e936::1c) in 46 ms

com. 172800 IN NS l.gtld-servers.net.

com. 172800 IN NS b.gtld-servers.net.

com. 172800 IN NS c.gtld-servers.net.

com. 172800 IN NS d.gtld-servers.net.

com. 172800 IN NS e.gtld-servers.net.

com. 172800 IN NS f.gtld-servers.net.

com. 172800 IN NS g.gtld-servers.net.

com. 172800 IN NS a.gtld-servers.net.

com. 172800 IN NS h.gtld-servers.net.

com. 172800 IN NS i.gtld-servers.net.

com. 172800 IN NS j.gtld-servers.net.

com. 172800 IN NS k.gtld-servers.net.

com. 172800 IN NS m.gtld-servers.net.

com. 86400 IN DS 30909 8 2 E2D3C916F6DEEAC73294E8268FB5885044A833FC5459588F4A9184CF C41A5766

com. 86400 IN RRSIG DS 8 1 86400 20211113050000 20211031040000 14748 . UvOiNcstOVmquPVckZTy9fhSKPEyXjQQmCv6btBlzTyks507IcApk6jo 37/jCx3RkRrtLuQefqicdyY9T8TI4d6nPOIVzTAAES8M667GArQwLM2o Cg8hPTf5Uu7H8E4kRY6FW99slddZs6fq/tJmGnfzyrOfNjt9wsPq/n3O PGwqwF20yYthlTzO7kcZCARb9wECcpys4wblRAhqTnS2CIFcWuu6xE3i sp/8b1y6t9BdKBX9DAwQF1yadSECCa+smOrajkqkER+yysqWJ73ZI0mB CYm38GRKYzlmuWsjhK40pSceNrTThMurCgFz2f6y3sJQUEfW4ws5r4/D 85hYmg==

;; Received 1172 bytes from 192.203230.10.#53(e.root-servers.net) in 354 ms


taobao.com. 172800 IN NS ns4.taobao.com.

taobao.com. 172800 IN NS ns5.taobao.com.

taobao.com. 172800 IN NS ns6.taobao.com.

taobao.com. 172800 IN NS ns7.taobao.com.

CK0POJMG874LJREF7EFN8430QVIT8BSM.com. 86400 IN NSEC3 1 1 0 - CK0Q1GIN43N1ARRC9OSM6QPQR81H5M9A  NS SOA RRSIG DNSKEY NSEC3PARAM

CK0POJMG874LJREF7EFN8430QVIT8BSM.com. 86400 IN RRSIG NSEC3 8 2 86400 20211104042339 20211028031339 15549 com. ZJG+SDuthSXu/Q4z/NJoVFI8s0WLyUrnMSuA9oSSuyPKoCyylh0XaPLh gLjdYQogtptxU+2heFWaLP+WSxfr+LzKpoTiuiG1cDl3BS1l0hbNBktm JC2WplzT7Mxg/3Z5l12g+2uN1/Qpp9Og2sZ66B4Th9nuSFXNmzshDOYT E8sjVT6x650u9mKVLfhOY4CqPhJeoMEvnPq/krqT4cQ3Cw==

D9N2ANM7BT92D9HP8CETPLBM45COQFF8.com. 86400 IN NSEC3 1 1 0 - D9N3BRU90NI6RBGKREJNQNC0EO65R34E  NS DS RRSIG

D9N2ANM7BT92D9HP8CETPLBM45COQFF8.com. 86400 IN RRSIG NSEC3 8 2 86400 20211104045219 20211028034219 15549 com. ArrPhDpmno6ade/a+9Ocp1jiZmdxwdjtj5g6cSTGBsCGiNlsAalIsio+ EyGvaq56eIxCXLKfIVWPQUTHdp5kgA6J/nacf0UPCksJch1p1s/DDodE z4e14+dtL9cNIc/3nyideha08vDZTeejgzGz3FdD0tDd6t+lYumuvRMI 9QoGvz54fWLAiaSI4ezETR0WNHIlq6a668tOZb+ZuekxqQ==

;; Received 902 bytes from 192.3180.30.#53(d.gtld-servers.net) in 293 ms


m.taobao.com. 600 IN CNAME h5.m.taobao.com.danuoyi.tbcache.com.

;; Received 90 bytes from 198.11138.245.#53(ns4.taobao.com) in 222 ms
Copy the code

You can also view domain name registrations further:

bilibli.comTaobao was founded in 2003, but started to buy a lot of domain names around 2000 (also found a domain name purchased by the agency in 2000).

CDN content distribution

Reference: Aliyun CDN service

CDN is a distributed network composed of servers in different regions, which is established and covered on the bearer network. The resource of the source site is cached to all edge nodes for users to obtain nearby, which reduces the pressure of the source site, speeds up the distribution of website content and provides the speed of resource access.

Through the DNS domain name resolution above, the domain name and address of www.baidu.com will be resolved, and it will be found that a.w.bilicdn1.com is returned. Generally, large websites will use CDN websites for content distribution because of the large number of customer visits and high requirements for website access speed.

Assumes that you have only one server, the server is in the Beijing area, Shanghai to establish a connection with you can only access to the server in Beijing, but if you have a server in Shanghai, don’t need through multiple nodes, you can from Shanghai to the nearest server access to resources, to avoid the network time delay, and the ability to quickly provide services.

CDN also has the function of caching. If you need to access 1.jpB, your request will be sent to the nearest CDN server. The nearest CDN server will check whether it has 1.jpB’s cache and return it to you directly.

  • There will also be problems with CDN. The image is changed after publication, but the image name is still 1.jpg. Although the content is changed, the webpage content is still unchanged, so the CDN cache needs to be manually refreshed. Or the image name may refresh the cache with a hash value

This is similar to how webpack clears the cache every time it is packed without using the hash file name.

  • The process of combining DNS and CDN is as follows:
    • The browser client enters the URL and performs DNS domain name resolution to check whether the local hosts file and cache exist. If yes, the browser client sends a request to the local DNS serverwww.bilibili.comThe IP address of the
    • The root server looks for the domain name address of com and returns it to LDNS
    • LDNS then sends a request to com’s domain name server to look forbilibi.comCom returns the IP address of the authorized CDN corresponding to the corresponding CNAME
    • The authorized CDN returns the IP address of the nearest CDN node according to its own scheduling system.
    • LCDN retrieves the IP address of the nearest CDN node and returns it to the browser client
    • The browser client connects and communicates with the nearest CDN node to request resources

A TCP connection

After the DNS domain name is resolved, the browser client establishes a connection with the server using the TCP handshake mechanism.

  1. Confirmation mark
  2. Negotiate the serial numbers of both parties

Three-way handshake

  1. On the first connection, C sends a TCP packet to S, sending SYN=1, SEq =100(assuming) sends THE serial number of C to S, telling S THAT I want to request data

  2. On the second connection, S sends a TCP packet to C, sending the flag bit SYN=1, ACK=1, ACK= 100+1, seq=200, sending the flag bit and its serial number to tell C that your request has been fully received and you can provide services to me or you. However, AT this time, S does not know whether C has received the packet he sent

  3. For the third connection, C sends a packet ACK=1 and ACK= 200+1 to S, telling the server that I have received the information you sent. I have known that you have received and sent normally, and that you have sent and received normally. We start to establish a connection.

    • Seq is random because there may be multiple C’s sending requests to S, and S needs to confirm that C1’s message was sent by C1
    • Serial numbers are randomly 32 bits to reduce the probability of data collisions
    • S also needs to send its serial number to C to make it more convenient to tell C that I have received the 100 data you sent. Next time, you can directly send from the data of 101

Four times to wave

  1. At the first wave, C sends a TCP packet flag FIN=1 and SEQ =300, telling S that I want to disconnect from you
  2. For the second wave, S sends a TCP packet with ACK=1 and ACK= 300+1, telling C that I have received your application, but I am not ready
  3. For the third wave, S sends a TCP packet FIN=1, SEq =500, sends its serial number, and tells C that the data has been sent and we can disconnect
  4. For the fourth wave, C sends a TCP packet with ACK=1, ACK= 500+1, telling S I know you are ready, I am ready, let’s disconnect

The best way to understand

  • Start a client (172.12.0.1)
  • Start a new server (172.12.0.2)
  • Simulate send request 172.12.0.1>172.12.0.2
  • Using the tcpdump command, you can clearly see the three-way handshake between the client and server, and the seQ sequence number and ACK confirmation number sent

Difference between HTTP and HTTPS

After establishing a TCP connection, the browser client sends an HTTP or HTTPS request. The request usually returns an HTML file.

Most data is transmitted through HTTPS. Therefore, after the TCP three-way handshake, more asynchronous TLS handshake is used for encrypted transmission to ensure data transmission security.

  1. On the security

  • HTTP transmits data in plaintext, unencrypted

  • HTTPS is SSL+HTTP, and data is transmitted encrypted

  1. Configuration differences
  • HTTPS requires the CA to apply for a certificate, and then generate the public key and private key of the certificate. During transmission, S sends the public key to C, and C generates a random value based on the public key of S. S receives the random value sent by C, and only S can decrypt the random value, ensuring data security.
  • HTTP starts the Web server application layer using HTTP data transport by default
  1. Response speed

  • HTTP pages respond faster than HTTPS pages

  • For HTTP data connections, the client and server exchange three packets, but HTTPS adds nine packets for an SSL handshake in addition to the three packets for TCP, for a total of 12 packets

    • The application layer and transport layer add a security layer is SSL protocol
  1. Different ports
  • 80, 443,

The browser renders the page

After establishing a TCP connection with the server, the browser client sends an HTTP request to the server. The server responds to the browser client with an HTML file.

The server will return an HTML page in binary format, which is essentially a text file. The server’s response header also contains a Content-Type attribute =text/ HTML that tells the browser that it is returning an HTML document. The browser can convert the binary format into a readable HTML file. HTML elements into JS objects, objects created, will form DOM tree according to the nested structure of elements;

The browser parses the HTML file

Create a DOM tree

Data is propagated in binary form:

  • Convert binaries into HTML files that developers can understand, but browsers can’t
  • The browser parses the HTML file sequentially from top to bottom, with only one main thread parsing
  • Browsers convert characters in HTML into tokens; The character is tokenized and turned into something the browser can understand.
/ / token
      
<html>
    <head>
    <link rel=.>
    </head>
    </body>
</html>// Will be converted to the start tag: HTML head... End tag: Head...Copy the code
  • Tokens are converted into node objects that JS can manipulate
  • The node object is connected to form the node object model. DOM is the language of the browser itself. Each node object is connected to form a parent-child relationship, and the subsequent operation of a node by the browser will be more convenient
    • A link tag is encountered and a request is sent to the server for external links, such as CSS files
    • When a Script tag is encountered, a request is sent to the server for the JS file
    • The main thread will pause parsing the HTML file, execute the JS code in the JS file, and then continue parsing the HTML file after the JS code is executed
    • Img tags, CSS files, and defer do not affect the main thread, but are loaded asynchronously
    • If the js file is returned first, the js file will be blocked when parsing the JS file, so the JS file cannot be executed first. It must wait for the completion of the CSSOM construction to execute the JS file, because the rendering tree needs to be built after the DOM and CSSOM construction. Js can control the CSS style. So this step
    • The browser has a pre-scan thread that will pick up the HTML file and download the CSS, JS and font files in advance. The download is asynchronous and does not affect the main thread
    • It’s like building a house, turning a construction contract into a mini-frame

Create CSSOM

The browser overwrites the stylesheet with a developer defined CSS file, such as reset.css, to override the browser’s default stylesheet. The CSSOM tree is created. Even if there is no browser default stylesheet, each style attribute is set to a default value according to the W3C. Inheritance properties are used.

  • General CSS styles are added as external links to the link tag
  • When the browser builds the DOM and encounters the Link tag, it sends a request to the server to retrieve the CSS file
  • The CSS file is also returned to the browser in binary form. The browser converts the file into characters, characters into tokens, tokens into node objects, and node objects into CSSOM with parent-child relationships

Create render tree

The DOM and the styles of each node and CSSOM corresponding nodes are combined to form the render tree.

  • The render tree does not contain display: None or size 0 elements, nor does it contain meta and link tags, etc.
  • Render trees capture only visible nodes
  • The render tree does not contain location and size information of nodes

The layout phase

Calculates the position and size of the elements on the device viewport

  • The browser calculates the position and width of each visible node according to the node style, that is, the node without display: None, and then draws it on the screen
  • However, for images, if the width and height are not executed, the browser will ignore the size of the image. After the image is loaded, the browser will calculate the size and position of the affected node again based on the width and height and position of the image, that is, reflow reflux.
  • The layout is represented according to the box model
  • The structure for such a house is already in place

Redraw phase

  • Draw the render tree on the page as pixels, and the page is rendered
  • The browser fills every pixel of any visible attribute of the element: background color, border, shadow
  • Scrolling through Windows, resizing Windows, and manipulating DOM elements all cause redrawn reflows
  • If backflow occurs, such as after an image has been loaded, and the location and size of the affected nodes are recalculated after the image has been loaded, the browser will redraw, redrawing the changed layout onto the screen.

The script tag of the defer property

After the above steps are complete, the script tag set to defer is loaded and executed

<script defer src={... } / >

The page is loaded and rendered, and the user can interact with the page

Browser caching mechanism

Page rendering optimization