前端网络优化

网络优化：

减少请求数量，域名发散，优化资源加载，减少dom的操作

1. 优化资源加载时机: 异步script标签

   • defer: 异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似
   • async: 异步加载，加载完成后立即执行

2. 减少重绘和回流：回流必将引起重绘，重绘不一定会引起回流

   • 重绘：颜色改变之类的
   • 回流：元素尺寸发生变化，浏览器窗口大小变化，文字大小变化，激活CSS伪类（例如：:hover）

3. 打包压缩，开启gzip

4. 使用cdn。

5. http2多路复用，每条连接中并发传输多个资源，这里就不需要添加域名来增加并发数了

6. webpack优化

   • 打包公共代码：CommonsChunkPlugin，（webpack4）optimization.splitChunks和optimization.runtimeChunk
   • 公用代码内联：使用html-webpack-inline-chunk-plugin插件将mainfest.js内联到html文件中

   XSS和CSRF

7. XSS: 跨站脚本攻击,攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改,从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。目的是将一些隐私数据像cookie、session发送给攻击者，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操作

   • 反射型：用户点击了恶意网站，恶意网站获取用户的cookie之类的信息

   • 存储型：利用表单提交，将恶意代码提交到服务端，用户浏览攻击者提交的文章时就会在他们的浏览器执行这段恶意代码

   • DOM型攻击：修改页面的DOM结构

   • 防范：

     1. HttpOnly 防止劫取 Cookie，
     2. 输入输出检查,过滤和转义特殊字符

8. CSRF: 跨站请求伪造

   • 验证码, 验证码被认为是对抗 CSRF 攻击最简洁而有效的防御方法。但不是主要方案
   • Referer Check ：检查请求的来源
   • 添加 token 验证

https://www.cnblogs.com/xiaohuochai/p/9178390.html