性能优化
前端性能优化建议
1减少http请求 2. 使用服务端渲染ssr 3 静态资源使用 CDN 4. 将 CSS 放在文件头部，JavaScript 文件放在底部 5 压缩文件 6懒加载 7防抖节流 8调整图片大小 9.减少重绘重排,10减少全局变量,11控制图片大小。12减少dom操作
display:none会脱离文档流，不占据页面空间；会产生回流（改变了dom结构）
visibility:hidden,只是隐藏内容，并没有脱离文档流，会占据页面的空间。
怎么解决白屏问题
首屏性能优化你是怎么做的
后端给你10万条数据你怎么处理？
这个方法就是，把10w按照每页数量limit分成总共Math.ceil(total / limit)页，用懒加载，列表尾部放一个blank，先渲染第一页，当滚动到blank出现在视图，说明到底了，此时在加载第二页。至于怎么判断blank出现在视图上，可以使用getBoundingClientRect方法获取top属性
说一说浏览器缓存机制
强缓存和协商缓存的应用场景
网络
http协议
三次握手，四次挥手
跨域
同源策略（域名、端口、协议三者相同），所以访问非同源资源的时候，这时候需要跨域
浏览器是如何渲染页面。
dns解析、然后tcp连接三次握手、发出http请求，返回响应、解析渲染页面、断开连接（四次挥手）
https和http的区别
http是超文本协议，https是以安全为目标的http安全版，加入了ssl层，传输的协议能够加密信息。
Xss和csrf
Xss：中译是跨站脚本攻击。攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML 和 Flash。有很多种方式进行 XSS 攻击，但它们的共同点为：将一些隐私数据像 cookie、session 发送给攻击者，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操作。
XSS攻击可以分为3类：反射型（非持久型）、存储型（持久型）、基于DOM。
- 存储型 存储型 XSS 会把用户输入的数据 "存储" 在服务器端，当浏览器请求数据时，脚本从服务器上传回并执行。这种 XSS 攻击具有很强的稳定性。
比较常见的一个场景是攻击者在社区或论坛上写下一篇包含恶意 JavaScript 代码的文章或评论，文章或评论发表后，所有访问该文章或评论的用户，都会在他们的浏览器中执行这段恶意的 JavaScript 代码。相当于文本框恶意输入了包裹了
- 基于DOM
基于 DOM 的 XSS 攻击是指通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击。
- XSS 攻击的防范
对特殊字符编码或过滤：在 XSS 防御中，输入检查一般是检查用户输入的数据中是否包含 <，> 等特殊字符，如果存在，则对特殊字符进行过滤或编码，这种方式也称为 XSS Filter。
而在一些前端框架中，都会有一份 decodingMap， 用于对用户输入所包含的特殊字符或标签进行编码或过滤，如 <，>，script，防止 XSS 攻击：
-
CSRF
CSRF，中译是跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。
CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。
- CSRF 攻击的防范
当前，对 CSRF 攻击的防范措施主要有如下几种方式。
-
1. 验证码
-
2.添加 token 验证
CSRF 攻击之所以能够成功，是因为攻击者可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 Cookie 中，因此攻击者可以在不知道这些验证信息的情况下直接利用用户自己的 Cookie 来通过安全验证。要抵御 CSRF，关键在于在请求中放入攻击者所不能伪造的信息，并且该信息不存在于 Cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。
cookie session区别
cookie保存数据少，只能4kb，一般由服务器生成，用来标记用户身份。只能保管ascii字符串，sESSION可以读取任何类型数据。Cookie存储在客户端，不安全，session存在服务器端。
cookie、sessionStorage和localStorage的区别
cookie由服务器生成、容量小，只有4kb，多数都是服务器端生成，用于标识用户身份，放在http请求头里。localstorage和sessionstorage都是在客户端生成，用于缓存数据，容量都是5mb，前者可永久保存数据，后者关闭浏览器页面就被清除。
Loader和Plugin 有什么区别
Loader：直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Plugin：直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
