recommended reading
Project Practice: Best Practices for AI Text OCR Recognition
AI Gamma generates PPT tool direct link with one click
Play with cloud Studio, the online coding tool
Play with GPU AI painting, AI speech, and translation, GPU lights up the AI imagination space
Information sharing
Sharing of the most complete documentation of AI painting stablediffusion in history
AI painting about SD, MJ, GPT, SDXL encyclopedia
AI painting stable diffusion Midjourney official GPT document AIGC encyclopedia data collection
「java、python面试题」来自UC网盘app分享，打开手机app，额外获得1T空间
https://drive.uc.cn/s/2aeb6c2dcedd4
AIGC资料包
https://drive.uc.cn/s/6077fc42116d4
https:
## 引言
在当今互联网时代，我们每天都会通过浏览器访问各种网页。但是，你是否曾经思考过在我们输入一个URL后，浏览器是如何加载并显示页面的呢？这背后涉及到一系列复杂的技术和过程。本文将带领大家深入了解从输入URL到页面展示的过程，并给出相应的代码示例，让我们一起探索这个神奇而又复杂的世界。
## 1. 网络请求的发起
通过浏览器输入URL后，浏览器会根据协议类型（如HTTP或HTTPS）向服务器发起请求。这个过程可以通过下面的代码示例来体现：
```javascript
const url = "https://example.com";
fetch(url)
.then(response => response.text())
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
In the code, we use JavaScript's fetch API to initiate network requests and convert the server response into text and output it to the console.
2. DNS resolution
Before sending a network request, the browser first needs to resolve the domain name in the URL into the corresponding IP address. This process is called DNS resolution. The following is a simplified version of the DNS resolution sample code:
const dns = require('dns');
const domain = "example.com";
dns.resolve(domain, 'A', (err, addresses) => {
if (err) {
console.error(err);
return;
}
console.log(addresses);
});
In the above code, we use the Node.js dnsmodule to perform DNS resolution and output the resolved IP address.
3. Establish TCP connection
After DNS resolution, the browser will try to establish a TCP connection with the server. This process involves a three-way handshake to ensure that data can be transmitted safely and reliably. Here is a simplified TCP connection code example:
const net = require('net');
const serverIP = '192.168.0.1';
const port = 80;
const client = new net.Socket();
client.connect(port, serverIP, () => {
console.log('TCP connection established');
});
In the above code, we use the Node.js netmodule to create a TCP socket and connectestablish a connection with the server through methods.
4. Send HTTP request
After the TCP connection is established, the browser constructs an HTTP request and sends it to the server. Here is a simplified code example for sending an HTTP request:
const http = require('http');
const options = {
hostname: 'example.com',
port: 80,
path: '/',
method: 'GET'
};
const req = http.request(options, res => {
console.log(`HTTP response status code: ${
res.statusCode}`);
});
req.end();
In the above code, we use the Node.js httpmodule to create an HTTP request and requestsend it to the server through the method.
5. The server processes the request
After the server receives the HTTP request sent by the browser, it will process it accordingly based on the content of the request. This process usually includes operations such as route resolution and data query. Here is a simplified code example of how the server handles requests:
const http = require('http');
const server = http.createServer((req, res) => {
if (req.url === '/') {
res.writeHead(200, {
'Content-Type': 'text/plain' });
res.end('Hello, World!');
} else if (req.url === '/about') {
res.writeHead
(200, {
'Content-Type': 'text/html' });
res.end('<h1>About Page</h1>');
} else {
res.writeHead(404, {
'Content-Type': 'text/plain' });
res.end('Page not found');
}
});
server.listen(80, () => {
console.log('Server running at http://localhost:80/');
});
In the above code, we httpcreated a simple HTTP server using Node.js modules. Depending on the requested URL path, the server will return different response content.
6. Receive response data
When the server has processed the request and generated a response, the browser receives the response data. This process happens inside the browser and we don't have direct access to its code. The browser will store the response data in the cache and prepare it for subsequent parsing and rendering.
7. Parse HTML
After the browser receives the response data, it parses the HTML and builds a DOM tree. This process involves identifying HTML tags, attributes, text, etc. and converting them into manipulable data structures. Here is a simplified HTML parsing code example:
const parser = new DOMParser();
const htmlString = '<html><head><title>Hello, World!</title></head><body><h1>Welcome</h1></body></html>';
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.title); // Output: "Hello, World!"
console.log(doc.body.innerHTML); // Output: "<h1>Welcome</h1>"
In the above code, we use JavaScript's DOMParser to parse HTML strings and obtain the required information by manipulating the parsed DOM tree.
8. Build the DOM tree
After the browser parses the HTML, it will build a DOM tree based on the hierarchical relationship between tags. Each HTML element will be converted into a DOM node and form a hierarchy of parent-child nodes according to its nested relationship in HTML. Here is a simplified DOM tree building example:
const htmlString = '<html><head><title>Hello, World!</title></head><body><h1>Welcome</h1></body></html>';
const doc = new DOMParser().parseFromString(htmlString, 'text/html');
console.log(doc.documentElement); // Output: HTML元素节点
console.log(doc.documentElement.childNodes.length); // Output: 2，包含<head>和<body>
console.log(doc.documentElement.childNodes[1].childNodes[0]); // Output: <h1>Welcome</h1>
In the above code, we use DOMParser to parse the HTML string and obtain the node information of the DOM tree through access documentElementand attributes.childNodes
9. Render the page
After the DOM tree is constructed, the browser will render the page based on the structure and style information of the DOM tree. This process includes layout calculation, drawing elements, loading external resources and other operations, and finally displays the page to the user. Because the browser's rendering process is very complex, we cannot directly operate its rendering engine. However, we can use debugging tools to observe the rendering of the page.
10. User interaction and dynamic effects
After the page rendering is completed, users can interact with the page and enjoy rich dynamic effects. This includes actions such as clicking links, submitting forms, triggering events, etc. JavaScript plays an important role here, it can listen to user operations and update page content or execute corresponding logic accordingly.
11. Performance optimization
In order to provide a better user experience, we need to focus on performance optimization. This includes strategies such as reducing the number of network requests, compressing resource files, and using cache. At the same time, optimizing the way JavaScript and CSS are written can also improve the loading speed and responsiveness of the page.