前端面试总结

八大数据结构

数组，栈，队列，链表，树，散列表，堆，图

数据结构：八大数据结构分类

算法

十大经典排序算法大梳理 (动图+代码)

计算机网络

1. tcp三次握手

   • 第一次握手：起初两端都处于CLOSED关闭状态，Client将标志位SYN置为1，随机产生一个值seq=x，并将该数据包发送给Server，Client进入SYN-SENT状态，等待Server确认；

   • 第二次握手：Server收到数据包后由标志位SYN=1得知Client请求建立连接，Server将标志位SYN和ACK都置为1，ack=x+1，随机产生一个值seq=y，并将该数据包发送给Client以确认连接请求，Server进入SYN-RCVD状态，此时操作系统为该TCP连接分配TCP缓存和变量；

   • 第三次握手：Client收到确认后，检查ack是否为x+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=y+1，并且此时操作系统为该TCP连接分配TCP缓存和变量，并将该数据包发送给Server，Server检查ack是否为y+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入ESTABLISHED状态，完成三次握手，随后Client和Server就可以开始传输数据。

2. TCP和UDP的区别

   TCP和UDP之间的区别 OSI 和TCP/IP 模型在传输层定义两种传输协议：TCP（或传输控制协议）和UDP（或用户数据报协议）。 UDP 与TCP 的主要区别在于UDP 不一定提供可靠的数据传输。 事实上，该协议不能保证数据准确无误地到达目的地。

   为什么TCP要进行四次挥手呢？

   因为是双方彼此都建立了连接，因此双方都要释放自己的连接，A向B发出一个释放连接请求，他要释放链接表明不再向B发送数据了，此时B收到了A发送的释放链接请求之后，给A发送一个确认，A不能再向B发送数据了，它处于FIN-WAIT-2的状态，但是此时B还可以向A进行数据的传送。此时B向A 发送一个断开连接的请求，A收到之后给B发送一个确认。此时B关闭连接。A也关闭连接。

为什么要有TIME-WAIT这个状态呢，这是因为有可能最后一次确认丢失，如果B此时继续向A发送一个我要断开连接的请求等待A发送确认，但此时A已经关闭连接了，那么B永远也关不掉了，所以我们要有TIME-WAIT这个状态。

当然TCP也并不是100%可靠的。

3. OSI七层模型

   从上到下分别是：

   • 应用层：文件传输，常用协议HTTP，snmp，FTP ,

   • 表示层：数据格式化，代码转换，数据加密，

   • 会话层：建立，解除会话

   • 传输层：提供端对端的接口，TCP，UDP

   • 网络层：为数据包选择路由，IP，icmp

   • 数据链路层：传输有地址的帧

   • 物理层：二进制的数据形式在物理媒体上传输数据

4. GET和POST的区别

   • get参数通过url传递，post放在request body中。

   • get请求在url中传递的参数是有长度限制的，而post没有。

   • get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

   • get请求只能进行url编码，而post支持多种编码方式

   • get请求会浏览器主动cache，而post支持多种编码方式。

   • get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。

   • GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

   • GET产生一个TCP数据包；POST产生两个TCP数据包。

5. 在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？

   DNS解析，TCP连接，发送HTTP请求，服务器处理请求并返回HTTP报文，浏览器解析渲染页面，连接结束

   输入url后，首先需要找到这个url域名的服务器ip,为了寻找这个ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，缓存中没有则查找系统的hosts文件中是否有记录，如果没有则查询DNS服务器，得到服务器的ip地址后，浏览器根据这个ip以及相应的端口号，构造一个http请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个http请求封装在一个tcp包中，这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的html给浏览器，因为html是一个树形结构，浏览器根据这个html来构建DOM树，在dom树的构建过程中如果遇到JS脚本和外部JS连接，则会停止构建DOM树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐JS代码应该放在html代码的后面，之后根据外部央视，内部央视，内联样式构建一个CSS对象模型树CSSOM树，构建完成后和DOM树合并为渲染树，这里主要做的是排除非视觉节点，比如script，meta标签和排除display为none的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为html文件中会含有图片，视频，音频等资源，在解析DOM的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间，Expires使用的是基于服务器 端的绝对时间，因为存在时差问题，一般采用Cache-Control，在请求这些有设置了缓存的数据时，会先 查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次 响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置ETag则直接验证Last-Modified，再决定是否返回304

6. cookie和session的区别，localstorage和sessionstorage的区别

   • Cookie和session都可用来存储用户信息，cookie存放于客户端，session存放于服务器端，因为cookie存放于客户端有可能被窃取，所以cookie一般用来存放不敏感的信息，比如用户设置的网站主题，敏感的信息用session存储，比如用户的登陆信息，session可以存放于文件，数据库，内存中都可以，cookie可以服务器端响应的时候设置，也可以客户端通过JS设置cookie会在请求时在http首部发送给客户端，cookie一般在客户端有大小限制，一般为4K，

   • 生命周期：

     Cookie：可设置失效时间，否则默认为关闭浏览器后失效

     Localstorage:除非被手动清除，否则永久保存

     Sessionstorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除

   • 存放数据：

     Cookie：4k左右

     Localstorage和sessionstorage：可以保存5M的信息

   • http请求：

     Cookie：每次都会携带在http头中，如果使用cookie保存过多数据会带来性能问题

     其他两个：仅在客户端即浏览器中保存，不参与和服务器的通信

   • 易用性：

     Cookie：需要程序员自己封装，原生的cookie接口不友好

     其他两个：即可采用原生接口，亦可再次封装

   • 应用场景：

     从安全性来说，因为每次http请求都回携带cookie信息，这样子浪费了带宽，所以cookie应该尽可能的少用，此外cookie还需要指定作用域，不可以跨域调用，限制很多，但是用户识别用户登陆来说，cookie还是比storage好用，其他情况下可以用storage，localstorage可以用来在页面传递参数，sessionstorage可以用来保存一些临时的数据，防止用户刷新页面后丢失了一些参数，

7. 浏览器缓存

   • 缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。

   • 强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires。

   • 协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match

   • 获取资源形式	状态码	发送请求到服务器
     强缓存	从缓存取	200（from cache）	否，直接从缓存取
     协商缓存	从缓存取	304（not modified）	是，通过服务器来告知缓存是否可用

8. TCP/IP的网络模型

   TCP/IP模型是一系列网络协议的总称，这些协议的目的是使得计算机之间可以进行信息交换，

   TCP/IP模型四层架构从下到上分别是链路层，网络层，传输层，应用层

   链路层的作用是负责建立电路连接，是整个网络的物理基础，典型的协议包括以太网，ADSL等，

   网络层负责分配地址和传送二进制数据，主要协议是IP协议，

   传输层负责传送文本数据，主要协议是TCP

   应用层负责传送各种最终形态的数据，是直接与用户信息打交道的层，主要协议是http，ftp等

9. HTTP状态码

   • 200 OK 请求成功。一般用于GET与POST请求
   • 301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
   • 302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有U
   • 304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
   • 403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
   • 404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
   • 500 Internal Server Error 服务器内部错误，无法完成请求
   • 502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

前端基础

1. WEB及W3C标准

   web标准：将结构、表现、行为分离，使其更具有模块化。

   w3c标准：标签字母要小写，双标签要闭合，标签不允许随意嵌套。
   　　　　尽量使用外部样式和外链js，使结构、表现、行为分为三块，这样可以提高页面渲染速度。
   　　　　样式尽量少用行内样式，id和class名要做到见名知意。
   　　　　不需要变动页面内容，便可提供打印版本，不需要提供复制内容，提高网站易用性。

2. HTML5新特性

   • 语义化标签：header, article, footer, nav, aside, section
   • 增强型表单：日期，颜色等
   • 新增video和audio标签
   • Canvas绘图
   • SVG绘图
   • 地理定位
   • WebSocket

3. CSS3新特性

   CSS3的新特性中，在布局方面新增了flex布局，在选择器方面新增了例如first-of-type,nth-child等选择器，在盒模型方面添加了box-sizing来改变盒模型，在动画方面增加了animation，2d变换，3d变换等，在颜色方面添加透明，rbga等，在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查讯等

4. JS前端面试

   2019前端面试系列——JS面试题 - 奔跑的瓜牛 - 博客园