性能优化是一个很大的概念，我们可以从多个方面入手进行优化，我总结了以下几个方面以及如何进行优化。
一、服务器优化
- 服务器端开启
gzip压缩
二、图片优化
- 减少像素点
- 减少每个像素点能够显示的颜⾊
三、打包优化（webpack优化）
- 减少
Webpack打包时间（构建速度）
分离配置文件
减少查找内容
缩小构建目标
开启多线程
预编译模块
开启缓存
合理的使用source-map
a. 优化 `Loader`
b. `HappyPack`
c. `DllPlugin`
d. 代码压缩
2. 减少 Webpack 打包后的⽂件体积
1. 压缩css、js、图片资源，删除无用的css代码，使用gzip压缩。 2. 使用Tree Shaking（树摇）机制，对代码进行拆分。 3. 一些大的模块使用cdn方式引入CDN中文名字叫内容分发网络，字面理解呢，就是用来做内容分发的一套网络体系，它是用来提升文件下载速度的一种机制，让用户能够从离自己最近的CDN服务器进行下载，减少路由次数、提升下载速度、缩短传输时间、提升用户的使用体验。
-
- 资源按需加载
Scope HoistingTree Shaking
四、使用CDN
- 静态资源尽量使⽤ CDN 加载
五、代码优化
- css优化
- 减少回流与重绘
- js优化
- 减少http请求数，设置http缓存
- 资源按需加载
- 压缩前端代码，样式置于页面顶部header中，脚本置于页面底部，减少DOM操作
- 防抖和节流
- 前端SEO
前端SEO需要注意哪些？
1、在header中设置合理的title（标题）、description（描述）和keyWords（关键词）
2、语义化html代码，符合w3c规范，让搜索引擎更容易理解咱们的网页
3、重要的html代码放在最前面，因为搜索引擎获取内容是从上到下进行获取的。
4、重要内容不要用js输出，因为爬虫不会读取js里面的内容
5、少用iframe，因为搜索引擎不会抓取iframe内的内容
6、非装饰性图片加上alt属性
7、提升网站的速度，因为网站响应的速度也是搜索引擎排序的一个重要指标。
六、前端安全
对于前端来讲，所有的输入都是不安全的。
前端安全问题主要分为两种：xss和csrf
第一种：xss
xss（跨站脚本攻击）：目的是想尽一切办法，将可执行代码注入到前端页面当中。
xss攻击主要分为两类：持久型、非持久型
如何防御XSS：
转义字符：对于引号、尖括号、斜杠进⾏转义
CSP（本质是建立白名单）：开发者明确告诉浏览器哪些外部资源可以加载 和执⾏。我们只需要配置规则，如何拦截是由浏览器⾃⼰实现的。
如何开启CSP：
设置 HTTP Header 中的 Content-Security-Policy
设置 meta 标签的⽅式
第二种：csrf
csrf（跨站请求伪造）：攻击者构造出一个后台请求地址，诱导用户点击或者通过某些途径自动发起请求，利用受害者在被攻击网站以及获取的登录凭证信息，绕过后台的用户验证，达到冒充用户对被攻击网站进行某些操作的目的。
如何防御csrf：
Get 请求不对数据进⾏修改
不让第三⽅⽹站访问到⽤户 Cookie
阻⽌第三⽅⽹站请求接⼝
请求时附带验证信息，⽐如验证码或者 Token
三种CSRF防御方式：
SameSite：可以对 Cookie 设置 SameSite 属性
Referer：通过验证 Referer 来判断该请求是否为第三⽅⽹站发起的。
Token：服务器下发⼀个随机 Token ，每次发起请求时将 Token 携带上，服务器验 证 Token 是否有效
