富途前端一面总结

怎么减少重绘与重排?

1、减少直接操作dom元素，改用className用于控制
2、尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘
3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会出发reflow的
4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
5、如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document
http与https的区别?

https是用对称加密还是非对称加密?

HTTPS 在内容传输的加密上使用的是对称加密，非对称加密只作用在证书验证阶段。
在 HTTPS 内容传输中只有服务端保存了私钥，一对公私钥只能实现单向的加解密，所以 HTTPS 中内容传输加密采取的是对称加密

HTTPS 的传输过程是怎样的？

A: 客户端发起 HTTPS 请求，服务端返回证书，客户端对证书进行验证，验证通过后本地生成用于改造对称加密算法的随机数，通过证书中的公钥对随机数进行加密传输到服务端，服务端接收后通过私钥解密得到随机数，之后的数据交互通过对称加密算法进行加解密。

Q: 为什么需要证书？

A: 防止”中间人“攻击，同时可以为网站提供身份证明。

Q: 使用 HTTPS 会被抓包吗？

A: 会被抓包，HTTPS 只防止用户在不知情的情况下通信被监听，如果用户主动授信，是可以构建“中间人”网络，代理软件可以对传输内容进行解密。

Q: HTTPS用的是对称加密还是非对称加密？

Q: HTTPS 在内容传输的加密上使用的是对称加密，非对称加密只作用在证书验证阶段。
session sessionstrorege localstrorege cookie的区别与使用场景?

前端存储

一、cookie
保存方式：cookie保存在浏览器端
生命周期：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
作用：用来跟踪浏览器用户身份的会话方式
存储的大小：单个cookie保存的数据不能超过4kb
版本：HTML4本地存储
应用场景：
（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
（2）保存上次登录的时间等信息。
（3）保存上次查看的页面
（4）浏览计数
存储内容：只能保存字符串类型，以文本的方式；
缺点：
（1）大小受限4KB
（2）用户可以操作（禁用）cookie，使功能受限
（3）安全性较低
（4）有些状态不可能保存在客户端。
（5）每次访问都要传送cookie给服务器，浪费带宽。
（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
二、session
保存方式：session保存在服务器端
生命周期：默认失效时间为20分钟（当没有被访问时才开始计算）
作用：用来跟踪浏览器用户身份的会话方式
版本：HTML4本地存储
存储的大小：大小没有限制。
应用场景：保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。
（1）网上商城中的购物车
（2）保存用户登录信息
（3）将某些数据放入session中，供同一用户的不同页面使用
（4）防止用户非法登录
存储内容：通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)
缺点：
（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全
i9 c vwesx
（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。
三、localStrorage
保存方式：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。（保存在客户端，不与服务器进行交互通信。）
生命周期：永久保存
作用：同cookie，session一样只不过是他们的一个升级版
版本：HTML5本地存储
存储大小：5MB
应用场景：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据
存储内容：只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
四、sessionStrorage
保存方式：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据（保存在客户端，不与服务器进行交互通信。）
生命周期：临时保存
作用：同cookie，session一样只不过是他们的一个升级版
版本：HTML5本地存储
存储大小：5MB
应用场景：敏感账号一次性登录；
存储内容：只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
五、区别
cookie的生命周期随浏览器关闭而关闭。sessionStrorage是临时保存。localStrorage永久保存。
cookie传输不安全，浪费带宽（客户端请求服务端的时候要带上cookie所以浪费带宽）
sessionStrorage与localStrorage不与服务器通信所以相当节省资源以及更安全
cookie传输只有4KB，有限制大小。而sessionStrorage与localStrorage是5MB更大一些。
cookie只能传输字符串文本形式。而sessionStrorage与localStrorage支持任何类型对象

cookie的一些参数?samesite参数是用来干嘛的?

SameSite属性可以让 Cookie 在跨站请求时不会被发送，从而阻止了跨站请求伪造攻击（CSRF）

uri的组成部分?

第一部分 scheme
URI的第一个部分是scheme，用来告诉客户端如何得到资源。scheme的例子有 http, https, file。
URI scheme的官方列表
第二部分 hostname
URI的第二部分是Hostname主机名。它紧接在scheme后面。例如：www.google.com或者localhost。这告诉客户端连接哪个服务器。
第三部分 path
URI的第三部分是Path。它指示了服务上的一个具体的资源。

缓存策略,协商缓存和强缓存如何设置?如果同时设置了强缓存与协商缓存会怎样?

强缓存优先于协商缓存进行，若强缓存(Expires 和 Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。

304,301,302,204这些状态码

301:永久重定向 302:临时重定向 304:资源未修改 204:无内容
401:需要身份认证 403:拒绝执行 404:找不到资源

如何做性能优化?LCP如何优化?
ssr渲染,什么是脱水与注水

什么是闭包?闭包有什么用?有什么劣势?

闭包是指有权访问另一个函数作用域中变量的函数《JavaScript高级程序设计》
闭包的应用：
能够访问函数定义时所在的词法作用域(阻止其被回收)
私有化变量
模拟块级作用域
创建模块
能够实现柯里化,Vue中数据响应式Observer中使用闭包等
闭包缺点：
由于垃圾回收器不会将闭包中的变量销毁.会导致函数的变量一直保存在内存中，过多的闭包可能会导致内存泄漏