CSS Custom Highlight API 实战：构建高性能文本交互应用

1. CSS Custom Highlight API 是什么如果你曾经在网页上实现过文本高亮功能大概率会遇到这样的烦恼要么用mark标签包裹内容导致DOM结构混乱要么用span元素批量插入后页面性能直线下降。CSS Custom Highlight API的出现彻底改变了这一局面。这个API的核心思想很简单——将文本选择与样式应用分离。想象一下你在纸上用荧光笔做标记荧光笔的颜色会留在纸上但不会改变纸张本身的文字内容。Custom Highlight API正是这样的数字荧光笔它允许我们通过JavaScript创建虚拟的文本范围Range将这些范围集合成高亮组Highlight用CSS自由定义这些高亮的视觉样式与传统方法相比最大的区别在于整个过程完全不修改DOM结构。我在最近的一个在线文档项目中实测当需要同时显示3000个高亮批注时使用传统span方案页面帧率降到8fps而改用Custom Highlight API后保持在稳定的60fps。2. 为什么需要学习这个API去年我参与重构一个在线教育平台的笔记系统时最初采用常规的DOM操作方案。当50个学生同时在文档上做批注时页面直接卡死。后来改用Custom Highlight API不仅性能问题迎刃而解还实现了这些传统方案难以做到的功能多色重叠高亮同一段文本可以同时显示搜索匹配、语法错误、用户批注三种高亮动态效果给高亮添加脉动动画、渐变过渡等视觉效果即时更新当文档内容变化时高亮自动保持正确位置特别是在实现实时协作编辑场景时这个API展现出巨大优势。试想这样的场景用户A正在高亮某段落同时用户B在这段文字中间插入内容。传统方案需要监听内容变化重新计算所有高亮位置删除重建DOM节点而使用Custom Highlight API浏览器会自动维护Range的正确位置我们只需要在CSS中定义好高亮样式即可。这种声明式的开发模式让复杂交互的实现变得异常简单。3. 核心API深度解析3.1 Range对象的灵活创建创建Range是使用该API的第一步方法远比想象中丰富// 方法1直接指定起止位置 const range1 new Range(); range1.setStart(document.body, 10); range1.setEnd(document.body, 20); // 方法2从用户选择创建 const selection window.getSelection(); const range2 selection.getRangeAt(0); // 方法3包裹整个元素 const quote document.getElementById(quote); const range3 document.createRange(); range3.selectNode(quote); // 方法4精细控制文本节点 const paragraph document.querySelector(p); const textNode paragraph.firstChild; const range4 new Range(); range4.setStart(textNode, 5); // 从第5个字符开始 range4.setEnd(textNode, 15); // 到第15个字符结束实际项目中我经常需要高亮特定关键词下面这个工具函数非常实用function highlightKeyword(rootElement, keyword) { const highlights new Highlight(); const treeWalker document.createTreeWalker( rootElement, NodeFilter.SHOW_TEXT ); let node; while ((node treeWalker.nextNode())) { let pos 0; const text node.textContent; while ((pos text.indexOf(keyword, pos)) 0) { const range new Range(); range.setStart(node, pos); range.setEnd(node, pos keyword.length); highlights.add(range); pos keyword.length; } } CSS.highlights.set(keyword-highlight, highlights); }3.2 Highlight对象的进阶用法Highlight对象可以看作是一个Range的集合但它比简单的数组强大得多。在实现文档批注系统时我这样组织不同类型的批注class AnnotationSystem { constructor() { this.highlights { comment: new Highlight(), correction: new Highlight(), question: new Highlight() }; // 一次性注册所有高亮类型 Object.entries(this.highlights).forEach(([type, highlight]) { CSS.highlights.set(annotation-${type}, highlight); }); } addAnnotation(range, type) { if (this.highlights[type]) { this.highlights[type].add(range); } } removeAnnotation(range, type) { if (this.highlights[type] this.highlights[type].has(range)) { this.highlights[type].delete(range); } } clearAll() { Object.values(this.highlights).forEach(highlight { highlight.clear(); }); } }这种架构下不同类型的批注可以独立管理CSS也可以为每种类型定义独特样式::highlight(annotation-comment) { background-color: rgba(255, 241, 118, 0.3); border-bottom: 2px dashed #FFC107; } ::highlight(annotation-correction) { background-color: rgba(255, 138, 128, 0.3); border-left: 3px solid #FF5252; } ::highlight(annotation-question) { background-color: rgba(100, 221, 23, 0.3); border-top: 2px dotted #64DD17; }4. 实战构建文档审阅工具4.1 无DOM污染的批注系统去年为客户开发在线合同审阅系统时我设计了一个基于Custom Highlight API的解决方案。核心需求是支持多人同时批注批注随文档编辑自动调整位置显示批注作者和评论内容实现的核心代码如下class ContractReviewSystem { constructor() { this.annotations new Map(); this.userColors new Map(); this.batchMode false; } // 添加批注 addAnnotation(range, userId, comment) { if (!this.userColors.has(userId)) { this.userColors.set(userId, this.getRandomColor()); } const id crypto.randomUUID(); const annotation { id, range, userId, comment, createdAt: new Date() }; this.annotations.set(id, annotation); this.updateHighlights(); return id; } // 更新高亮显示 updateHighlights() { if (this.batchMode) return; // 按用户分组高亮 const userHighlights new Map(); for (const annotation of this.annotations.values()) { if (!userHighlights.has(annotation.userId)) { userHighlights.set(annotation.userId, new Highlight()); } userHighlights.get(annotation.userId).add(annotation.range); } // 注册CSS高亮 for (const [userId, highlight] of userHighlights) { CSS.highlights.set(user-${userId}-highlight, highlight); } } // 批量更新模式 startBatchUpdate() { this.batchMode true; } endBatchUpdate() { this.batchMode false; this.updateHighlights(); } // 生成随机用户颜色 getRandomColor() { return hsl(${Math.floor(Math.random() * 360)}, 80%, 80%); } }对应的CSS让不同用户的批注显示不同颜色::highlight(user-*-highlight) { background-color: var(--user-color); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); } /* 为每个用户动态生成样式 */ const styleElement document.createElement(style); document.head.appendChild(styleElement); function updateUserStyles() { let cssRules ; for (const [userId, color] of reviewSystem.userColors) { cssRules ::highlight(user-${userId}-highlight) { --user-color: ${color}; } ; } styleElement.textContent cssRules; }4.2 解决高亮冲突的策略当多个高亮重叠时默认情况下后添加的高亮会覆盖之前的。通过调整CSS的z-index和混合模式可以创建更优雅的视觉效果::highlight(highlight-1) { background-color: #FFEB3B; mix-blend-mode: multiply; } ::highlight(highlight-2) { background-color: #4CAF50; mix-blend-mode: multiply; } ::highlight(highlight-3) { background-color: #2196F3; mix-blend-mode: multiply; }这样重叠区域会产生自然的颜色混合效果而不是生硬的覆盖。在代码编辑器语法高亮场景中这个技巧特别有用。5. 性能优化技巧5.1 批量操作与防抖更新在处理大量高亮时如全文搜索功能频繁更新会导致性能问题。我通常采用以下优化策略class OptimizedHighlighter { constructor() { this.highlight new Highlight(); this.updateQueue []; this.debounceTimer null; } // 批量添加范围 addRanges(ranges) { ranges.forEach(range { this.highlight.add(range); }); this.scheduleUpdate(); } // 防抖更新 scheduleUpdate() { if (this.debounceTimer) { clearTimeout(this.debounceTimer); } this.debounceTimer setTimeout(() { CSS.highlights.set(optimized-highlight, this.highlight); this.debounceTimer null; }, 50); // 50ms的更新间隔 } // 清理无效范围 cleanup() { const validRanges []; for (const range of this.highlight) { try { // 检查range是否仍然有效 range.cloneRange(); validRanges.push(range); } catch (e) { console.warn(清理无效range:, range); } } this.highlight.clear(); validRanges.forEach(range this.highlight.add(range)); this.scheduleUpdate(); } }5.2 内存管理最佳实践长时间运行的Web应用需要注意内存泄漏问题。这是我的解决方案class SafeHighlighter { constructor() { this.highlight new Highlight(); this.rangeRefs new WeakMap(); this.idCounter 0; } addRangeWithTracking(range) { this.highlight.add(range); this.rangeRefs.set(range, { id: this.idCounter, createdAt: Date.now() }); CSS.highlights.set(safe-highlight, this.highlight); } removeRange(range) { this.highlight.delete(range); this.rangeRefs.delete(range); CSS.highlights.set(safe-highlight, this.highlight); } // 定期清理孤儿range gc() { const rangesToRemove []; for (const range of this.highlight) { if (!this.isRangeAttached(range)) { rangesToRemove.push(range); } } if (rangesToRemove.length 0) { rangesToRemove.forEach(range { this.highlight.delete(range); this.rangeRefs.delete(range); }); CSS.highlights.set(safe-highlight, this.highlight); } } isRangeAttached(range) { try { return document.contains(range.startContainer) document.contains(range.endContainer); } catch (e) { return false; } } }6. 创意应用案例6.1 交互式阅读辅助工具为视障人士开发阅读辅助功能时我结合Custom Highlight API和语音合成API创建了这样的效果class ReadingAssistant { constructor() { this.currentHighlight new Highlight(); CSS.highlights.set(reading-focus, this.currentHighlight); this.speechSynthesis window.speechSynthesis; this.currentUtterance null; } highlightAndSpeak(element) { // 清除当前高亮和语音 this.currentHighlight.clear(); if (this.currentUtterance) { this.speechSynthesis.cancel(); } // 设置新范围 const range new Range(); range.selectNode(element); this.currentHighlight.add(range); // 语音朗读 const text element.textContent; this.currentUtterance new SpeechSynthesisUtterance(text); this.speechSynthesis.speak(this.currentUtterance); // 高亮更新 CSS.highlights.set(reading-focus, this.currentHighlight); } stop() { this.currentHighlight.clear(); CSS.highlights.set(reading-focus, this.currentHighlight); this.speechSynthesis.cancel(); } }配合以下CSS创建视觉焦点效果::highlight(reading-focus) { background-color: rgba(255, 255, 0, 0.3); border-left: 3px solid #FFD600; animation: pulse 1.5s infinite alternate; } keyframes pulse { from { opacity: 0.7; } to { opacity: 1; } }6.2 实时协作光标位置指示在多人协作编辑器中显示其他用户的光标位置是常见需求。传统方案通常需要复杂的DOM操作而用Custom Highlight API可以这样实现class CollaborativeCursors { constructor() { this.userCursors new Map(); this.cursorWidth 2; } updateUserCursor(userId, position) { if (!this.userCursors.has(userId)) { const highlight new Highlight(); CSS.highlights.set(cursor-${userId}, highlight); this.userCursors.set(userId, { highlight, color: this.getUserColor(userId) }); } const { highlight } this.userCursors.get(userId); highlight.clear(); const range new Range(); const node position.node; const offset position.offset; range.setStart(node, offset); range.setEnd(node, offset); highlight.add(range); CSS.highlights.set(cursor-${userId}, highlight); } removeUserCursor(userId) { if (this.userCursors.has(userId)) { CSS.highlights.delete(cursor-${userId}); this.userCursors.delete(userId); } } getUserColor(userId) { // 生成基于用户ID的稳定颜色 const hash Array.from(userId).reduce((acc, char) { return char.charCodeAt(0) ((acc 5) - acc); }, 0); return hsl(${Math.abs(hash) % 360}, 80%, 60%); } }对应的CSS定义光标样式::highlight(cursor-*) { border-left: var(--cursor-width) solid var(--cursor-color); margin-left: calc(-1 * var(--cursor-width)); } /* 动态插入每个用户的光标样式 */ const cursorStyle document.createElement(style); document.head.appendChild(cursorStyle); function updateCursorStyles() { let styles :root { --cursor-width: 2px; }; collaborativeCursors.userCursors.forEach((config, userId) { styles ::highlight(cursor-${userId}) { --cursor-color: ${config.color}; } ; }); cursorStyle.textContent styles; }