web前端入门宝典：CSS盒模型居中方法，持续更新中

青旅半醒 2022-10-06 00:57 21阅读 0赞

### 前言 ###

JavaScript是面向 Web 的编程语言，获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和 Web 应用必须掌握的基本工具。

#### JavaScript主要用途 ####

*  嵌入动态文本与HTML页面
 *  对浏览器时间做出相应
 *  读写HTML元素
 *  在数据被提交到服务器之前验证数据
 *  检测访客的浏览器信息
 *  控制cookies，包括创建和修改等。
 *  基于node.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.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

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种排序就行了。如果想面更好的公司，还得把数据结构和算法复习好了。

### 最后的最后 ###

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。  
**需要完整面试题的朋友可以[点击蓝色字体免费获取][Link 1]**

![大厂面试题][836c574d7e682992857b3444f5b9e9cb.png]

![面试题目录][b050d2fe9027513d3adbfa59360e3af7.png]

![1623b2756a6aeca5146b531dfba24f5b.png][]

![92c675407df5bce07349c8c25535347f.png][]

面试题的朋友可以[点击蓝色字体免费获取][Link 1]\*\*

\[外链图片转存中…(img-fYEr1r2J-1623311069796)\]

\[外链图片转存中…(img-IaPvGRCq-1623311069798)\]

\[外链图片转存中…(img-3jUeGwGc-1623311069800)\]

\[外链图片转存中…(img-rClh8i5I-1623311069803)\]

[Link 1]: https://docs.qq.com/doc/DSlNuUUFPWmpZVlJh
[836c574d7e682992857b3444f5b9e9cb.png]: /images/20221005/d5a8f7b621d34036a8de85295a69f79b.png
[b050d2fe9027513d3adbfa59360e3af7.png]: /images/20221005/0b76c52253d74e5fb304915b9dbf3ade.png
[1623b2756a6aeca5146b531dfba24f5b.png]: /images/20221005/be314d281d514904ae82ee9e24c97e9b.png
[92c675407df5bce07349c8c25535347f.png]: /images/20221005/dbcc87cfcf2b4451bb211e2f290a9fbb.png