7.7 招商银行视频面试

1.Symbol的特点

Symbol值通过Symbol函数生成，表示一个独一无二的值。
Symbol可以接受一个字符串作为参数，表示对Symbol实例的描述。两个接受相同字符串描述的Symbol值仍然是不同的值，Symbol不能和其他类型的值进行运算，但可以转化为字符串和Boolean值（一般为true）

2.事件委托的原理，用途和事件冒泡的阻止

利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
用途：减少内存占用，优化性能，减少与dom的交互次数
原理：事件冒泡原理
阻止：event.stopPropagation();或者在事件中return false;

3.defer和async

默认：立即加载并执行脚本
defer：遇到defer的Script标签是，浏览器会在开启一个线程去下载js，同时继续解析HTML文档，文档解析DOM完成后再去执行下载完的JS文件
async：与defer类似，但下载好的JS会在下载完成时立即执行，所以不能保证所有JS按顺序执行。

4.CSS三种隐藏元素的方法

1.display: none 完全隐藏
2.visibility: hidden 占据布局但不响应交互
3.opacity: 0 占据布局也响应交互

5.前端安全

1.XSS 跨站脚本攻击
2.CSRF 跨站请求伪造

6.浏览器的缓存机制

对于一个数据请求来说，可以分为发起请求，后端处理，浏览器相应三个步骤，浏览器缓存可以帮助在第一步和第三步中优化性能，比如直接2使用缓存而不发起请求，或者发起请求但后端存储数据和前端一致，则没有必要再将数据回传。

缓存的位置

1.Service Worker（仅HTTPS，因为涉及到请求拦截，需要保证安全）
2.Memory Cache，内存中的缓存，主要包含页面中已经抓取到的资源，关闭Tab的时候内存缓存也被释放
3.Disk Cache，硬盘中的缓存，大文件优先存硬盘
3.Push Cache，推送缓存，HTTP/2中的内容。只在会话Session中存在，会话结束即被释放

缓存过程

浏览器每次发起请求，都会现在浏览器缓存中查找该请求的结果以及缓存标识，每次拿到返回结果也都会将该结果和缓存标识存储到浏览器缓存中
发起请求时，根据这个资源的http header判断是否命中强缓存，命中则直接向本地读取资源，未命中则向服务器发送请求，服务器通过另一些request header验证这个资源是否命中协商缓存，这个过程被称为http再验证，如果命中，服务器直接返回请求而不返回资源，而是告诉客户端之间从缓存中获取，客户端收到返回后就直接从客户端获取资源

强缓存

不向服务器发送请求，直接在缓存中读取资源，返回200，并显示from disk(或memory) cache
Expires：过期时间，在过期时间前浏览器可以直接从缓存中读取资源，无需再次请求
Cache-control：在满足一定条件的情况下再次请求就会命中强缓存，主要的请求头指令有max-age（最大缓存时间），no-cache（不再使用cache-control做前置验证），no-store（不缓存），private（不允许代理缓存）

协商缓存

强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存
协商缓存生效，返回304 No Modified
协商缓存失效，返回200，以及新的请求结果
Last-Modified：在服务器上的最后修改时间，只能精确到秒
ETag：资源文件的唯一标识，只要产生变化就会重新生成，精度较高但是性能较差