04 2024 档案
摘要：Audio Output Devices API: 音频输出设备API允许Web应用程序提示用户应使用什么输出设备进行音频播放。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport
阅读全文
摘要：Prioritized Task Scheduling API 一种标准化的方法来优先处理属于应用程序的所有任务，无论它们是在网站开发人员的代码中定义的，还是在第三方库和框架中定义的 任务优先级是非常粗粒度的，并且基于任务是否阻止用户交互或以其他方式影响用户体验，或者可以在后台运行 基于 Promi
阅读全文
摘要：Trusted Types API: 锁定 DOM API 的不安全部分，以防止客户端跨站脚本（XSS）攻击 untrusted <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport
阅读全文
摘要：Barcode Detection API: 用于检测图像中的条形码和二维码 所有格式都暂不支持 // 创建新检测器 const barcodeDetector = new BarcodeDetector({ formats: ["qr_code"], }); // 检查支持的类型 BarcodeD
阅读全文
摘要：URL Pattern API 创建 URL 模式匹配器。这些模式能够与完整的 URL 或 URL 的各个组成部分进行匹配 模式语法基于 path-to-regexp 库。模式可包含： 将被精确匹配的文字字符串。 匹配任何字符的通配符 (/posts/*)。 命名组 (/books/:id)，提取匹
阅读全文
摘要：Popover API: 内置的弹框能力 popover 具有 auto 状态的弹窗可以通过在弹窗之外的区域进行选择，以达到“轻触关闭”的目的，并且通常一次仅允许屏幕上显示一个弹窗 manual 弹窗必须始终明确隐藏，但可以用于菜单中嵌套弹窗等使用情况。 <button type="button"
阅读全文
摘要：CSS Custom Highlight API CSS Custom Highlight API JavaScript 创建范围并使用 CSS 定义样式来设置文档中任意文本范围的样式 该 API 允许开发者通过 CSS 自定义属性来设置文本的样式, 并将其应用到文档中的任意文本范围。 本质就是查找
阅读全文
摘要：EyeDropper EyeDropper：拾色器，从屏幕上选择颜色 需要用户交互操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devi
阅读全文
摘要：CSS Counter Styles 允许您自动对 HTML 文档中的元素进行编号或标记。我们定义一个具有特定名称和起始值的 counter，然后根据 CSS 规则递增或递减该计数器。 使用 counter-reset 属性定义计数器，设置其起始值，然后使用 counter-increment 属性
阅读全文
摘要：Media Session API 控制媒体播放和自定义媒体通知 PC浏览器的媒体控制按钮 手机、平板端看控制中心 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" conte
阅读全文
摘要：Compression Stream API 使用 gzip 或者默认格式压缩和解压缩数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=de
阅读全文
摘要：Cookie Store API 获取和设置 cookie 的信息 无法获取 HttpOnly 标记的 cookie expires 为 null 时，表示会话结束时过期 domain 只有在 domain 为当前域名的主域名时才显示(不包含子域名)，否则为 null. <!DOCTYPE html
阅读全文
摘要：Screen Wake Lock API 防止设备因为闲置而自动调低亮度或锁定屏幕，确保屏幕始终保持开启状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.
阅读全文
摘要：canvas 裁剪图片功能实现 选择图片文件，预览原图 裁剪图片 显示裁剪后的图片 调整裁剪区域大小 获取裁剪后的图片 图片裁剪功能优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
阅读全文
摘要：拖动 range, 查看压缩效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0
阅读全文
摘要：大文件多线程切片并发上传 技术使用： File.slice FileReader spark-md5 web worker <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" c
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>捕获视频帧
阅读全文
摘要：下载m3u8分片 合并分片 使用 ffmpeg 转为 mp4 文件 技术使用: Bun + ffmpeg 使用 fetch 请求 .m3u8 分片文件 使用 Bun.write 保存每个分片 使用 Bun.file().writer 创建增量写入 writer: FileSink 循环读取 Bun.
阅读全文
摘要：API使用: MediaSource + SourceBuffer http Range seek进度跳转 client.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewpor
阅读全文
摘要：Range Range 范围请求，允许服务器只发送 HTTP 消息的一部分到客户端。Range 可以一次性请求多个部分，请求范围用一个逗号分隔开，服务器会以 multipart/byteranges 文件的形式将其返回。如果服务器返回的是范围响应，需要使用 206 Partial Content 状
阅读全文
摘要：API、第三方库使用 getDisplayMedia + MediaRecorder + @ozean/set-webm-duration <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="vie
阅读全文
摘要：scrollbar-* <ul> <li>Lorem ipsum dolor sit amet.</li> <li>Numquam magni beatae aspernatur saepe.</li> <li>Corrupti eius exercitationem libero quasi!</
阅读全文
摘要：Speculation Rules API 是一个由 Google 开发的 JSON 定义的 API，旨在通过推测加载（speculative loading）来提高网页加载性能 以编程的方式进行预加载/预渲染 与旧的 <link rel="prefetch"> （预取的数据存放在 HTTP 缓存）
阅读全文
摘要：Element Capture API DOM(元素)节点捕获 捕获并记录一个特定的 HTML 元素 (能剪裁并去除那些遮盖和被遮盖的内容) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="vi
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content
阅读全文
摘要：publicPath 影响页面资源的路径 vue2 base 影响路由(组件匹配)的路径
阅读全文
摘要：# prettier 先安装在 `devDependencies` 上 npx mrm lint-staged
阅读全文
摘要：const _dpr = devicePixelRatio; window.addEventListener('resize', () => { document.documentElement.style.scale = _dpr / devicePixelRatio })
阅读全文
摘要：// 捕获阶段 捕获错误 window.addEventListener('error', (err) =>{ console.log(err) // 错误处理... }, true) window.addEventListener("unhandledrejection", (err) => {
阅读全文
