输入URL到页面加载

作者: tanoak | 来源:发表于2018-09-09 01:33 被阅读13次

输入URL到页面加载
2018-04-12
从输入 URL 到页面加载完成的过程中都发生了什么事情
输入URL到页面加载
前端JS基础十一（页面加载、性能优化和安全性）
加载资源
你必须要知道的前端性能优化！
前端性能优化
从输入URL到页面加载
从输入url到页面加载完成过程详解

DNS解析=>发送到DNS获得域名对应的WEB服务器的IP地址。

什么是DNS？

  DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析

TCP连接=>客户端浏览器与WEB服务器建立TCP连接。

什么是TCP?

来自维基百科：传输控制协议（Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793定义。在简化的计算机网络OSI模型中，它完成第四层传输层所指定的功能，用户数据包协议（UDP）是同一层内另一个重要的传输协议

TCP三次握手

1e.jpg
TCP四次挥手

1f.jpg

发送HTTP请求=>客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求。

什么是HTTP？

来自维基百科：超文本传输协议（HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。
HTTP是一个客户端终端和服务器端请求和应答的标准（TCP）。通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口。

什么是HTTPS？

HTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包。HTTPS开发的主要目的，是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。

什么是HTTP报文

HTTP报文分为请求报文和响应报文。

HTTP请求报文

HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文

1a.jpg

   1. 请求行

 ```
 请求方法
    HTTP/1.1 定义的请求方法有8种：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。
    最常的两种GET和POST，如果是RESTful接口的话一般会用到GET、POST、DELETE、PUT。
 请求地址
    URL:统一资源定位符，是一种自愿位置的抽象唯一识别方法。
    ps: lcaolhost:8080/test?id=1
 协议版本
    HTTP/主版本号.次版本号，常用的有HTTP/1.0和HTTP/1.1或HTTP/2.0
 ```

 

  2. 请求报头

  ```
  请求报头包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。
  ps: 以下是一个网页的请求头
  ```

  ```
  Accept: */*
  Accept-Encoding: gzip, deflate, br
  Accept-Language: zh-CN,zh;q=0.9
  Cache-Control: no-cache
  Connection: keep-alive
  Content-Length: 304
  Content-Type: text/plain;charset=UTF-8
  Cookie: uuid_tt_dd=10_10182085750-1534343900233-221444; dc_session_id=10_1536031388561.995356; Hm_lvt_6bcd52f51e9b3dce32bec4a3997715ac=1536390135,1536390278,1536390842,1536390848; Hm_lpvt_6bcd52f51e9b3dce32bec4a3997715ac=1536390848; dc_tos=peq6rk
  Host: pv.csdn.net
  Origin: https://www.csdn.net
  Pragma: no-cache
  Referer: https://www.csdn.net/
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.81 Safari/537.36
  ```

 3. 请求正文

 ```
 页面表单中的组件值通过param1=value1&param2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。
 ps: /test/abc.html?param1=value1&param2=value2
 ```

服务器处理请求并返回HTTP报文=>WEB服务器响应请求，返回指定的URL数据或错误信息；如果设定重定向，则重定向到新的URL地址。
- 响应报文
```
HTTP响应报文是由三部分组成: 状态行, 响应头部和响应数据
```

1b.jpg

  1. 响应码

      ```
      1xx：指示信息--表示请求已接收，继续处理。
      2xx：成功--表示请求已被成功接收、理解、接受。
      3xx：重定向--要完成请求必须进行更进一步的操作。
      4xx：客户端错误--请求有语法错误或请求无法实现。
      5xx：服务器端错误--服务器未能实现合法的请求。
      ```

  2. 响应头部

      ```
      Access-Control-Allow-Credentials  
      true
      Access-Control-Allow-Headers  
      DNT,X-CustomHeader,Keep-Alive,…che-Control,Content-Type,body
      Access-Control-Allow-Methods  
      GET, POST, OPTIONS
      Access-Control-Allow-Origin   
      https://www.csdn.net
      Connection    
      keep-alive
      Date  
      Sat, 08 Sep 2018 07:07:28 GMT
      Keep-Alive    
      timeout=20
      Server    
      openresty
      Transfer-Encoding 
      chunked
      ```
  3. 响应数据