面试准备----JS系列（三）

1、说一说cookie、sessionStorage、localStorage区别？

共同点：

1. 都是浏览器存储
2. 都存储在浏览器本地

区别：

1. cookie由服务器写入，sessionStorage和localStorage都是由前端写入。
2. cookie的生命周期由服务器端写入时就设置好的，localStorage写入后就一直存在，除非手动清除；sessionStorage是由页面关闭时自动清除
3. cookie的存储空间大小约为4kb，localStorage和sessionStorage的从存储空间比较大，约为5M
4. 三者数据共享都遵循同源原则，sessionStorage还限制必须是同一页面。
5. 在前端给后发发送请求的时候会自动携带cookie中的数据，localStorage和sessionStorage不会

使用场景：

• cookie：一般用于存储登录验证信息sessionId或者token
• localStorage：常用于存储不易变动的数据，减轻服务器的压力。
• sessionStorage：用来检测用户是否是刷新进入页面的，如音乐播发器恢复播放进度条功能。

2、说一说token能放在cookie中吗？

可以；
原因： token一般是用来判断用户登录的，它内部包含的信息有：uid（用户唯一的身份标识）、time（当前时间的时间戳）、sign（签名，token的前几位以哈希算法见所称的一定长度的十六进制字符串）。‘token’可以存放在‘cookie’中，‘token‘是否过期应该由后端来判断而不是由前端来判断，所以’token‘存储在cookie中只要不设置cookie的过期时间就行。

补充：token的认证流程

1. 客户端使用用户名和密码请求登录
2. 服务端收到请求，去检验用户名和密码
3. 验证成功后，服务端发送一个token给客户端
4. 客户端收到token后会把它存储起来，比如放在cookie里或者localStorage里
5. 客户端每次发送请求都需要携带着服务端签发的token（把token发到HTTP的header里）
6. 服务器收到请求后需要验证请求里带有的token，如验证成功，则返回数据。

3、浏览器如何渲染页面？

• 浏览器将获取的 HTML 文档解析成 DOM 树；
• 处理 CSS 标记，构成层叠样式表模型（CSSOM）；
• 将 DOM 和 CSSOM 合并为渲染树（rendering tree）；
• 渲染树的每个元素的内容都是计算过的，称之为 布局layout；
• 将渲染树上的各个节点绘制到屏幕上，称之为 绘制painting；

注：借鉴这篇文章：https://zhuanlan.zhihu.com/p/212220203

4、说一下重绘、重排的区别，如何避免？

区别：

重排： 当DOM的变化影响了元素的几何信息（元素的位置和尺寸大小），浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
重绘： 当一个元素的外观发生了改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建不拘束和分层的阶段。

重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是重绘不一定要重排。
重拍对性能的消耗更多一些。

触发重排的方法：

• 页面初始渲染，这是开销最大的一次重排
• 添加/删除可兼得DOM元素，
• 改变元素的位置
• 改变元素的尺寸（比如：边距、填充、边框、宽度、高度）
• 改变元素的内容（文字数量，图片大小）
• 改变元素字体大小
• 改变浏览器窗口尺寸

避免回流和重绘得到方式：

• 样式集中改变，
• 使用absolute或fixed脱离文档流，他的变化就不会影响到其他的元素
• 使用GPU加速：CSS3的transform、opacity、filter这些属性可以实现合成效果
• 不要把DOM结点的属性值放在一个循环里当成循环里的变量。
• 对于 resize、scroll 等进行防抖/节流处理。

5、说一下浏览器垃圾回收机制？

借鉴这篇文章：https://blog.csdn.net/weixin_44915595/article/details/121941173