【必备】，95 页初级前端模块笔记分享

前言

校招 -1 年这个阶段还属于成长期，更需要看重的是你的基础和热情。对于 JS 基础，计算机基础，网络通信，算法等部分的要求会相对高一些。毕竟这个阶段比较难考察你的业务项目中的沉淀，所以只能从基础部分入手考察。

• 在学校学习，或是利用网络上的各种资料巩固自己的基础，是这个阶段的关键。

• 在简历里用各种方式展示出你对前端的热情，让面试官看到你的潜力。

• 多去了解社区前沿技术，关注国内外的各种技术趋势。

• 尝试自己写一些小项目，或者是参与社区开源的项目。

• 开始记录自己的技术博客。

正文

介绍下半连接队列服务器第一次接收到客户端的 SYN 后，会处于 SYN-REVD 阶段，此时双方还没有建立完全的连接，服务器会把此种状态下请求连接放在一个队列里，我们把这种队列称为半连接队列

已经完成三次握手并建立连接，就叫全连接队列

http 和 https 区别 http 基于 TCP/IP 协议，https 基于 SSL/TLS 协议

http 默认端口号为 80，https 默认端口号为 443

https 安全性更强，需要 CA 证书

https 可以防止运营商劫持

可以介绍 https 的通信过程，涉及对称加密和非对称加密

tcp 和 udp 区别 tcp 只能一对一通信，udp 可以一对一、一对多、多对多通信，即支持多播和广播

tcp 首部开销消耗 32 字节，udp 仅消耗 8 个字节

tcp 适合对数据安全性要求高的场景，比如文件传输，udp 适合对数据实时性要求高的场景，比如视频通话、语音通话

tcp 是有状态连接，udp 是无状态的连接

tcp-可靠传输 udp-不可靠传输

tcp-面向字节流 udp-面向报文

tcp 怎么保证可靠性

1. 超时重传机制

2. 对失序数据进行重排序

3. 应答机制

4. 滑动窗口

5. 拥塞控制

http 请求有哪几种 http1.0：get、post、head

http1.1:put、delete、connect、trace、options

简单请求:

请求 method 只能是 get、post、head

请求头只能是 accept/accept-language/content-language/content-Type

content-Type 只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded

介绍 http1.0|http1.1|http2.0http1.0:

完成连接即断开，导致重新慢启动和三次握手

线头阻塞，导致请求间相互影响

http1.1：

用 keep-alive 支持长连接

用 host 字段指定对应的虚拟站点

新增功能: 断点续传、身份认证、状态管理、cache 缓存->cache-control、expires、last-modified、etag

http2.0：

二进制分帧层：应用层和传输层

header 头部压缩

服务端推送

多路复用

二进制分帧层可以扩展到计算机网络的 OSI 参考模型

客户端缓存客户端缓存分为 cookie、localStorage、sessionStorage、indexedDB，网上有关的文章很多，就不详细说了

浏览器缓存强缓存

不向 http 发送请求，返回状态码 304.

检查强缓存有两个字段: http1.0 使用 expires，代表过期时间，但是服务器时间和客户端时间可能不一致。为了弥补这个缺点，http1.1 使用 cache-control 的 max-age 字段，cache-control 有多个指令

public 允许客户端和代理服务器缓存

private 允许客户端缓存

no-store 不使用缓存

no-cache 使用协商缓存 两个字段都存在，cache-control 优先级高于 expires

协商缓存向 http 发送请求，返回状态码 200

检查协商缓存有两个字段: http1.0 使用 last-modified，即最后修改时间。

在浏览器向服务器发送请求后，服务器会在响应头上加上这个字段

浏览器接收后，如果再次请求，会在请求头上携带 If-Modified-Since

服务器拿到 If-Modified-Since 字段后，会和服务器中该资源的最后修改时间对比,如果请求头中这个值小于最后修改时间，更新资源；否则返回 304，告诉浏览器直接使用缓存

http1.1 使用 etag，etag 是服务器根据当前文件内容，给文件生成的唯一标识，只要内容改变，这个值就会变。etag 优先级高于 last-modifed

缓存位置，按优先级从高到低分别是:

service worker

memory cache

disk cache

push cache

http 状态码列举一些常见状态码即可

200-请求成功301-永久重定向302和307-临时重定向400-当前请求不能被服务器理解或请求参数有误401-请求需要认证或认证失败403-服务器禁止访问404-资源未找到405-方法未允许500-内部服务器错误502-网关错误503-服务器处于超负载或停机维护

了解 nginx 吗 ngnix 是个高性能反向代理服务器，有以下作用:

解决跨域

请求过滤

配置 gzip

负载均衡

静态资源服务器

ngnix 解决跨域的原理:

把后端域名设为前端服务的域名，然后设置相应的 location 拦截前端需要跨域的请求，最后将请求代理回服务端的域名

ngnix 实现负载均衡的策略:轮询、最小链接数、最快响应时间

web 安全 xss 跨站脚本攻击，指攻击者在网页上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时， 对客户端浏览器进行控制或获取用户隐私数据的方式

防范：

httpOnly 防止截取 cookie

用户输入检查

用户输出检查

利用 CSP（浏览器的内容安全策略）

csrf 跨站请求伪造，劫持受信任用户向服务器发送非预期请求的方式。

防范：

验证码

referer check

增加 token 验证

二次封装 axios1.新建一个 axios 对象，定义好字段并设置默认值，比如超时时间、请求头 2.定义过滤字符串方法，过滤服务端为空字符串或 null 的属性 3.请求拦截器调用过滤字符串方法，遍历 url 上的字段，如果为数组或对象转为 JSON 对象 4.响应拦截器捕获错误，根据 http 状态码进行不同的处理，比如 401 跳转登陆页面，403 返回您没有权限，502 返回系统正在升级中，请稍后重试，504 返回系统超时，并弹出对应的消息提示框。消息提示框自定义

axios 调用流程查看 axios 源码，axios 调用流程实质是 Axios.prototype.request 的实现，调用过程如下:1.判断传入参数 config 是否是字符串，是则设置 url，否则设置 config 为对象 2.调用 mergeConfig 方法，合并默认参数和用户传入的参数 3.如果设置了请求方法，将其转为小写，否则设置请求方法为 get4.将用户设置的请求和响应拦截器、发送请求的 dispatchRequest 组成 promise 链，最后返回 promise 实例。这一步保证先执行请求拦截器，再执行请求，最后执行响应拦截器

聊项目挑一到两个比较有代表性的项目讲，可以用 SWOT 方法，简要介绍项目的背景，项目的主要的技术难点，如何解决的，项目做完后的效果。我主要讲的是怎么推动 Jenkins 自动化部署在前端组里的应用

hr 面一般都是聊规划聊跳槽原因，掌握一些常见聊天技巧一般来说不会挂人，除非(薪资没谈拢)。。。

后记数据结构和算法也有问到了，规模不大的公司一般排序问的比较多(插冒归基快选堆希)，前端会这 8 种排序就行了。如果想面更好的公司，还得把数据结构和算法复习好了。

最后

资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料 PDF 完整版！

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。