1. DNS解析

DNS通过域名找到对应服务器的外网IP
网站中，每发送一个TCP请求，都要进行DNS解析（一但当前域名解析过一次，浏览器一般会缓存解析记录，缓存时间一般在1分钟左右，后期发送的请求如果还是这个域名，则跳过解析步骤 =>这是一个性能优化点）
真实项目中，一个大型网站，他要请求的资源是分散到不同的服务器上的（每一个服务器都有自己的一个域名解析）

  • WEB服务器（处理静态资源文件，例如：html/css/js等 的请求）
  • 数据服务器（处理数据请求）
  • 图片服务器 （处理图片请求）
  • 音视频服务器
  • ……

这样导致，我们需要解析的DNS会有很多次
优化技巧：DNS Prefetch 即 DNS 预获取

让页面加载（尤其是后期资源的加载）更顺畅更快一些

  1. <meta http-equiv="x-dns-prefetch-control" content="on">
  2. <link rel="dns-prefetch" href="//static.360buyimg.com">
  3. <link rel="dns-prefetch" href="//misc.360buyimg.com">
  4. <link rel="dns-prefetch" href="//img10.360buyimg.com">
  5. <link rel="dns-prefetch" href="//img11.360buyimg.com">
  6. <link rel="dns-prefetch" href="//img12.360buyimg.com">
  7. .......
  8. 复制代码

2. 基于TCP的三次握手，构建客户端和服务器端的连接通道。

只有建立好连接通道，才能基于HTTP等传输协议，实现客户端和服务器端的信息交互

3. 发送HTTP请求

基于HTTP等传输协议，客户端把一些信息传递给服务器

  • HTTP请求报文（所有客户端传递给服务器的内容，统称为请求报文）
    • 请求头
    • 请求体

  • 强缓存 和 协商缓存（性能优化：减少HTTP请求的次数）

    • 强缓存 ( Cache-Control 和 Expires )
    • 协商缓存 ( Last-Modified 和 Etag )

      4. 服务器处理请求

      服务器接受到请求，并进行处理，最后把信息返回给客户端
      服务器返回的时候是：先把响应头信息返回，然后继续返回响应主体中的内容

      5. 把信息返回给客户端（断开连接TCP的四次挥手）

  • 当客户端把请求信息发送给服务器的时候，就挥第一次手：客户端告诉服务器端，我已经把请求报文都给你了，你准备关闭吧

  • 第二次挥手：由服务器发起，告诉浏览器，我接收完请求报文，我准备关闭，你也准备吧；
  • 第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完毕，你准备关闭吧；
  • 第四次挥手：由浏览器发起，告诉服务器，我响应报文接收完毕，我准备关闭，你也准备吧；

Connection: Keep-Alive 保持TCP不中断（性能优化点，减少每一次请求还需要重新建立链接通道的时间，四次挥手不执行）

6. 客户端拿到信息进行渲染

  1. 渲染引擎，是负责取得网页的内容，整理信息，以及计算网页的显示方式，然后输出到显示器上。

  2. JS引擎是用于解析和执行javascript来实现网页的动态效果。

    一次完整的HTTP事务

  3. 建立起TCP/HTTP传输通道（客户端和服务器端）

  4. 客户端正常发送请求
  5. 服务器端正常把信息返回
  6. 断开TCP/HTTP传输通道

较为全面的浏览器行为

浏览器进程

• 用户输入内容，进行URL 解析（编码）
• 如果是文本，则拼接成默认搜索引擎加关键字的 URL 进行搜索
• 如果是 URL 就进行页面访问请求，并加上协议头（http、https 的区别） 网络进程：
• 查询缓存（缓存相关知识）
• 如果有浏览器本地缓存可用则使用本地缓存
• DNS 解析（DNS 相关）
• 通过 DNS 来查询 IP 地址
• DNS 先查本地、后查运营商、逐级网上查。（域名解析是从后往前查的）
• 拿到 IP 地址发起 HTTP 请求（这块可以问网络相关各种基础知识，TCP、IP、UDP、HTTPS、HTTP2）
• 建立 TCP 三次握手连接
• 如果是 HTTPS 建立 TLS 安全通道连接（HTTPS 加密方式）
• 发送 HTTP 请求，这个请求可能回到代理服务器或者源服务器。（服务器代理）
• 拿到 HTTP 响应（HTTP 响应码）
• 根据 Content-Type 来判断响应文件类型（常用 HTTP 响应头的作用）
• stream 类，浏览器启动下载界面下载文件。
• text、图片类，浏览器直接展示在页面上
• html 类型，浏览器会进行页面解析。 渲染进程：
• 页面解析
• 网络进程向渲染进程传输 HTML 数据
• 对 HTML 进行词法分析，通过堆栈算法构建 DOM 树。（AST语法树）
• 如果遇到外部资源，浏览器会交给网络进程去下载。
• 构建完 DOM 树的同时，将 CSS 代码转为浏览器可以理解的 StyleSheets
• 标准化样式属性值（单位、大小）
• 计算出 DOM 树每个节点的具体样式
• 计算每个 DOM 节点的父节点们的样式（样式继承）
• DOM 树构建完成后， 合并 StyleSheets 构建出 CSSOM 渲染树。
• 排版：遍历渲染树，计算元素的坐标位置。
• 分层：为节点生成图层
• 绘制：用浏览器指令逐条绘制页面元素。（如何避免重绘重排）
• 栅格化
• 合成