摘要
在数字化时代，我们与互联网的交互日益频繁。本文将深入探讨从浏览器输入URL到页面完全呈现的整个Web请求过程，包括页面渲染的两种主要机制：服务器渲染和前端JS渲染。
1. Web请求的起点：DNS查询
- 用户在浏览器地址栏输入
www.example.com。 - 浏览器查询DNS，将域名转换为IP地址，例如
93.184.216.34。
2. 建立TCP连接：三次握手
- 浏览器向服务器的IP地址发起TCP连接请求。
- 通过三次握手过程，建立稳定的网络连接。
3. HTTP请求的发送
- 浏览器构建HTTP请求，例如：
GET /index.html HTTP/1.1 Host: www.example.com - 发送请求到服务器。
4. 服务器处理请求
- 服务器接收请求，定位资源或执行程序。
- 例如，请求
/index.html页面。
5. 响应数据的发送
- 服务器发送HTTP响应，包括状态码、响应头和响应体，例如：
HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 <html> <head><title>Example Web Page</title></head> <body>...</body> </html>
6. 浏览器渲染页面
- 浏览器接收到HTML内容后，开始构建DOM树。
- 根据HTML、CSS和JavaScript进一步构建渲染树并显示页面。
7. 页面渲染数据的两种方式
- 服务器渲染：
- 例如，访问
www.newssite.com，HTML页面直接包含新闻内容。
- 例如，访问
- 前端JS渲染：
- 访问
www.socialmedia.com，初始HTML只包含框架，JavaScript动态加载帖子和评论。
- 访问
8. 服务器渲染的流程
- 用户访问
www.weathersite.com查询天气。 - 服务器返回含有天气信息的HTML页面。
- 浏览器直接渲染页面，用户立即看到天气数据。
9. 前端JS渲染的流程
- 用户访问电商网站
www.electronicsstore.com。 - 服务器首次返回包含导航和商品列表框架的HTML。
- 浏览器通过JavaScript发起额外请求，获取商品详情并填充到页面中。
10. 页面渲染的挑战与解决方案
- 服务器渲染页面：爬虫直接分析HTML，如使用Python的
requests库获取页面内容。import requests response = requests.get('http://www.example.com') html_content = response.text - 前端JS渲染页面：使用Selenium模拟浏览器行为，获取JavaScript执行后的页面内容。
from selenium import webdriver browser = webdriver.Chrome() browser.get('http://www.example.com') html_content = browser.page_source
11. 结论
- 理解Web请求全过程对于开发高效、可靠的网络应用至关重要。
- 掌握页面渲染机制有助于开发者更好地进行性能优化和数据抓取。
注意事项
- 在进行网页爬取时，应遵守目标网站的爬虫政策和法律法规，尊重数据来源的版权和隐私。
本文通过举例和代码示例，帮助读者全面理解Web请求的每个环节，为进一步的网络编程和数据抓取打下坚实的基础。
标签：Web,www,浏览器,请求,渲染,URL,com,页面 From： https://blog.csdn.net/weixin_43822401/article/details/140436249