线程

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