05 前端安全和性能优化

# 1. 前端安全

简单梳理一下前端的安全防范。常见的 web 前端攻击方式有哪些？主要是俩种：

• XSS 跨站请求攻击 攻击者通过向受信任的网站注入恶意脚本，使其在用户浏览器中执行。这种攻击方式通常利用网站对用户输入的不充分验证或过滤，攻击者可以通过注入恶意脚本来窃取用户的信息、劫持会话、修改网页内容等。XSS 攻击可以分为三种类型：存储型 XSS、反射型 XSS 和 DOM 型 XSS。

  为了防止 XSS 攻击，网站开发人员应该实施合适的输入验证和过滤机制，确保用户输入的数据被正确处理和显示，以防止恶意脚本的注入。另外，使用安全的编码实践（如转义特殊字符）也是重要的，如变“<script>”为 <script&gt，从而直接显示而不会作为脚本执行。

• XSRF 跨站请求伪造 攻击者利用用户已经登录认证的状态下，通过诱使用户访问特定网页或点击恶意链接，来执行非预期的操作。攻击者通常构造一个恶意请求，该请求会利用受害者的身份认证信息，向目标网站发送请求，以执行一些恶意操作。这些操作可能包括更改用户设置、发起资金转账、删除数据等。

  为了防止 XSRF 攻击，网站开发人员可以采取一些防范措施，如使用随机生成的 CSRF 令牌来验证每个请求的合法性、限制敏感操作的访问权限、使用 HTTP 头部中的 Referer 字段等。此外，用户也可以采取一些措施，如定期清除浏览器的缓存和 cookie，不点击可疑的链接，以减少受到 XSRF 攻击的风险。

# 2. 性能优化

性能优化一句话总结：是让「看到页面」这件事情尽量早、尽量轻、尽量流程。

可以分为六个方面:

1. 网络加载优化;
2. 渲染层优化;
3. JavaScript 执行优化;
4. 图片与资源优化;
5. 构建层优化(webpack/vite)
6. 用户体验提升优化(非性能指标，但影响观感)

# 一、网络加载优化（资源到达浏览器前）

# 二、渲染层优化（资源到了后，尽快变成页面）

# 三、JavaScript 执行优化（JS 别拖累页面）

# 四、图片与媒体优化

# 五、构建层优化（Webpack / Vite）

# 六、用户体验提升优化（非指标但直接影响体感）

# 常用优化工具推荐