网络通信的整个过程：

1. URL地址解析
   

2. DNS域名解析

3. 和服务器建立TCP连接（三次握手）

4. 客户端将信息发送给服务器（发送HTTP请求）

5. 服务器得到并处理请求（HTTP响应内容）

6. 客户端渲染服务器返回的内容

7. 客户端断开和服务端TCP连接（四次挥手）

1.URL：

URL （Uniform Resource Location）：统一资源定位符，根据这个地址找到对应的资源。

URN（Uniform Resource Name）：统一资源名称，一般指国际上通用的标准名字，比如国际统一发版的编号。不常用，没能融入网络标准。

URI（Uniform Resource Identifier）：统一资源标识符，URL 和 URN 是它的子集。一般来说，提到 URI 其实就是指 URL。

一个完整的URL包含的内容：

https://www.bilibili.com:80/video/BV1Lb411k7eP?p=2&b=4#hash

• 协议（https:// ）：信息传输的标准和工具

  - HTTP 超文本传输协议，除了文本，也支持媒体资源文件及(或者流文件)XML格式数据。

  - HTTPS 更加安全，提供加密的HTTP。

  - FTP 文件传输协议（一般应用于本地资源到服务器的上传下载）

• 域名（www.bilibili.com）：确定要访问的主机。方便用户记忆的名字，通过域名解析对应相应的IP地址。

  - 顶级域名 bilibili.com
  

  - 一级域名 www.bilibili.com
  

  - 二级域名 member.bilibili.com

  - 域名后缀的语义化：.com 国际域名  . cn 中文域名    .gov 政府    .net 系统类  

      .io 博客    .org 官方组织

  
  

• 端口号（:80）: 确定一个服务器上的哪一个服务。端口号取值范围 0~65535

  - HTTP 默认端口号：80

  - HTTPS 默认端口号： 443

  - FTP 默认端口号：21

• 请求资源的路径名称（/video/BV1Lb411k7eP）：

  - 默认资源路径或者名称：比如：xxx.com/mydate/123.html  如果省略：123.html
  这个资源名，服务器会默认寻找 default.html 没有，再找 index.html... ，如果都没有，返回404。当然这些默认资源也可以在服务端自行配置。

  - 伪URL地址处理：URL重写技术=>为了增加SEO搜索引擎优化。 大型网站一般会使用动态网址，而动态的网址通常不能被搜索引擎收录，所以往往需要将动态网址静态化，此时就需要重写URL。
  

  
  

• URL地址传参信息（?p=2&b=4）：

  - 客户端向服务器传递信息，有很多方式：URL地址问号传参（以 ？开始的键值对，相邻的两个键值对之间 以 & 隔开）和 请求报文传输（请求头和请求体）

  - 也可以用于不同页面之间的信息交互。

  
  

• HASH值（#hash）：

  - 也能充当信息传输方法

  - 锚点定位

  - 基于HASH实现路由管控：不同的HASH值，展示不同的组件和模块

• 对URL进行编码：

  - 如果我们的参数是这样的：?value=100&key='c=c&c=c' ，即：参数值中就包含=或&这种特殊字符，这必然会造成解析歧义，所以我们需要对URL地址进行编码。
  

  - 1.现代游览器会默认对 请求地址中出现的非UNICODE编码类容进行编码。 默认基于 encodeURI 编码 我们可以使用 decodeURI 解码。使用 encodeURI 整个URL中的特殊字符都会自动编译。

  - 2. encodeURLComponent 和 decodeURIComponent 相对于 encodeURL 来书，不用于对整个URL编码，仅是对URL的部分信息进行编码（一般都是问号传参的值编码）

  - 3. escape 和 unescape 不同于以上两种，这种编码格式不是客户端与服务端都有。它只针对浏览器对中文进行编码，一般只用于客户端页面之间的传值处理。
  

  
  

2. DNS优化

1. DNS缓存：浏览器会在第一次域名解析后，默认建立缓存，这个缓存一般只有一分钟。

2. 减少DNS解析次数。

3. DNS预获取(dns-prefetch)：在页面加载开始时，就把当前页面中需要访问其他域名(服务器)的信息进行提前DNS解析，以后在加载到这部分具体内容就可以不用再开始域名解析了。

<meta http-equiv=”x-dns-prefetch-control” content=”on”>  <!-- 开启DNS预解析-->

<link rel="dns-prefetch" href="//s1.hdslb.com">   <!-- DNS预解析的域名-->

3. TCP 三次握手

1. 第一次握手：由浏览器发起，告诉服务器 “嘿！我要发送请求了”

   - 客户端发送syn包（seq=j）到服务器，并进入SYN_SENT状态，等待服务器确认；（SYN：同步序列编号，通常值为： 1）

2. 第二次握手：由服务器发起，告诉浏览器 “我已经做好接收请求的准备了，你赶紧发送吧”

   - 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（seq=k），即SYN+ACK包，此时服务器进入SYN_RECV状态。
   

3. 第三次握手：由浏览器发起，告诉服务器，“我开始发送了，你准备接收”

   - 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

4. HTTP

HTTP报文：请求报文+响应报文（控制台 => network）

HTTP常见状态码：1~5开头的三位数字。

  -   200 OK:：成功。

  -   201 CREATED：一般用于告诉服务器创建一个新文件，最后创建成功后返回 201 状态码。

  -  204 NO CONTENT：服务已成功接收请求，但对于某些请求（列如：PUT 或 DELETE），服务器并不想处理，所以返回一个空内容，并告知 204 状态码。

  -   301 Moved Permanently：永久重定向（永远转移）。

  -   302 Moved Temporarily： 临时转移，现在不常见。现在重定向用 307 处理。

  -   307 Temporary Redirect：临时重定向，主要用于：服务器的负载均衡。

  -   304  Not Modified：设置 HTTP的协商缓存。

  -   400 Bad Request： 传递给服务器的参数错误。

  -   401 Unauthorized：无权限访问。

  -   404  Not Found：请求地址错误。

  -   500  Internal Server Error：未知服务器错误。

  -   503  Service Unavailable：服务器超负荷。

5.  浏览器渲染

   浏览器渲染页面的步骤：

1. 浏览器 解析HTML，生成DOM树；解析CSS，生成CSSOM树。

2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)。

3. 回流(Layout)：根据渲染树，计算它们在视口的确切位置和大小。

4. 重绘(Painting)：根据渲染树以及回流得到的几何信息，得到节点的绝对像素。

5. Display：将像素发送给GPU，展示在页面上。

  DOM的重绘和回流：

• 重绘：元素样式改变（但大小，位置不变）

• 回流：页面布局的几何信息发生变化（元素大小、位置 发生变化），会触发重新布局，从而导致渲染树重新计算布局和渲染。

  触发回流的操作如：添加或删除可见的DOM元素；元素的位置、大小发生变化；浏览器的窗口尺寸发生变化（因为回流是根据可视窗口来计算元素的大小和位置）。
  

• 回流一定会触发重绘，但重绘不一定会回流。

• 性能优化——避免DOM回流：

  - 减少DOM操作，基于 Vue/React 使用数据驱动 MVVM/MVC/虚拟DOM、
  

  - 分离读写操作：现代浏览器的渲染队列机制=> 当浏览器读取到某一行代码要修改样式，并不是立刻就渲染，而是先将修改操作放到渲染队列中，然后继续向下读取。直到读取的不再是修改样式操作，再将整个渲染队列整体渲染，引发一次回流。（读取样式，如：offsetTop、clientLeft、scrollLeft、getComputedStyle、currentStyle ... 也会刷新渲染队列）

  - 样式集中改变。
  

  - 缓存布局信息：其原理也就是 分离读取操作。

      div.style.left = div.offsetLeft + '1px';    div.style.Top= div.offsetTop + '1px';

       改为：

       var strLeft = div.offsetLeft;  var strTop = div.offsetTop;

       div.style.left = strLeft + '1px';   div.style.Top = strTop + '1px';
  

  - 元素批量修改：

      比如：我想为一个 id=box 的div盒子添加10个span标签。

      let frg = document.creatDocumentFragment();    // 先创建一个文档容器。
  

      for (let i = 0; i < 10; i++) {          // 在文档容器中执行操作。
  

           let span = document.creatElement('span');

           span.innerHTML = i;

           frg.appendChild(span);  
  

       }

       box.appendChild(frg);     // 将文档容器一次添加。
  

      frg = null;  // 最后删除文档容器，释放内存。

      当然，使用ES6的 ` ` 模板字符串还要更为简洁些。
  

  - 动画效果应用到position属性为absolute或fixed的元素上（即脱离文档流）：

  - CSS3硬件加速（GPU加速）：css3 的：transform 、 opacity、 filters ... 这些属性会触发硬件加速，不会引发回流重绘。但是，过多的使用会占用大量内存，性能消耗严重。

  - 牺牲平滑度换取速度。

  - 避免table布局和使用CSS的JavaScript表达式