线程

JS线程

• JS引擎主线程
• 阻塞UI线程
• longtask：执行时间超过50ms

UI线程

• DOM线程
• CSS线程
• Layout线程
• Render线程
• Compositor线程

worker线程

• HTTP请求线程
• 事件处理线程
• 定时器线程
• 文件操作线程
• web worker

缓存

强缓存

• expires（http1.0） 绝对时间
• cache-control（http1.1）
  • no-cache 不使用本地缓存，使用协商缓存
  • no-store 禁止浏览器缓存
  • public 可以被客户端和中间CDN缓存
  • private 只能被客户端缓存，CDN不能缓存

协商缓存

• last-modified & if-modified-since
• Etag & if-none-match

如何缓存

• service worker
• page cache
  • 缓存页面快照
  • 快速前进后退
• memory cache 访问后，刷新页面会访问memory cache
• disk cache 访问后页面关闭，下次访问会在disk cache

http

1.0

• 短连接

1.1

• 默认使用长连接(keep-alive)
• 支持只发送header信息
  • 当服务器返回100之后，才开始把请求body发送到服务器
  • 当服务器返回401之后，客户端就可以不用发送
• 管线化(同时发送多个请求，同时处理多个响应)

2.0

• 二进制分帧
• 多路复用
• 头部压缩
• 服务端推送

性能与体验指标

performance.timing API

• DNS时间 domainLookupedEnd-domainLookupStart
• TCP时间 contentEnd-connectStart
• FTTB首字节 responseEnd-responseStart
• DOM load时间 DOMContentload-navigationStart
• onLoad loadEvent-navigationEnd

安全

XSS攻击

• DOM Based XSS漏洞
  • 讲url参数直接展示
• Store XSS漏洞
  • 将存储的数据直接展示
• 防御
  • 不要相信用户输入
  • Html encode
  • CSP（内容安全策略）

CSRF

• 服务端
  • Cookie Hashing
  • 验证码
  • One-Time Tokens

• anti-csrf-token
  • 服务端设置set-cookie，把该随机数作为cookie或者session种入用户浏览器
  • 用户发送GET或者POST请求时带上_csrf_token参数
  • 服务端对比cookie里面的_csrf_token的值与参数中_csrf_token的值是否一致

jsonp劫持

• 属于CSRF一种
• A站某个接口支持jsonp，B站通过script伪造请求，拿到jsonp结果
• 防御同csrf