(web前端) 网络和服务器端高频面试题

1.状态码：

2XX（成功处理了请求状态）
      200 服务器已经成功处理请求，并提供了请求的网页
      201 用户新建或修改数据成功
      202 一个请求已经进入后台
      204 用户删除成功
  3XX（每次请求使用的重定向不要超过5次）
      304 网页上次请求没有更新，节省带宽和开销
  4XX（表示请求可能出错，妨碍了服务器的处理）
      400 服务器不理解请求的语法
      401 用户没有权限（用户名，密码输入错误）
      403 用户得到授权（401相反），但是访问被禁止
      404 服务器找不到请求的网页，
  5XX（表示服务器在处理请求的时候发生内部错误）
      500 服务器遇到错误，无法完成请求
      503 服务器目前无法使用（超载或停机维护）    

2. 304的缓存原理（添加Etag标签.last-modified） 304 网页上次请求没有更新，节省带宽和开销

1.服务器首先产生Etag,服务器可在稍后使用它来判断页面是否被修改。本质上，客户端通过该记号传回服务器要求服务器验证（客户端）缓存）
2.304是  HTTP的状态码，服务器用来标识这个文件没有被修改，不返回内容，浏览器接受到这个状态码会去去找浏览器缓存的文件
3.流程：客户端请求一个页面A。服务器返回页面A，并在A上加一个Tage客服端渲染该页面，并把Tage也存储在缓存中。客户端再次请求页面A
    并将上次请求的资源和ETage一起传递给服务器。服务器检查Tage.并且判断出该页面自上次客户端请求之后未被修改。直接返回304

last-modified: 客服端请求资源，同时有一个last-modified的属性标记此文件在服务器最后修改的时间
        客服端第二次请求此url时，根据http协议。浏览器会向服务器发送一个If-Modified-Since报头，
        询问该事件之后文件是否被修改，没修改返回304

 有了Last-Modified，为什么还要用ETag？
  1、因为如果在一秒钟之内对一个文件进行两次更改，Last-Modified就会不正确（Last—Modified不能识别秒单位的修改）
  2、某些服务器不能精确的得到文件的最后修改时间
  3、一些文件也行会周期新的更改，但是他的内容并不改变（仅仅改变修改的事件），这个时候我们并不希望客户端认为文件被修改，而重新Get

ETag，为什么还要用Last-Modified？
  1、两者互补，ETag的判断的缺陷，比如一些图片等静态文件的修改
  2、如果每次扫描内容都生成ETag比较，显然要比直接比较修改时间慢的多。


ETag是被请求变量的实体值（文件的索引节，大小和最后修改的时间的Hash值）
  1、ETag的值服务器端对文件的索引节，大小和最后的修改的事件进行Hash后得到的。

3.get/post的区别

1.get数据是存放在url之后，以？分割url和传输数据，参数之间以&相连； post方法是把提交的数据放在http包的Body中
2.get提交的数据大小有限制，（因为浏览器对url的长度有限制），post的方法提交的数据没有限制
3.get需要request.queryString来获取变量的值，而post方式通过request.from来获取变量的值
4.get的方法提交数据，会带来安全问题，比如登录一个页面，通过get的方式提交数据，用户名和密码就会出现在url上

4.http协议的理解

1.超文本的传输协议，是用于从万维网服务器超文本传输到本地资源的传输协议
2.基于TCP/IP通信协议来传递数据（HTML，图片资源）
3.基于运用层的面向对象的协议，由于其简洁、快速的方法、适用于分布式超媒体信息系统
4.http请求信息request：
    请求行（request line）、请求头部（header）,空行和请求数据四部分构成

    请求行，用来说明请求类型,要访问的资源以及所使用的HTTP版本.
    请求头部，用来说明服务器要使用的附加信息
    空行，请求头部后面的空行是必须的
    请求数据也叫主体，可以添加任意的其他数据。
5.http相应信息Response
    状态行、消息报头、空行和响应正文

    状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成
    消息报头，用来说明客户端要使用的一些附加信息
    空行，消息报头后面的空行是必须的
    响应正文，服务器返回给客户端的文本信息。

5.http和https

https：是以安全为目标的HTTP通道，简单讲是HTTP的安全版本，通过SSL加密
http：超文本传输协议。是一个客服端和服务器端请求和应答的标准（tcp）,使浏览器更加高效，使网络传输减少

6.http1.0 1.1 2.0的区别

长连接：HTTP1.0需要使用keep-alive参数来告知服务器建立一个长连接，而HTP1.1默认支持长连接
节约宽带：HTTP1.1支持只发送一个header信息（不带任何body信息）
host域（设置虚拟站点，也就是说，web server上的多个虚拟站点可以共享同一个ip端口）：HTTP1.0没有host域

1.http2采用的二进制文本传输数据，而非http1文本格式，二进制在协议的解析和扩展更好
2.数据压缩：对信息头采用了HPACK进行压缩传输，节省了信息头带来的网络流量
3.多路复用：一个连接可以并发处理多个请求
4.服务器推送：我们对支持HTTP2.0的web server请求数据的时候，服务器会顺便把一些客户端需要的资源一起推送到客户端，免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源

7.web缓存

1.web缓存就是存在于客户端与服务器之间的一个副本、当你第一个发出请求后，缓存根据请求保存输出内容的副本
2.缓存的好处
    （1）减少不必要的请求
    （2）降低服务器的压力，减少服务器的消耗
    （3）降低网络延迟，加快页面打开速度（直接读取浏览器的数据）

8.常见的web安全及防护原理

1.sql注入原理：通郭sql命令插入到web表单递交或者输入活命，达到欺骗服务器执行的恶意sql命令
        防范：1.对用户输入进行校验
             2.不适用动态拼接sql
2.XSS（跨站脚本攻击）：往web页面插入恶意的html标签或者js代码。
                举例子：在论坛放置一个看是安全的链接，窃取cookie中的用户信息
            防范：1.尽量采用post而不使用get提交表单
                 2.避免cookie中泄漏用户的隐式
3.CSRF(跨站请求伪装）：通过伪装来自受信任用户的请求
            举例子：黄轶老师的webapp音乐请求数据就是利用CSRF跨站请求伪装来获取QQ音乐的数据
            防范：在客服端页面增加伪随机数，通过验证码
XSS和CSRF的区别：
   1.XSS是获取信息，不需要提前知道其他用户页面的代码和数据包
   2.CSRF代替用户完成指定的动作，需要知道其他页面的代码和数据包

9.CDN（内容分发网络）

1.尽可能的避开互联网有可能影响数据传输速度和稳定性的瓶颈和环节。使内容传输的更快更稳定。
2.关键技术：内容存储和分发技术中
3.基本原理：广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对的地区或者网络中。当用户访问网络时利用全局负载技术
        将用户的访问指向距离最近的缓存服务器，由缓存服务器直接相应用户的请求（全局负载技术）

10.浏览器渲染原理及流程 DOM -> CSSOM -> render -> layout -> print

流程：解析html以及构建dom树 -> 构建render树 ->  布局render树 -> 绘制render树
概念：1.构建DOM树： 渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树
      2.构建渲染树： 解析对应的css样式文件信息（包括js生成的样式和外部的css）
      3.布局渲染树：从根节点递归调用，计算每一个元素的大小，位置等。给出每个节点所在的屏幕的精准位置
      4.绘制渲染树：遍历渲染树，使用UI后端层来绘制每一个节点

重绘：当盒子的位置、大小以及其他属性，例如颜色、字体大小等到确定下来之后，浏览器便把这些颜色都按照各自的特性绘制一遍，将内容呈现在页面上
    触发重绘的条件：改变元素外观属性。如：color，background-color等
    重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
注意：table及其内部元素需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多发时间，要尽量避免使用table布局

重排（重构/回流/reflow）： 当渲染书中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就是回流。
    每个页面都需要一次回流，就是页面第一次渲染的时候

重排一定会影响重绘，但是重绘不一定会影响重排

11.为什么css放在顶部而js写在后面

1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了
2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。
3.js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。另一方面可以节省加载时间，使页面能够更加的加载，提高用户的良好体验

但是随着JS技术的发展，JS也开始承担页面渲染的工作。比如我们的UI其实可以分被对待，把渲染页面的js放在前面，时间处理的js放在后面

12.存储方式与传输方式

1.indexBD: 是h5的本地存储库，把一些数据存储到浏览器中，没网络，浏览器可以从这里读取数据，离线运用。5m
2.Cookie: 通过浏览器记录信息确认用户身份，最大4kb,这也就限制了传输的数据，请求的性能会受到影响
3.Session: 服务器端使用的一种记录客户状态的机制（session_id存在set_cookie发送到客服端，保存为cookie）
4.localStroage: h5的本地存储，数据永久保存在客服端

13.token、cookie、session三者的理解

1、token就是令牌，比如你授权(登录)一个程序时,他就是个依据,判断你是否已经授权该软件（最好的身份认证，安全性好，且是唯一的）
    用户身份的验证方式    

2、cookie是写在客户端一个txt文件，里面包括登录信息之类的，这样你下次在登录某个网站，就会自动调用cookie自动登录用户名
    服务器生成，发送到浏览器、浏览器保存，下次请求再次发送给服务器（存放着登录信息）

3、session是一类用来客户端和服务器之间保存状态的解决方案，会话完成被销毁（代表的就是服务器和客户端的一次会话过程）
    cookie中存放着sessionID，请求会发送这个id。sesion因为request对象而产生。

14.说下cookie，sessionStorage，localStorage

• 1、cookie，sessionStorage，localStorage是存放在客户端，session对象数据是存放在服务器上 实际上浏览器和服务器之间仅需传递session id即可，服务器根据session-id找到对应的用户session对象 session存储数据更安全一些，一般存放用户信息，浏览器只适合存储一般的数据

• 2、cookie数据始终在同源的http请求中携带，在浏览器和服务器来回传递，里面存放着session-id sessionStorage，localStorage仅在本地保存

• 3、大小限制区别，cookie数据不超过4kb，localStorage在谷歌浏览中2.6MB

• 4、数据有效期不同，cookie在设置的（服务器设置）有效期内有效，不管窗口和浏览器关闭 sessionStorage仅在当前浏览器窗口关闭前有效，关闭即销毁（临时存储） localStorage始终有效

SessionStorage和localStorage区别：

• 1.sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在用一个会话的页面中才能被访问（也就是说在第一次通信过程中） 并且在会话结束后数据也随之销毁，不是一个持久的本地存储，会话级别的储存

• 2.localStorage用于持久化的本地存储，除非主动删除数据，否则不会过期

15.说下基于Token的身份验证：（最简单的token: uid用户唯一的身份识别 + time当前事件戳 + sign签名）

1、用户通过用户名和密码发送请求
2、服务器端验证
3、服务器端返回一个带签名的token，给客户端
4、客户端储存token，并且每次用于发送请求
5、服务器验证token并且返回数据
每一次请求都需要token

16.Cookie的利弊有哪些？

优势：保存客户端数据，分担了服务器存储的负担

缺点：1、数量和长度的限制。每个特定的域名下最多生成20个cookie（chorme和safari没有限制）
2、安全性问题。

17。前端如何实现即时通讯？

1. 短轮询

短轮询的原理很简单，每隔一段时间客户端就发出一个请求，去获取服务器最新的数据，一定程度上模拟实现了即时通讯。

• 优点：兼容性强，实现非常简单
• 缺点：延迟性高，非常消耗请求资源，影响性能

2. comet

comet有两种主要实现手段，一种是基于 AJAX 的长轮询（long-polling）方式，另一种是基于 Iframe 及 htmlfile 的流（streaming）方式，通常被叫做长连接。

3. 长轮询优缺点：

• 优点：兼容性好，资源浪费较小
• 缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护

4. 长连接优缺点：

• 优点：兼容性好，消息即时到达，不发无用请求
• 缺点：服务器维护长连接消耗资源

5. SSE（Server-Sent Event，服务端推送事件）是一种允许服务端向客户端推送新数据的HTML5技术。

• 优点：基于HTTP而生，因此不需要太多改造就能使用，使用方便，而websocket非常复杂，必须借助成熟的库或框架
• 缺点：基于文本传输效率没有websocket高，不是严格的双向通信，客户端向服务端发送请求无法复用之前的连接，需要重新发出独立的请求

6. Websocket

Websocket是一个全新的、独立的协议，基于TCP协议，与http协议兼容、却不会融入http协议，仅仅作为html5的一部分，其作用就是在服务器和客户端之间建立实时的双向通信。

• 优点：真正意义上的实时双向通信，性能好，低延迟
• 缺点：独立与http的协议，因此需要额外的项目改造，使用复杂度高，必须引入成熟的库，无法兼容低版本浏览器

18.HTTP的缓存的过程是怎样的？

通常情况下的步骤是:

1. 客户端向服务器发出请求，请求资源
2. 服务器返回资源，并通过响应头决定缓存策略
3. 客户端根据响应头的策略决定是否缓存资源（这里假设是），并将响应头与资源缓存下来
4. 在客户端再次请求且命中资源的时候，此时客户端去检查上次缓存的缓存策略，根据策略的不同、是否过期等判断是直接读取本地缓存还是与服务器协商缓存

19.同样是重定向307，303，302的区别？

302是http1.0的协议状态码，在http1.1版本的时候为了细化302状态码又出来了两个303和307。

303明确表示客户端应当采用get方法获取资源，他会把POST请求变为GET请求进行重定向。 307会遵照浏览器标准，不会从post变为get。

20.HTTP的keep-alive是干什么的？

在早期的HTTP/1.0中，每次http请求都要创建一个连接，而创建连接的过程需要消耗资源和时间，为了减少资源消耗，缩短响应时间，就需要重用连接。在后来的HTTP/1.0中以及HTTP/1.1中，引入了重用连接的机制，就是在http请求头中加入Connection: keep-alive来告诉对方这个请求响应完成后不要关闭，下一次咱们还用这个请求继续交流。协议规定HTTP/1.0如果想要保持长连接，需要在请求头中加上Connection: keep-alive。

keep-alive的优点：

• 较少的CPU和内存的使用（由于同时打开的连接的减少了）
• 允许请求和应答的HTTP管线化
• 降低拥塞控制 （TCP连接减少了）
• 减少了后续请求的延迟（无需再进行握手）
• 报告错误无需关闭TCP连

21.HTTPS是如何保证安全的？

过程比较复杂，我们得先理解两个概念

对称加密：即通信的双方都使用同一个秘钥进行加解密，比如特务接头的暗号，就属于对称加密

对称加密虽然很简单性能也好，但是无法解决首次把秘钥发给对方的问题，很容易被黑客拦截秘钥。

非对称加密：

1. 私钥 + 公钥= 密钥对
2. 即用私钥加密的数据,只有对应的公钥才能解密,用公钥加密的数据,只有对应的私钥才能解密
3. 因为通信双方的手里都有一套自己的密钥对,通信之前双方会先把自己的公钥都先发给对方
4. 然后对方再拿着这个公钥来加密数据响应给对方,等到到了对方那里,对方再用自己的私钥进行解密

非对称加密虽然安全性更高，但是带来的问题就是速度很慢，影响性能。

解决方案：

那么结合两种加密方式，将对称加密的密钥使用非对称加密的公钥进行加密，然后发送出去，接收方使用私钥进行解密得到对称加密的密钥，然后双方可以使用对称加密来进行沟通。

此时又带来一个问题，中间人问题：

如果此时在客户端和服务器之间存在一个中间人,这个中间人只需要把原本双方通信互发的公钥,换成自己的公钥,这样中间人就可以轻松解密通信双方所发送的所有数据。

所以这个时候需要一个安全的第三方颁发证书（CA），证明身份的身份，防止被中间人攻击。

证书中包括：签发者、证书用途、使用者公钥、使用者私钥、使用者的HASH算法、证书到期时间等