存储
cookie，localStorage，sessionStorage，indexDB
cookie大小不超过4kb
localStorage在2.5-10M之间
IndexedDB 可存储至少250M，建立索引，提供接口查找。
Service Worker
Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。
它的特性包括推送消息,离线、数据同步、后台编译，拦截和处理网络请求。
缓存位置
Service Worker
Memory Cache
Disk Cache
Push Cache
网络请求
安全问题
xxs攻击？
攻击者想尽一切办法将可以执行的代码注入到网页中。
攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击。
<script>alert(1)</script>
//转义字符 引号 尖括号 斜杠
//csp 建立白名单
设置 HTTP Header 中的 Content-Security-Policy
设置 meta 标签的方式 <meta http-equiv="Content-Security-Policy">
XSRF
XSRF 中文名为跨站请求伪造。原理就是攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑。
防范 CSRF 攻击可以遵循以下几种规则：
Get 请求不对数据进行修改
不让第三方网站访问到用户 Cookie 设置 SameSite 属性
阻止第三方网站请求接口 验证 Referer
请求时附带验证信息， 验证 Token 是否有效
点击劫持
点击劫持是一种视觉欺骗的攻击手段。
X-FRAME-OPTIONS
JS防御
中间人攻击
中间人攻击是攻击方同时与服务端和客户端建立起了连接，并让对方认为连接是安全的，但是实际上整个通信过程都被攻击者控制了。攻击者不仅能获得双方的通信信息，还能修改通信信息。
HTTPS 就可以用来防御中间人攻击
性能优化
网页性能优化
减少http请求次数
减少DNS查询次数
避免页面跳转
缓存Ajax
延迟加载
提前加载
减少DOM元素数量
根据域名划分内容
减少iframe数量
避免404
服务器优化
使用CDN
添加Expires 或Cache-Control报文头
Gzip压缩传输文件
配置ETags
尽早flush输出
使用GET Ajax请求
避免空的图片src
cookie
减少Cookie大小
页面内容使用无cookie域名
javascript
将脚本置底
使用外部Javascirpt和CSS文件
精简Javascript和CSS
去除重复脚本
减少DOM访问
使用智能事件处理 图片 优化图像
优化CSS Sprite
不要在HTML中缩放图片
使用小且可缓存的favicon.ico
移动客户端 保持单个内容小于25KB
打包组建成符合文档
DNS预解析 rel="dns-prefetch"
节流与防抖
预加载
预渲染 rel="prerender"
CDN 静态资源尽量使用CDN加载，需要注意CDN域名要与主站不同，否则每次请求都会带上主站的 Cookie，平白消耗流量。
减少重绘重排
requestAnimationFrame
createDocumentFragment
Timeline面板
蓝色：网络通信和HTML解析 黄色：JavaScript执行 紫色：样式计算和布局，即重排 绿色：重绘
window.requestAnimationFrame()
推迟到下一次重新渲染 可分离读写操作
window.requestIdleCallback(fn)
//指定只有当一帧的末尾有空闲时间，才会执行回调函数。
大多数显示器的刷新频率是60Hz
如果网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。
一秒之间能够完成多少次重新渲染，这个指标就被称为"刷新率"，英文为FPS（frame per second）。60次重新渲染，就是60FPS。
