页面白屏
首页白屏的原因是打包后的js和css文件过大，浏览器初始访问网站时，会先加载该项目的js和css文件，加载完成后才会进行页面渲染。如果打包的文件过大，加载时间就会变长，出现视觉上的页面白屏.
①使用懒加载，打包后才根据路由生成多个js和css文件，当访问到对应的路由时，才加载对应的文件。在移动端页面的首页时，先加载可视区域的内容，剩下的内容等它进入可视区域后再按需加载。
②静态资源缓存
静态资源长期不需要修改的，使用强缓存，设置Cache-Control实现，设置Cache-Control:max-age=31536000,浏览器在一年内直接使用本地缓存文件，不向服务器发送请求。
资源随时变动，设置ETag实现协商缓存，初次请求资源时，设置ETag,并返回200，之后请求时带上If-none-match字段，询问服务器当前版本是否可用。
③SSR
服务端渲染，在服务端将渲染逻辑处理好，然后将处理好的HTML直接返回给前端展示，可以解决白屏问题。
④预渲染
利用webpack的插件prerender-spa-plugin做预渲染
动态数据无法展示，不同的用户看到的都是同样的页面
路由很多时，代码构建时间太长
用户容易误操作，由于预渲染时js还没有加载，因此展示出来的内容没有js的交互逻辑，比如按钮点击，在js加载完成之前用户点击是没有反应的
预加载内容很少，当页面有内容是依赖动态数据加载时，在编译时是无法加载出动态数据的，因此会导致这部分内容编译不出来
骨架屏
⑤骨架屏
意义：骨架屏就是在页面尚未加载之前先给用户展示页面的大致结构，在骨架页面中，图片、文字、图标都将通过灰色矩形块或圆形块显示，直到页面请求数据后渲染页面。
原理：
通过puppeteer在服务端操控headless Chrome打开开发中的需要生成骨架页面的页面，在等待页面加载渲染完成之后，保留页面布局样式的前提下，通过对页面中元素进行删减或增添，通过样式覆盖，使其展示为灰色块。
骨架屏的实现原理和预加载类似，都是利用了Puppeteer爬取页面的功能，Puppeteer是chrome出的一个headlessChromenode库，提供了API可以抓取SPA并生成预渲染内容，和预加载不太一样的是骨架屏技术会在Puppeteer生成内容后，利用算法将生成的内容进行替换，生成骨架页面，page-skeleton-webpack-plugin是一个用来生成骨架屏的webpack插件
cookie和session如何协同
session的底层是基于cookie实现的。
①浏览器没有cookie，向服务器发送请求
②服务器接受到请求，通过request.getSession()方法创建会话对象（第一次创建的是session会话）
服务器每次创建session的时候，也会创建cookie，这个cookie的key是jessionid，value为创建的session的ID。
③通过响应将新创建的session的ID放在cookie里，传递给浏览器。
④浏览器解析获取到的数据，就马上创建一个cookie对象。有了cookie后，再次请求服务器，就会把含有session的ID的cookie传给服务器。
⑤服务器通过request.getSession()方法，通过cookie中session的ID，找到之前创建好的session对象，返回相应数据。
xss攻击可以造成：
1.窃取cookie信息
2.可以监听用户行为
3.可以通过修改dom伪造假的登录窗口，骗取用户输入用户名和密码
4.生成浮窗广告，影响用户体验
如何阻止xss攻击？
1.服务器对输入脚本进行过滤或转码
2.充分利用CSP
1）限制加载其他域下的资源文件
2）禁止向第三方提交数据，这样用户的数据也不会外泄
3）禁止执行内联脚本和未授权的脚本
4）还提供了上报机制，这样可以帮助我们尽快发现有哪些xss攻击，以便尽快修复问题
3.使用httponly属性
4.验证码：防止脚本冒充用户提交危险操作
5.限制长度：对于一些不信任的输入，可以限制其输入长度
CSRF攻击
和 XSS 不同的是，CSRF 攻击不需要将恶意代码注入用户的页面，仅仅是利用服务器的漏洞和用户的登录状态来实施攻击。
三个必要条件：
1.目标站点一定要有 CSRF 漏洞；
2.用户要登录过目标站点，并且在浏览器上保持
有该站点的登录状态；
3.需要用户打开一个第三方站点，可以是黑客的
站点，也可以是一些论坛；
如何防止CSRF攻击？
1. 充分利用好 Cookie 的 SameSite 属性
Strict 最为严格，浏览器会完全禁止第三方
Cookie。
链接打开、 Get 方式的表单携带 Cookie。 Lax 相对宽松一点。
None ，在任何情况下都会发送 Cookie 数据。
2. 验证请求的来源站点
3. CSRF Token
第一步，在浏览器向服务器发起请求时，服务器生成一个 CSRF Token。
第二步，在浏览器端如果要发起转账的请求，那么需要带上页面中的 CSRF Token，然后服务器会验证该 Token 是否合法。
4.X-FRAME-OPTIONS
DENY，表示页面不允许通过iframe方式展示
AMEORIGIN，相同域名可以·通过ifame展示
ALLOW-FROM，可以在指定来源中的iframe展
示
