从用户输入url, 到页面渲染完成

目录

• 从url到页面渲染完成的过程
• 请求报文, 响应报文
• curl命令

一. 从url到页面渲染完成的过程

1. 用户在浏览器输入url
2. 浏览器解析url => 域名 + 端口
3. 浏览器检查本地缓存, 若找到了这个域名, 返回ip
4. 若本地缓存没有这个域名, 发起DNS调用, 返回ip
5. 拿到ip后, 浏览器通过本地的随机端口建立一个与服务器指定端口( 一般是80端口 )的连接通道( 三次握手 )
6. 本地端口向服务器端口发送请求报文
7. 监听服务器端口的服务器软件拿到请求报文后, 解析请求报文:

(1. 读取请求报文, 拿到请求路径
(2. 根据路径对应文件的扩展名找到文件的MIME Type
(3. 读取文件
(4. 将要发给客户端的数据打包成响应报文
(5. 将响应报文通过通道发回

8. 服务器端口向本地端口发送响应报文
9. 浏览器拿到响应报文后, 解析响应报文

(1. 读取响应报文, 找到Content-Type
(2. 根据Contype-Type决定如何处理响应主体的内容

10. 渲染页面

(1.构建DOM树（深度优先)
(2.构建CSSOM树（深度优先)
(3.将DOM树和CSSOM树融合成rander树
(4.根据渲染树开始布局，计算节点几何信息，绘制页面
(5.浏览器发送请求HTML上的静态资源( 可选 )
(6.发送异步AJAX 请求( 可选 )

二. 请求报文, 响应报文

1. 请求报文:

   • 请求行( 动词 路径 协议/版本 )

     • 动词有 GET POST PUT PATCH DELETE HEAD OPTIONS等
     • 路径可以不写, 默认补/, 访问根目录, 路径里的锚点无法识别

   • 请求头( 键值对形式 )

   • 回车

   • 请求主体( 发送的数据 )

     
     image.png
     image.png

2. 响应报文:

   • 状态行( 协议/版本号 状态码 状态解释 )

     • 常见状态码:
       • 200: 正常处理
       • 204: 成功处理, 但是没有内容返回
       • 301: 请求的资源已经永久的搬到了其他位置
       • 302: 请求的资源临时搬到了其他位置
       • 400: 请求报文存在语法错误或参数错误，服务器不理解
       • 403: 对请求资源的访问被服务器拒绝了
       • 404: 服务器找不到你请求的资源

   • 响应头( 键值对形式 )

   • 回车

   • 响应主体( 服务器返回的数据 )

     
     image.png
     image.png

三. curl命令: 可以访问url

示例:
curl -s -v -H "class: jirengu" -- "http://www.baidu.com"

• -s参数: 省略加载进度和错误信息
• -v参数: 显示请求报文和响应报文等一些有助于调试的信息
• -H参数: 有了这个参数就可以给请求头添加一些信息, 例如上面的class: jirengu
  另外, curl还可以将url的内容下载到指定的文件下, 但只会下载html文件, 示例如下
  image.png
  要下载网站上加载的全部资源, 要用这个命令:
  
  wget -p -H -e robots=off https://www.baidu.com( windows下不支持 )