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://" />

URL 安全字符 / URL Safe characters

  • unreserved / 未保留字符 / 安全字符
    • [0-9a-zA-Z-._~]

保留字符

namechar
ampersand&
dollar$
plus sign+
comma,
forward slash/
colon:
semi-colon;
equals=
question mark?
'At' symbol@
pound#

不安全字符

namechar
space
less than and greater than<>
open and close brackets[]
open and close braces{}
pipe\|
backslash\
caret^
percent%

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

cache

请求

Cache-Control: max-age=<seconds>
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: only-if-cached

响应

Cache-Control: must-revalidate
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: public
Cache-Control: private
Cache-Control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-Control: s-maxage=<seconds>

Cache-Control: immutable
Cache-Control: stale-while-revalidate=<seconds>
Cache-Control: stale-if-error=<seconds>
  • private - 面向单用户 - Authorization
  • public - 多用户共享缓存
  • post-check
  • pre-check
  • immutable
    • max-age 内避免尝试校验缓存

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