正文
介绍下半连接队列
服务器第一次接收到客户端的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怎么保证可靠性
- 超时重传机制
- 对失序数据进行重排序
- 应答机制
- 滑动窗口
- 拥塞控制
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.0
http1.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
戳这里领取完整开源项目:【一线大厂前端面试题解析+核心总结学习笔记+Web真实项目实战+最新讲解视频】
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验证
二次封装axios
1.新建一个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.如果设置了请求方法,将其转为小写,否则设置请求方法为get
4.将用户设置的请求和响应拦截器、发送请求的dispatchRequest组成promise链,最后返回promise实例。
这一步保证先执行请求拦截器,再执行请求,最后执行响应拦截器
聊项目
挑一到两个比较有代表性的项目讲,可以用SWOT方法,简要介绍项目的背景,项目的主要的技术难点,如何解决的,项目做完后的效果。我主要讲的是怎么推动Jenkins自动化部署在前端组里的应用
hr面
一般都是聊规划聊跳槽原因,掌握一些常见聊天技巧一般来说不会挂人,除非(薪资没谈拢)。。。
后记
数据结构和算法也有问到了,规模不大的公司一般排序问的比较多(插冒归基快选堆希),前端会这8种排序就行了。如果想面更好的公司,还得把数据结构和算法复习好了。
专业技能
一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限,仅展示部分内容