|
当面试官抛出这个问题的时候，你是否信心满满的回答：
1）域名dns解析
2）解析成ip之后建立与服务器的连接（三次握手）
3）与服务器建立连接之后，发送请求，
4）服务器接受请求之后，处理请求并完成响应
5）浏览器的接受数据和页面渲染,构建DOM树
6）关闭tcp连接（四次挥手）
如果我们再扩展一下。深入一下步奏：
1) 你了解dns的解析过程吗？步骤是怎么样的？
2) DNS查询的顺序是怎么样的
2) 3次握手是怎么样的？
3) 4次挥手又是什么？
4) dns的解析发生在哪一个物理层？
5) 服务器接受请求头部信息包括什么？
6) 服务端返回数据的形式是什么？
7) TCP 有什么特性？
8) TCP与UDP的区别是什么？
9) http1.0跟http1.1, http2.0有什么区别？
10)服务器建立连接时，是否有缓存机制？
11)如果服务器判断不同的页面，发生在哪个阶段？
12)构建DOM树的过程是怎么样的？
13)html树跟css树是怎么样结合成dom树的？
14)服务器响应的数据返回包括什么？
知识点普及
说明：以下为个人原创手写汇总，如有解释错误，请指出。如觉得还行，点个赞鼓励一下吧。
包含以下内容：
1）dns模块(解析过程,查询方式，优化方式)
2）http模块( http状态码, 请求方法, http/https/http 1.1/http2.0)
3）网络协议(各个应用层的作用)
4）TCP/UDP的特点
5) 浏览器的缓存机制
6) 浏览器接受返回数据到html后的解析过程，如何优化
7) 回流和重绘（是什么?怎么引起？如何优化？）
1.DNS模块
1.1 dns解析过程
1.首先会查询hosts文件是否，有对应的网址映射关系。如果有，优先采取。
2.查找本地DNS解析器缓存, 如果有，取本地缓存。
3.如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/ip参数中设置的首选DNS服务器，
在此我们叫它本地DNS服务器，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，
则返回解析结果给客户机，完成域名解析，此解析具有权威性。
4.如果要查询的域名，不由本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，
完成域名解析，此解析不具有权威性。
5.如果上面都失败，则查看是否采用了转发模式，
如果未用转发模式，往上一级域名，重复上面的动作，进行查询，直至找到www . qq .com主机。
6.如果用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析
，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环。
不管是本地DNS服务器用是是转发，还是根提示，最后都是把结果返回给本地DNS服务器，
由此DNS服务器再返回给客户机。
1.2 dns查询方式
1.递归查询：也就是DNS客户端送出查询要后，如果DNS服务器内没有需要的数据
，则DNS服务知器会代替客户端向其他的DNS服务顺查询。
2.循环查询：一般DNS服务器与DNS服务器之间的查询属于这种查询方式。
当第一台DNS服务器在向第2台DNS服务器提出查询要求后，
如果第2台DNS服务器内没有所需要的数据，
则它会提供第3台DNS服务器的IP地址给第1台
3.反向查询：可以让DNS客户端利用IP地址查询其主机名称。
从客户端到本地DNS服务器是属于递归查询，而DNS服务器之间就是的交互查询就是迭代查询。
1.3 dns的优化方式
本文给于两个优化方案：
1.TTL，我们的域名可以设置，TTL的重新连接时间，如只有一部主机，可设置长一些。如有多部主机，可设置短一点。
因为这个时间是解析时间，多部主机时，设置短，当一个主机链接时间长，可快速连接另外一部主机。
2.负载均衡
CDN了解一下，同个原理。 此优化，比较费钱。
2. http模块
2.1 http状态码
个人觉得快速定位对应的错误问题，具体可不详细记住。
1xx: 协议处理中状态，还需后续操作
2xx: 成功状态
3xx: 重定向状态，资源位置发生变动，需要重新请求
4xx: 请求报文有误
5xx: 服务器端错误
有兴趣可看具体：
https://www.cnblogs.com/xflonga/p/9368993.html
2.2 http请求方法
http1.0 只支持GET, POST
http1.1 OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT
简单的普及一下：
HEAD： 可简单理解跟get一致，但是无法
OPTIONS: 返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
PUT: 向指定资源位置上传其最新内容
DELETE: 请求服务器删除Request-URL所标识的资源
TRACE: 回显服务器收到的请求，主要用于测试或诊断
CONNECT: HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
2.3 http跟https的区别
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
关键词：收费，安全，端口，长连接
2.4 http 1.0 http1.1 http2.0的区别与特性
以下具体可以写一篇文章了，本文列出简介
http1.0 超文本 传输 协议
http1.1 持久连接(长连接)、节约带宽、HOST域、管道机制、分块传输编码
http2.0 多路复用、服务器推送、头信息压缩、二进制协议等
3.网络协议
标准的网络协议有OSI有七层模型，TCP/IP把会话层，表示层，应用层，合并为应用层。
实际上TCP/IP只有四层结构， 模拟模型为五层， 即实际'数据链路层''跟'物理层'合并。
各个层的作用：
应用层：报文（message），一般指完整的信息，传输层实现报文交付，位于应用层的信息分组称为报文；
传输层：报文段（segment），组成报文的每个分组；
网络层：分组（packet）是网络传输中的二进制格式单元，数据包（datapacket）
是TCP/IP通信协议传输中的数据单位；通过网络传输的数据基本单元，包含一个报头和数据本身，
其中报头描述了数据的目的地及其与其他数据之间的关系，可以理解为数据传输的分组
，我们将通过网络传输的基本数据单元称为数据报（Datagram）；
链路层：帧（frame），数据链路层的协议数据单元，为了保证数据的可靠传输，把用户数据封装成帧；
物理层：PDU（bit），协议数据单元；
各个层次之间的交互：
当浏览器输入链接时，首先客户端进入应用层
1.（应用层阶段）主要处理两个事情。
1）处理报文，如请求参数，请求hash值，请求域名，请求头等进行将解析。
2）DNS解析。
找多对应的mac地址。（具体可看上述DNS解析）
2.（传输层阶段）3个重点
1）建立端口到端口的关系
2）TCP/UDP协议（具体文章有单独介绍）
3）此时会把报文切成N个报文段
3.(网络层阶段)
关键词：ARP协议， IP协议
IP协议：分 ipv4 / ipv6
ARP协议：
简单来说，就是通过广播的形式，将'数据包'发送出去。
4.(数据链路层)
传输层生成的报文段，要转移给物理层。
关键词：以太网， mac地址
以太网协议：
数据包称为 帧，帧由 标头 和 数据 两部分组成
5.(物理层阶段)
物理手段，网线，光纤，无线 等。跟硬件有关。
4.TCP/UDP的特点
4.1 UDP
1.面向无连接
2.不可靠性
3.高效
UDP 的头部开销小，只有八字节，相比 TCP 的至少二十字节要少得多
4.传输方式
支持一对多，多对多，多对一的方式，也就是说 UDP 提供了单播，多播，广播的功能。
4.2 TCP
1.TCP头部包含：
序列号：Sequence number，这个序号保证了 TCP 传输的报文都是有序的，
对端可以通过序号顺序的拼接报文
确认序号：cknowledgement Number，
这个序号表示数据接收端期望接收的下一个字节的编号是多少，同时也表示上一个序号的数据已经收到
窗口大小：Window Size，表示还能接收多少字节的数据，用于流量控制
2. 建立连接需要三次握手，断开连接需要四次握手（SYN/ACK ）
3. 滑动窗口解决了数据的丢包、顺序不对和流量控制问题
4. 拥塞窗口实现了对流量的控制，保证在全天候环境下最优的传递数据
5.浏览器的缓存机制
1）Expires
通过判断发送时间，判断资源是否在缓存存在
基于http 1.0， http1.1用cache-contro
属于强缓存
2）Cache-contro
通过有效期判断缓存存在
属于强缓存
3）Last-Modified/If-Modified-Since
web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。
属于协商缓存
4）Etag/If-None-Match
精确到秒级的协商缓存
属于协商缓存
6.浏览器接受返回数据到html后的解析过程
6.1 过程
1) 首先，根据顶部定义的DTD类型进行对应的解析方式
渲染进程内部是多线程的，网页的解析将会被交给内部的GUI渲染线程处理
渲染线程中的HTML解释器，将HTML网页和资源从字节流解释转换成字符流
2) 再通过词法分析器将字符流解释成词
之后经过语法分析器根据词构建成节点，最后通过这些节点组建一个DOM树
这个过程中，如果遇到的DOM节点是 JS 代码，就会调用 JS引擎 对 JS代码进行解释执行，
此时由 JS引擎 和 GUI渲染线程 的互斥，GUI渲染线程 就会被挂起，渲染过程停止，
如果 JS 代码的运行中对DOM树进行了修改，那么DOM的构建需要从新开始
3)如果节点需要依赖其他资源，图片/CSS等，就会调用网络模块的资源加载器来加载它们，
它们是异步的，不会阻塞当前DOM树的构建
4)如果遇到的是 JS 资源URL（没有标记异步），则需要停止当前DOM的构建，
直到JS 的资源加载并被 JS引擎执行后才继续构建DOM对于CSS，
CSS解释器会将CSS文件解释成内部表示结构，生成CSS规则树
5)然后合并CSS规则树和DOM树，生成 Render渲染树，也叫呈现树
6)最后对 Render树进行布局和绘制，并将结果通过IO线程传递给浏览器控制进程进行显示
6.2 优化(只针对渲染)
1).html加载优化策略
哪些需要同步加载，哪些需要异步加载。首屏要的数据是什么，优先加载。
2).图片的优化
评估，压缩，精灵图等
3).css优化
压缩，异步，合并。
4）细节
少用table布局，尽量少操作dom，dom树避免太深，class读取样式
7. 回流和重绘
是什么
当渲染树节点因为大小边距等问题发生改变而需要重建的过程，叫做 回流 (Reflow)
元素发生的改变只是影响了元素的一些外观之类的时候 ( 例如，背景色，边框颜色，文字颜色等 )，此时只需要应用新样式绘制这个元素就可以了，称之为 重绘 (Repaint)
回流怎么引起
1）页面渲染初始化
2)DOM结构改变，比如删除了某个节点
3)render树变化，比如减少了 padding ( 内边距 )
4)窗口 resize 事件触发时
5)某些 JS 属性，引发回流，很多浏览器会对回流做优化，等到数量足够时做一次批处理回流， 但除了 render树 的直接变化，当获取一些属性时，浏览器为了获得正确的值也会触发回流，这样使得浏览器优化无效
如何优化
1）使用 translate 替代 top
2）使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
3）尽量算出结果再去重绘
把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改 100 次，然后再把它显示出来
4）动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
| 
转播
