No2.7 前端面试题 1. token 2. 浏览器页面渲染的过程 3. SVG格式 4. 精灵图和base64

1. token

1. 什么是token

• token是验证身份的令牌,一般是用户通过账号密码登录后,服务端把这些凭证通过加密等一系列操作后得到的字符串

1. token都存在哪里,有什么区别

• 存localstorage里,后期每次请求接口时都需要把它当做字段传给后台,容易被XSS攻击,但可以做相应措施,利大于弊
• 存sessionstorage里
• 存cookie里,会自动发送,但不能跨域,会有CSRF攻击

1. token的登录流程

• 1. 客户端通过账号密码请求登录
• 1. 服务端收到请求后去验证账号密码
• 1. 验证成功后,服务端签发一个token,并发送给客户端
• 1. 客户端收到token后保存在cookie或localstorage里
• 1. 客户端每次向服务端发送请求资源的时候,都需要携带这个token
• 1. 服务端收到请求,然后去验证接收到的token,验证成功后才会返回客户端请求的数据

1. JWT
   

2. 浏览器页面渲染的过程

1. DNS解析
2. 建立TCP连接
3. 发送HTTP请求
4. 渲染页面

• 1. 浏览器获取HTML和CSS资源
• 1. 把HTML解析成DOM树(一一对应,包括head和隐藏元素),把CSS解析成CSSOM
• 1. 把DOM和CSSOM合并为渲染树(不包括head和隐藏元素)
• 1. 布局绘制

1. 断开TCP连接

3. SVG格式

1. 什么是SVG格式

• 基于XML语法的图像格式,可缩放矢量图,本质是文本文件,体积小,无论放大多少倍都不会失贞

1. SVG作用

• 可以通过<svg></svg>直接插入到页面中,称为DOM一部分,然后用css或js操作
• 可作为文件被引用<img scr='pic.svg'/>
• 可转为base64引入页面

4. 精灵图和base64

1. sprite(精灵图):把多个小图标合成一张大图片
2. 精灵图优缺点

• 优点:减少了http请求的次数,提升了性能
• 缺点:维护比较差,牵一发而动全身

1. base46

• 传输8bit字节代码的编码方式,把原本二进制的形式转换为64个字附的单位,最后组成字符串
• 优点: base64和HTML css一起下载到浏览器中,减少请求和跨域问题
• 缺点: 低版本不支持;如果base64体积比原图大,不利于css的加载