输入url到页面展示后发生什么

willow
16 阅读12分钟

浏览器搜索框按下回车后发生了什么？

  1. 解析URL：输入url并回车后浏览器进程检查url，组装协议去构成完整的url，浏览器进程通过进程间通信（IPC）把url请求发送给网络进程。
  2. 缓存检查：网络进程收到url请求后检查本地缓存是否有缓存，如果有则将该资源返回给浏览器进程。
  3. 网络进程向服务器发起网络请求：① 进行DNS解析获取服务器的ip、端口；② 浏览器需要和服务器建立连接，进入TCP队列进行三次握手；③ HTTPS建立TLS连接；④ 向服务器发送HTTP请求（请求行、请求头、请求体）。
  4. 服务器处理请求并返回响应: 网络进程接收响应头和响应信息并解析响应内容。状态码内容 ① 如果是301、302那么就是数据重定向，从Location获取地址重新发起请求；② 如果是304那么就是使用本地缓存； ③ 如果是200，那么检测响应类型Content-Type,字节流类型那么提交给下载管理器进行下载；html则需要渲染页面，通知浏览器进程准备渲染进程。
  5. 数据传输完成：TCP四次挥手断开连接。如果HTTP头部加上Connection:Keep-Alive，TCP就一直保持连接。保持TCP连接可以省下下次需要建立连接的时间，提示资源加载速度。
  6. 渲染进程接收数据：渲染进程收到消息后，会和网络进程建立传输数据的“管道”，文档数据传输完成后，渲染进程会返回“确认提交”的消息给浏览器进程。
  7. 浏览器更新页面状态：浏览器收到“确认提交”的消息后，会更新浏览器的页面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新web页面，此时的web页面是空白页。
  8. 页面渲染：

a. Parse HTML:将HTML内容转成浏览器能够读懂的DOM树结构；
b. Parse StyleSheet： 将css样式表转化为浏览器可以理解的css树；
c. Recalculate Style: 计算出DOM每一个节点对应的具体样式；
d. Layout：DOM树与CSS树创建布局树，并计算元素的布局信息；
e. Layer Tree:对布局树进行分层，生成图层树；会生成图层情况：video position:fixed canvas css动画 transform等；
f. Paint：对每一个图层进行绘制；
g. Composite Layers：合并图层；

五层模型？

  1. 物理层：使用一定的物理介质(光纤、双绞线)
  2. 数据链路层：帧同步、MAC寻址(Wi-Fi、交换机)
  3. 网络层：路由选择、IP寻址，把数据包送达目的主机(IP协议)
  4. 传输层: 负责端到端的通信，把数据完整地送达主机里面的应用程序(UDP、TCP)
  5. 应用层：为用户提供网络服务(HTTP、HTTPS、DNS、WebSocket)

DNS解析？

  1. DNS是什么？域名系统(Domain Name System)，根据域名如返回对应的IP。整个网络中存在着无数个服务器，每一个服务器都有它自己的唯一标识—ip地址，但是ip不好记忆，所以需要域名如baidu.com。域名就相当于是ip地址的别名。
  2. 作用？浏览器地址栏输入域名，会去DNS服务器上找到对应的外网IP，然后基于服务器的外网IP，找到服务器
  3. 解析过程？ ①首先会在浏览器的缓存中查找对应的IP地址，没有的话请求发送给本地DNS服务器；②在本地域名服务器缓存中查询，没有的话本地DNS服务器向根域名服务器/顶级域名服务器/权威域名服务器发送请求。③最后将返回结果保存在缓存中，便于下次使用。
  4. 前端优化:尽可能减少DNS解析需要的时间

① 把不同资源分不同的服务器部署（web服务器、图片服务器、数据服务器）
② DNSPrefetch:DNS预解析，利用<link>的异步性，在GUI染过程中，同时去解析域名

UDP与TCP的区别是什么？

  1. UDP (User Datagram Protocol用户数据包协议)：是一种无连接的传输层通信协议，不能保证数据可靠性，但是传输速度却非常快。
  2. TCP(Transmission Control Protocol传输控制协议) ：是一种面向连接的、可靠的、基于字节流的传输层的通信协议。

面向连接：一个完整的 TCP 连接的生命周期包括了“建立连接”、“传输数据”和“断开连接”；
可靠：对于数据包丢失的情况，TCP 提供重传机制；并且有数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件。
① 建立连接:是指在建立一个TCP连接时，客户端和服务器总共要发送三个数据包以确认连接的建立。
② 传输数据：接收端需要对每个数据包进行确认操作，在规定时间内没有接收到接收端反馈的确认消息，则判断为数据包丢失，并触发发送端的重发机制。
③ 断开连接：用“四次挥手”来保证双方都能断开连接。

  1. UDP与TCP区别？

a. 是否面向连接：UDP无连接;TCP面向连接
b. 可靠性：UDP不可靠；TCP是可靠传输，重传机制、排序机制。
c. 连接对象个数：UDP可以多对多；TCP只能一对一传输
d. 传输方式：UDP是面向报文；TCP是面向字节流
e. 适用场景：UDP适用于实时应用，如直播、视屏；TCP适用于可靠运算，如文件传输

TCP三次握手四次挥手？

  1. 状态控制码：SYN：发起一个新连接；FIN：释放一个连接；ACK：确定序号有效；seq序号；ack确认序号；
  2. 三次握手：为了确认双方的接收能力和发送能力是否正常。

a. 客户端向服务器发送SYN连接请求报文段和随机序号SYN=1 seq=x；
b. 服务器收到连接请求，向客户端发送SYN、ACK报文段以及随机序号SYN=1 ACK=1 ack=x+1 seq=y；
c. 客户端接收到服务端的确认应答后进入连接建立的状态，向服务端发送一个ACK确认报文段ACK=1 ack=y+1；

  1. 四次挥手：当服务器端收到FIN报文时，很可能并不会立即关闭链接。所以只能先回复一个ACK报文，告诉客户端我收到了，等到服务器端所有的报文都发送完了，才能发送FIN报文，因此不能一起发送，故需要四步握手。

a. 客户端认为数据发送完成，它会向服务端发送连接释放请求 FIN=1 seq=x；
b. 服务端收到连接释放请求后，会发送ACK=1 ack=x+1，然后服务端继续发送数据给客户端；
c. 服务端传输完毕后会向客户端发送连接释放请求FIN=1 seq=y，然后服务端便进入LAST-ACK状态；
d. 端收到释放请求后，向服务端发送确认应答ACK=1 ack=y+1，此时客户端进入TIME-WAIT状态，若该时间段内没有服务端的重发请求的话，就进入CLOSED状态，服务端收到确认应答后，也便进入CLOSED状态

常见的请求方法？

  1. GET：向服务器获取数据
  2. POST：将实体提交给指定的资源，通常是修改
  3. HEAD：获取报文首部，不返回报文主体
  4. OPTION：询问支持的方法，通常用作跨域请求
  5. DELETE：删除服务器的对象
  6. PUT：上传文件，更新数据
  7. CONNECT：要求在与代理服务器通信时建立隧道，使用隧道进行 TCP 通信；

get与post的区别是什么？

  1. 作用上：get请求主要用来向服务器请求资源，post请求主要用来向服务器发送数据
  2. 参数上：GET参数通过URL传递，POST放在Request body中；由于url地址长度有限制,GET请求在url中传送的参数是有长度限制的，而 POST 没有。
  3. 安全上：GET比POST更不安全，因为参数直接暴露在url上，所以不能用来传递敏感信息；
  4. 编码方式：GET 请求只能进行url编码，而POST支持多种编码方式。
  5. 缓存上：GET 请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留；GET 产生的url地址可以被Bookmark，而POST不可以。

HTTP状态码？

  1. 2XX: 200（OK）：表示请求成功；204（No content）：表示请求成功，但响应报文不含实体的主体部分；206（Partial Content）：进行范围请求
  2. 3XX：301（moved permanently）：永久重定向; 302（found）：临时重定向，如跳转到登录页面; 304（not modified）：未修改，使用浏览器的本地缓存
  3. 4XX: 400（bad request）:请求报文有错误; 401（unauthorized）：未登录；403（forbidden）：没有足够的权限；404（not found）：服务器没有找到资源
  4. 5XX: 500（internal sever error）:服务器错误; 501（Not Implemented）：表示服务器不支持当前请求所需要的某个功能; 503（service unavailable）：服务目前无法使用

HTTP？

  1. 是什么：HTTP（Hypertext Transfer Protocol）超文本协议传输，是应用层的协议，定义了客户端与服务器之间交换报文的格式与方式，默认是80端口，使用TCP作为传输层协议，保证数据的可靠性。
  2. 请求报文：① 请求行GET /index.html?username=XX HTTP/1.1（请求的方式、资源的路径、协议的版本）；② 请求头（用来告诉服务器我们浏览器的信息）；③ 请求体（post请求通过请求体来发送数据）
  3. 响应报文：① 响应⾏HTTP/1.1 200 OK 由网络协议版本，状态码和状态码的原因短语组成；② 响应头（用来告诉浏览器响应的信息）；③ 响应体（服务器响应的数据）
  4. 优点：a. 简单快速：客户向服务器请求服务时，只需传送请求方法和路径；b. 无状态：是无状态协议，这里的状态是指通信过程的上下文信息；c. 无连接：无连接就是限制每次连接只处理一个请求；d. 灵活：HTTP 允许传输任意类型的数据对象。正在传输的类型由 Content-Type 加以标记。
  5. 缺点：a. 无状态：HTTP 是一个无状态的协议，HTTP 服务器不会保存关于客户的任何信息； b. 明文传输：协议中的报文使用的是文本形式，这就直接暴露给外界，不安全； c. 安全：通信使用明文（不加密），内容可能会被窃听；不验证通信方的身份，因此有可能遭遇伪装；

HTTPS？

  1. 是什么：超文本传输安全协议，它经由HTTP进行通信，并利用TLS/SSL来加密数据包。目的是为了提供对网站的身份认证以及保证数据的私密性。
  2. HTTPS 所有的安全核心都在安全层，安全层有两个主要的职责：对发起HTTP请求的数据进行加密操作和对接收到 HTTP 的内容进行解密操作。
  3. 数字证书：一个是通过数字证书向浏览器证明服务器的身份，另一个是数字证书里面包含了服务器公钥。
  4. 对称加密：指加密和解密都使用的是相同的密钥。协商秘钥的过程容易被窃取。
  5. 非对称加密：服务端用私钥加密的内容，浏览器可以通过公钥进行解密。只用非对称加密的效率太低，服务器发送给浏览器的数据需要使用公钥解密，黑客也是可以获取得到公钥的，这样就不能保证服务器端数据的安全了。
  6. 怎么传输数据？ 搭配使用两种加密，用非对称加密交换密钥、对称加密传输内容。
  7. 过程？

ⅰ. 浏览器向服务器发送对称加密套件列表、非对称加密套件列表和随机数 client-random；
ⅱ. 服务器向浏览器发送选择的加密套件、service-random 和数字证书；
ⅲ. 浏览器验证数据证书有效性，生成随机数 pre-master，然后利用公钥对pre-master加密，向服务器发送加密后的数据，黑客不知道对应的私钥，所以黑客不能解密出pre-master；
ⅳ. 服务器拿出自己的私钥，解密出pre-master数据，并返回确认消息；
ⅴ. 服务器和浏览器就有了共同的 client-random、service-random 和 pre-master，然后服务器和浏览器会使用这三组随机数生成对称密钥。

HTTP与HTTPS区别？

  1. HTTP是超文本协议传输，定义了客户端与服务器之间交换报文的格式与方式，默认是80端口，使用TCP作为传输层协议，保证数据的可靠性;
  2. HTTPS是超文本传输安全协议，它经由http进行通信，并利用TLS/SSL来加密数据包。目的是为了提供对网站的身份认证以及保证数据的私密性；
  3. 端口：HTTPS是443、HTTP是80；
  4. 传输方式：HTTPS是加密传输、HTTP是明文传输
  5. 传输速度：HTTPS传输速度较慢，除了TCP三次握手，还有SSL握手9个包；
  6. 数字证书：HTTPS需要数字证书，费用较高；
  7. 安全性：HTTP是无状态的，HTTPS有SSL和HTTP构建的可进行加密传输、身份认证的网络协议，比HTTP更加安全。

链接

浏览器工作原理与实践

avatar
文章
阅读
粉丝