Skip to main content

Web FAQ

BOM vs DOM​

  • BOM - Browser Object Model
    • 浏览器环境
    • window, navigator, screen, location, history
  • DOM - Document Object Model
    • 文档内容和结构

Headers​

  • X-Response-Time
    • 单位 ms
  • X-Powered-By
  • X-AspNet-Version
  • X-Frame-Options
  • Server-Timing
  • X-API-Key

global​

  • globalThis
    • ECMAScript 2020
    • Chrome 71
    • NodeJS 12
    • Safari 12.1
  • global - Node.js
  • self - Web Worker
  • window - Browser
  • this - iife 环境

trailing slash​

Content SecurityPolicy​

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';" />

web worker vs serviceWorker vs worklet​

  • Worklets
  • Service workers
    • 浏览器 网络的代理
    • 拦截请求，重定向到缓存，实现离线访问能力
  • Web workers
    • 多线程
    • 通用
// web worker
const myWorker = new Worker('worker.js');
myWorker.postMessage('Hello!');
myWorker.onmessage = function (e) {
  console.log(e.data);
};

// serviceWorker
navigator.serviceWorker.register('/service-worker.js');

// worklet
CSS.paintWorklet.addModule('myWorklet.js');
Web WorkersService Workers
InstancesMany per tabOne for all tabs
LifespanSame as tabIndependent
Intended useParallelismOffline support

图片懒加载​

<img loading="lazy" src="https://" />

HTTP Headers​

sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site

websocket​

Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: R9DINzhe/9zYRFOjZEd41A==
Sec-WebSocket-Protocol: sip
Sec-WebSocket-Version: 13
Upgrade: websocket

获取当前脚本对象​

  • document.currentScript
<script data-option="value" src="lib.js"></script>
lib.js
console.log(document.currentScript.dataset.option);

sessionStorage vs localStorage​

  • sessionStorage
    • tab/window 纬度 - 关闭则清理
    • 新 tab/window 会 copy 内容
    • 修改互相不影响
    • 限制 5 MB
  • localStorage
    • origin 纬度 - 持久化
    • 修改可跨 tab 传递
    • 可监听变化
    • 10 MB per origin
// 监听 localStorage
window.addEventListener('storage', (e) => console.log(e));

origin​

location.origin;

window 事件​

websocket auth​

  1. cookie - 最简单
  2. 协议内授权
  3. otp 方式

cross-origin vs. same-site​

Possible side-effect in debug-evaluate​

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
  • useOnClickOutside 处理 touchstart 时触发，需要传入 passive 参数

passive event listener​

  • 不等待事件处理完成，直接执行下一个事件
  • 因此 preventDefault 不会生效
  • 对于性能影响较大的 event listener，可以使用 passive 优化
    • 例如 scroll、wheel、touchstart、touchmove
  • 参考
    • Chrome 51+
    • react#6436 Support Passive Event Listeners

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin​

  1. 确保 iframe 完全加载
  2. sandbox=allow-same-origin
  3. 尝试 frame.postMessage("hello world!", '*')

slug​

  • 一个简短而明确的标签
  • 表达核心含义
  • 美化 URL - 产生更友好的路径
  • 通常是唯一的 - 辅助标识数据
  • 可能是自动转化的，也可能是手动指定

crossOrigin​

  • crossorigin - 控制 Origin 头 和 credentials
    • anonymous
      • 不包含 credentials - cookies, x.509 certs, Authorization
    • use-credentials
      • 包含 credentials
      • 服务端通过 Access-Control-Allow-Credentials: true 控制
    • 影响是否包含 Origin 头
    • 服务端通过 Access-Control-Allow-Origin 控制
  • referrerpolicy - 控制 referrer 头
    • no-referrer
    • no-referrer-when-downgrade - 只有 TLS/HTTPS 才发送 Referer
    • origin - Referer 设置为当前 origin
    • same-origin - cross-origin 不设置 Referer
    • strict-origin - 不允许 https -> http 的 origin
    • origin-when-cross-origin
    • strict-origin-when-cross-origin
    • unsafe-url - 包含路径信息
  • 支持的标签 img, audio, video, link, script
  • script
    • 无法使用 window.onerror
  • audio, video, img crossorigin
    • 影响是否能够访问 image 数据
    • 影响 canvas 能否使用 img
    • 标记为 tainted

rel​

URL.createObjectURL​

  • URL.createObjectURL
    • MediaSource, Blob, File -> URL
    • 生成一个 URL，添加对 Object 的引用
    • 有些场景创建 Object URL 不一定需要关心 revoke
      • 例如 磁盘上的 File
  • 调用 URL.revokeObjectURL 也不会立即释放内存，只是减少 ref 引用

URL vs URI​

  • URI（Uniform Resource Identifier）用于标识资源，是更泛化的概念
  • URL（Uniform Resource Locator）是 URI 的子集，除了标识资源，还描述如何定位/访问资源
  • URN（Uniform Resource Name）也是 URI 的子集，强调稳定命名，不要求直接可访问
  • 日常 Web 场景里，大多数 https://example.com/path?q=1 都是 URL，也同时是 URI
概念全称重点示例
URIUniform Resource Identifier标识资源mailto:[email protected]
URLUniform Resource Locator定位资源，包含访问方式https://example.com/a?b=1
URNUniform Resource Name命名资源，不强调位置urn:isbn:9780131103627
tip

简单理解：URL 一定是 URI，但 URI 不一定是 URL。