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';" />
default-src 'self'; script-src 'none'; sandbox;
- Mitigating cross-site scripting
- Mitigating packet sniffing attacks
- XSS
- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
- https://content-security-policy.com/
- Content-Security-Policy
web worker vs serviceWorker vs worklet
- Worklets
- 浏览器处理 pipeline hook
- 利用浏览器底层机制 - styling, layout, audio
- CSS Animation Worklet API
- Layout Worklet
- 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 Workers | Service Workers | |
---|---|---|
Instances | Many per tab | One for all tabs |
Lifespan | Same as tab | Independent |
Intended use | Parallelism | Offline 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