Skip to main content

Web FAQ

Headers

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

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 参数

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!", '*')
  • *