关于前端性能优化

1. 压缩代码和资源：使用工具将代码和资源压缩为更小的文件，减少加载时间和带宽消耗。

2. 减少 HTTP 请求：将多个文件合并为一个文件，使用 CSS Sprites 技术合并图像。

3. 使用浏览器缓存：利用缓存机制，避免重复加载相同的资源。

4. 减少 DOM 操作：通过减少 DOM 操作的次数和复杂度，提高页面性能。

5. 使用异步加载：使用异步加载资源，如使用 defer 或 async 属性加载 JavaScript 文件。

6. 延迟加载：对于非必要的资源，如图片和视频等，使用懒加载延迟加载。

7. 优化图片和视频：使用适当的格式和压缩技术优化图像和视频。

8. 减少重绘和回流：减少 DOM 操作和改变样式的次数，使用文档片段documentFragment，将样式列表定义为class并一次性更改。

9. 优化 JavaScript 执行：优化 JavaScript 代码和算法，减少执行时间和消耗资源，使用防抖节流。

10. 选择适当的框架和库：选择适当的框架和库，避免过度依赖和不必要的资源消耗。

资源加载问题、文件大小问题、代码逻辑问题、交互体验

优化加载速度：

减少资源体积：对js,css等资源进行源码压缩，减小文件大小；

减少访问次数：合并代码、利用缓存；

使用CDN；

优化渲染速度：

CSS放在head，script 放在 body 底部；

尽早开始执行js，用 DOMContentLoaded 触发；

图片懒加载；

对DOM 查询进行缓存；

频繁的 DOM 操作，合并到一起插入 DOM 结构（ createDocumentFragment ）；

使用防抖和节流（具体用法见上一篇 防抖和节流）；

优化代码逻辑：

减少重绘和回流，尽量减少 DOM 操作和改变样式的次数，使用文档片段documentFragment，将样式列表定义为class并一次性更改。

减少执行时间和消耗资源，比如使用防抖节流。

安全方面：

XSS 跨站请求攻击和预防

如：发表博客时候，嵌入一段script脚本，用于获取cookie，然后发送到攻击者的服务器。

替换特殊字符，< 变为 &lt;    > 变为 &gt;  此时<script>就变成&lt;script&gt;  也就不会作为脚本被执行了。

XSRF 跨站请求伪造和预防

使用post接口（post方式，img跨域是需要服务端支持的）、增加验证方式（密码验证，指纹认证等）

当用户进行登录请求的时候，后端把包含 xsrf 字段的 cookie 保存在 session 中并且返还给前端，前端需要获取到 cookie 中的值并且能放入 ajax 请求体或请求头中，后端把这个值与 session 中的相应值进行判断就可以了，因为跨域不能访问不同域的 cookie ，攻击者也很难猜测出 xsrf 的值，所以这样就防范了 xsrf 攻击。

所以这里对 xsrf cookie 不能设置 httpOnly（当然就会有 XSS 问题，后面会提），同时提一句所有的 Token 必须得后端设置 expire 过期时间。

这个 axios 就提供了这个功能，只要设置约定好 xsrf cookie字段名就可以了，axios 获取到值后默认是放入 request header 中，这也是当前比较流行的方式。