【学习打卡】第6天 构建前端知识体系 第六讲

课程名称：一天时间迅速准备前端面试 快速构建初级前端知识体系

课程章节：HTTP

主讲老师：双越老师

课程内容：性能优化

今天学习内容包括：

1. 防抖和节流

2. XXS、XSRF 攻击
   

课程收获：

防抖 debounce

• 监听一个输入框的，文字变化后触发 change 事件

• 直接用 keyup 事件，则会频繁触发 change 事件

• 防抖：用户输入结束或暂停时，才会触发 change 事

节流 throttle：

• 拖拽一个元素时，要随时拿到该元素被拖拽的位置

• 直接用 drag 事件，则会频繁触发，很容易导致卡顿

• 节流：无论拖拽速度多快，都会每隔 xxxms 触发一次

XXS 攻击：

• 一个博客网站，我发表一篇博客，其中嵌入 <script></script> 脚本

• 脚本内容：获取 cookie，发送到我的服务器（服务器配合跨域）

• 发表这篇博客，有人查看它，我轻松收割访问者的 cookie

XXS 预防：

• 替换特殊字符，如 < 变为 &lt; > 变为 &gt;

• <script> 变为 <script> 直接显示，而不会作为脚本执行

• 前端要替换，后端也要替换，都做更保险

XSRF 攻击：

• 我向你发送一封电子邮件，邮件标题很吸引人

• 但邮件正文隐藏着 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx.com/pay?id=200" />

• 你一查看邮件，就帮我购买了 id 是 200 的商品

XSRF 预防：

• 使用 post 接口

• 增加验证，例如密码、短信验证码、指纹等

课程学习截图：

手写防抖：

手写节流：