引言：数据可视化与XML文档的交汇点
在当今数据驱动的世界中，数据可视化已成为将复杂信息转化为直观洞察的关键工具。然而，数据的来源往往以结构化格式存储，其中XML（可扩展标记语言）因其灵活性和自描述性，广泛应用于数据交换、配置文件和文档存储。当这些XML数据需要被可视化时，一个核心挑战浮现：如何从庞大的XML文档中快速、精准地提取所需节点，以驱动高效的图表渲染？XPointer（XML Pointer Language）应运而生，它是一种W3C标准，用于在XML文档中进行精确的节点定位和片段引用。
XPointer不仅仅是XPath的简单扩展，它引入了更强大的机制，如范围（range）、子节点（child）和字符串匹配，允许开发者在不修改原始XML的情况下，直接指向文档的特定部分。这在数据可视化中至关重要，因为可视化工具（如D3.js、Tableau或Python的Matplotlib）通常需要从XML源中提取特定数据集（如销售记录、传感器读数或网络拓扑）。通过XPointer，你可以避免低效的全文档解析，直接定位到目标节点，从而显著提升数据处理和展示的效率。
本文将作为一份全面指南，深入探讨XPointer在数据可视化中的应用。我们将从基础概念入手，逐步介绍语法、工具集成，并通过实际代码示例展示如何精准定位XML节点，最终提升数据展示的性能和准确性。无论你是数据分析师、前端开发者还是XML专家，这篇文章都将提供实用的洞见和可操作的步骤。
XPointer基础：理解其核心概念
XPointer是建立在XPath之上的定位语言，旨在提供对XML文档的细粒度访问。XPath用于查询节点树，而XPointer则扩展了这一能力，支持指向文档的任意片段，包括文本节点、属性值，甚至是跨元素的范围。这使得XPointer特别适合处理大型XML文档，如企业级数据仓库或Web服务响应，这些文档可能包含数千个节点。
XPointer与XPath的区别
XPath
：主要用于选择节点集，例如
/bookstore/book[price>35]
，它返回满足条件的
元素列表。但XPath的输出是节点集，无法直接引用文档的子片段。
XPointer
：引入了
xpointer()
函数，允许更精确的定位。例如，
xpointer(/bookstore/book[1]/title)
可以指向第一个
的
<br />
元素，甚至可以指定文本范围，如<br />
xpointer(string-range(/bookstore/book[1]/title, ‘XML’))<br />
来匹配标题中的特定字符串。<br />
XPointer的语法基于URI片段标识符（如<br />
#xpointer(…)<br />
），常用于链接或API调用中。在数据可视化中，这意味着你可以直接从XML源URL中提取数据，而无需预处理整个文件。<br />
为什么XPointer提升数据可视化效率？<br />
精准性<br />
：避免提取无关数据，减少内存占用和处理时间。<br />
灵活性<br />
：支持复杂查询，如跨层级定位或文本匹配，适用于动态数据源。<br />
集成性<br />
：与XSLT、XQuery等技术无缝结合，便于生成可视化所需的JSON或CSV格式。<br />
例如，在一个销售数据XML中，传统方法可能需要解析整个文档来提取所有销售额>1000的记录；使用XPointer，你可以直接定位这些记录的节点，效率提升可达50%以上（取决于文档大小）。<br />
XPointer语法详解：从简单到高级定位<br />
XPointer的核心是<br />
xpointer()<br />
函数，它包裹一个XPath表达式，但允许更丰富的扩展。以下是语法的逐步解析，每个部分都配有示例。<br />
1. 基本节点定位<br />
最基本的XPointer使用XPath路径来指向元素。<br />
示例XML（sales.xml）<br />
：<br />
<sales><br />
<region name="North">
<product id="P001">
<name>Laptop</name>
<price>1200</price>
<quantity>50</quantity>
</product>
<product id="P002">
<name>Mouse</name>
<price>25</price>
<quantity>200</quantity>
</product>
</region><br />
<region name="South">
<product id="P003">
<name>Keyboard</name>
<price>50</price>
<quantity>150</quantity>
</product>
</region><br />
</sales><br />
XPointer示例<br />
：定位North区域的第一个产品。<br />
#xpointer(/sales/region[@name=’North’]/product[1])<br />
这将指向：
<product id="P001">
<name>Laptop</name>
<price>1200</price>
<quantity>50</quantity>
</product>
在数据可视化中，你可以用这个XPointer从XML API中提取数据，直接喂给D3.js的力导向图或条形图。<br />
2. 字符串范围定位（string-range）<br />
这是XPointer的独特功能，用于在文本节点中匹配子字符串，返回匹配的范围节点。语法：<br />
string-range(node-set, substring, start, length)<br />
。<br />
示例<br />
：在上述XML中，查找价格包含”200”的产品。<br />
#xpointer(string-range(/sales/region/product/price, ‘200’))<br />
这将返回
<price>200</price>
节点（如果存在），或其文本范围。<br />
高级用法<br />
：指定起始和长度。例如，提取产品名称的前5个字符：<br />
#xpointer(string-range(/sales/region/product/name, ”, 1, 5))<br />
输出：对于”Laptop”，返回” Laptop”（包括空格）。<br />
在可视化中，这可用于模糊匹配，如在搜索栏中输入关键词时，快速定位相关节点并渲染标签云。<br />
3. 范围定位（range）<br />
XPointer的<br />
range()<br />
函数允许定义文档的连续片段，包括起始和结束点。语法：<br />
range(start-point, end-point)<br />
。<br />
示例<br />
：定位North区域所有产品的范围（从第一个
<product>
到最后一个）。<br />
#xpointer(range(/sales/region[@name=’North’]/product[1], /sales/region[@name=’North’]/product[last()]))<br />
这将返回整个<br />
<region name="North"><br />
子树，便于批量提取数据。<br />
子节点扩展<br />
：<br />
child()<br />
用于在范围内选择子元素。例如，提取范围内的所有
<price>
：<br />
#xpointer(child(range(/sales/region[@name=’North’]/product[1], /sales/region[@name=’North’]/product[last()]), price))<br />
4. 组合与嵌套<br />
XPointer支持多个函数的组合，使用空格分隔。例如，结合XPath条件和字符串匹配：<br />
#xpointer(xpointer(/sales/region/product[price>1000]) string-range(name, ‘Laptop’))<br />
这定位价格>1000且名称包含”Laptop”的产品。<br />
注意<br />
：XPointer的解析器必须支持这些扩展（如libxml2）。在浏览器中，原生支持有限，通常需借助JavaScript库。<br />
在数据可视化中的应用：从定位到展示<br />
数据可视化通常涉及数据提取、转换和渲染三个阶段。XPointer在提取阶段大放异彩，尤其当XML是数据源时（如RSS feed、SOAP响应或配置文件）。<br />
场景1：实时仪表板中的节点提取<br />
假设你有一个实时传感器数据XML流，需要可视化温度趋势。<br />
步骤<br />
：<br />
定义XPointer<br />
：定位最近5个温度读数。<br />
#xpointer(/sensors/reading[position() > last()-5]/temperature)<br />
提取数据<br />
：使用HTTP请求获取XML片段。<br />
转换与可视化<br />
：用XSLT将片段转为JSON，然后用Chart.js渲染折线图。<br />
代码示例（Python + lxml库）<br />
：<br />
from lxml import etree<br />
import requests</p>
<p># 模拟XML源<br />
xml_url = “http://example.com/sensors.xml”<br />
response = requests.get(xml_url)<br />
xml_doc = etree.fromstring(response.content)</p>
<p># 应用XPointer（lxml支持xpointer）<br />
xpointer_expr = “xpointer(/sensors/reading[position() > last()-5]/temperature)”<br />
# 注意：lxml需启用XInclude支持<br />
root = etree.XML(xml_doc)<br />
fragment = root.xpath(xpointer_expr, namespaces={‘xi’: ‘http://www.w3.org/2001/XInclude’})</p>
<p># 提取数值<br />
temps = [float(node.text) for node in fragment]<br />
print(temps) # 示例输出: [22.5, 23.1, 22.8, 23.5, 24.0]</p>
<p># 现在，你可以将temps传给matplotlib<br />
import matplotlib.pyplot as plt<br />
plt.plot(temps)<br />
plt.title(“Temperature Trend”)<br />
plt.show()<br />
这个例子中，XPointer避免了解析整个XML，直接提取5个节点，处理时间从O(n)降到O(1)（针对子集）。<br />
场景2：复杂网络拓扑可视化<br />
在网络安全可视化中，XML可能描述网络节点和连接。使用XPointer定位特定子网。<br />
示例XML（network.xml）<br />
：<br />
<network><br />
<subnet id="192.168.1.0"><br />
<node type="router" ip="192.168.1.1"/><br />
<node type="host" ip="192.168.1.10"/><br />
</subnet><br />
<subnet id="192.168.2.0"><br />
<node type="switch" ip="192.168.2.1"/><br />
</subnet><br />
</network><br />
XPointer<br />
：定位所有路由器节点。<br />
#xpointer(/network/subnet/node[@type=’router’])<br />
集成到D3.js<br />
：<br />
// 假设通过XMLHttpRequest获取XML，并解析XPointer<br />
const xhr = new XMLHttpRequest();<br />
xhr.open(‘GET’, ‘network.xml#xpointer(/network/subnet/node[@type=”router”])’);<br />
xhr.onload = function() {<br />
const parser = new DOMParser();<br />
const xmlDoc = parser.parseFromString(xhr.responseText, ‘text/xml’);<br />
const nodes = Array.from(xmlDoc.getElementsByTagName(‘node’)).map(node => ({<br />
ip: node.getAttribute(‘ip’),<br />
type: node.getAttribute(‘type’)<br />
}));</p>
<p> // D3渲染<br />
const svg = d3.select(“body”).append(“svg”).attr(“width”, 500).attr(“height”, 300);<br />
svg.selectAll(“circle”)<br />
.data(nodes)<br />
.enter()<br />
.append(“circle”)<br />
.attr(“cx”, (d, i) => 50 + i * 100)<br />
.attr(“cy”, 150)<br />
.attr(“r”, 20)<br />
.attr(“fill”, “red”)<br />
.append(“title”)<br />
.text(d => d.ip);<br />
};<br />
xhr.send();<br />
这里，XPointer确保只提取路由器节点，减少DOM操作，提高渲染速度，尤其在大型网络图中。<br />
场景3：文本驱动的可视化（如词云）<br />
使用<br />
string-range<br />
提取关键词，生成词云。<br />
代码示例（JavaScript + DOMParser）<br />
：<br />
function extractKeywords(xmlString, keyword) {<br />
const parser = new DOMParser();<br />
const xmlDoc = parser.parseFromString(xmlString, ‘text/xml’);</p>
<p> // 模拟XPointer string-range<br />
const titles = xmlDoc.getElementsByTagName(‘name’);<br />
let matches = [];<br />
for (let title of titles) {<br />
const text = title.textContent;<br />
const index = text.indexOf(keyword);<br />
if (index !== -1) {<br />
matches.push(text.substring(index, index + keyword.length));<br />
}<br />
}<br />
return matches;<br />
}</p>
<p>// 示例调用<br />
const xml = `<sales><region><product><name>Laptop Sale</name></product></region></sales>`;<br />
const keywords = extractKeywords(xml, ‘Sale’); // 输出: [‘Sale’]<br />
// 然后用WordCloud库渲染<br />
这展示了XPointer如何加速文本匹配，用于情感分析或主题可视化。<br />
工具与最佳实践<br />
支持XPointer的工具<br />
浏览器<br />
：有限支持；使用Saxon.js或XPath处理器。<br />
Python<br />
：lxml库（<br />
etree.XInclude<br />
）。<br />
Java<br />
：Xerces或Saxon。<br />
在线测试<br />
：使用XPath测试器如XMLGrid.net，模拟XPointer。<br />
性能优化技巧<br />
缓存查询<br />
：预编译XPointer表达式，避免重复解析。<br />
分页处理<br />
：对于超大XML，使用<br />
position()<br />
限制结果集。<br />
错误处理<br />
：XPointer可能抛出错误（如无效路径），用try-catch包裹。<br />
安全性<br />
：在Web应用中，验证XPointer输入以防注入攻击。<br />
与XSLT结合<br />
：生成可视化数据：<br />
<xsl:stylesheet version="1.0"><br />
<xsl:template match="/"><br />
<xsl:copy-of select="xpointer(/sales/region/product)"/><br />
</xsl:template><br />
</xsl:stylesheet><br />
常见陷阱与解决方案<br />
命名空间问题<br />
：确保XML声明命名空间，使用<br />
namespace::prefix<br />
。<br />
浏览器兼容性<br />
：在Node.js中用<br />
xmldom<br />
库模拟。<br />
调试<br />
：逐步测试XPath子表达式，再嵌入XPointer。<br />
结论：提升效率的关键一步<br />
通过XPointer，你可以将XML文档从静态数据源转化为动态、精准的可视化输入，显著提升效率——从手动解析的分钟级到秒级提取。在实际项目中，从简单定位开始，逐步探索范围和字符串匹配，将使你的数据管道更高效。建议从一个小型XML文件入手，结合上述代码实验，并扩展到生产环境。如果你有特定XML结构或可视化工具，我可以提供更定制的指导。拥抱XPointer，让你的数据可视化更上一层楼！</p>
</div>
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"
style="margin-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50)">
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<div style="height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer">
</div>
<hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" style="margin-bottom:var(--wp--preset--spacing--40)"/>
<nav class="wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-2b923ac6 wp-block-group-is-layout-flex" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)" aria-label="Posts">
<div class="post-navigation-link-previous wp-block-post-navigation-link"><span class="wp-block-post-navigation-link__arrow-previous is-arrow-arrow" aria-hidden="true">←</span><a href="https://ziliao.tiaomu.com/102436864/" rel="prev"><span class="post-navigation-link__label">Previous: </span> <span class="post-navigation-link__title">Verilog 时序问题分析：从代码到波形的深度排查与解决之道</span></a></div>
<div class="post-navigation-link-next wp-block-post-navigation-link"><a href="https://ziliao.tiaomu.com/102436866/" rel="next"><span class="post-navigation-link__label">Next: </span> <span class="post-navigation-link__title">深入解析Java大数据技术原理 从基础概念到实际应用中的性能瓶颈与优化策略探讨</span></a><span class="wp-block-post-navigation-link__arrow-next is-arrow-arrow" aria-hidden="true">→</span></div>
</nav>
</div>
</div>
</main>
<footer class="wp-block-template-part">
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%">
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-831b2db5 wp-block-group-is-layout-flex">
<p class="wp-block-site-title has-medium-font-size"><a href="https://ziliao.tiaomu.com" target="_self" rel="home">资料库 – 中文知识库</a></p>
</div>
</div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:20%">
</div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%">
<div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-cf54d0a6 wp-block-group-is-layout-flex">
<div class="wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-d8dce8eb wp-block-group-is-layout-flex">
<h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">About</h2>
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-bce0c455 wp-block-group-is-layout-flex">
<nav style="font-style:normal;font-weight:400" class="has-small-font-size is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-bce0c455 wp-block-navigation-is-layout-flex" aria-label="About"><ul style="font-style:normal;font-weight:400" class="wp-block-navigation__container has-small-font-size is-vertical wp-block-navigation" aria-label="About"><li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Team</span></a></li><li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">History</span></a></li><li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Careers</span></a></li></ul></nav>
</div>
</div>
<div class="wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-d8dce8eb wp-block-group-is-layout-flex">
<h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Privacy</h2>
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-bce0c455 wp-block-group-is-layout-flex">
<nav style="font-style:normal;font-weight:400" class="has-small-font-size is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-bce0c455 wp-block-navigation-is-layout-flex" aria-label="Privacy"><ul style="font-style:normal;font-weight:400" class="wp-block-navigation__container has-small-font-size is-vertical wp-block-navigation" aria-label="Privacy"><li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Privacy Policy</span></a></li><li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Terms and Conditions</span></a></li><li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Contact Us</span></a></li></ul></nav>
</div>
</div>
<div class="wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-d8dce8eb wp-block-group-is-layout-flex">
<h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Social</h2>
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-bce0c455 wp-block-group-is-layout-flex">
<nav style="font-style:normal;font-weight:400" class="has-small-font-size is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-bce0c455 wp-block-navigation-is-layout-flex" aria-label="Social Media"><ul style="font-style:normal;font-weight:400" class="wp-block-navigation__container has-small-font-size is-vertical wp-block-navigation" aria-label="Social Media"><li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Facebook</span></a></li><li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Instagram</span></a></li><li class="wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Twitter/X</span></a></li></ul></nav>
</div>
</div>
</div>
</div>
</div>
<div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:0">
<p class="has-contrast-2-color has-text-color has-link-color has-small-font-size wp-elements-1 wp-block-paragraph">
Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a> </p>
</div>
</div>
</footer>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyfour/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script data-wp-router-options="{"loadOnClientNavigation":true}" fetchpriority="low" id="@wordpress/block-library/navigation/view-js-module" src="https://ziliao.tiaomu.com/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=1bf28ded04f9f188bdcb" type="module"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://ziliao.tiaomu.com/wp-includes/js/wp-emoji-release.min.js?ver=7.1.3"}}
</script>
<script type="module">
/*! This file is auto-generated */
var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))});
//# sourceURL=https://ziliao.tiaomu.com/wp-includes/js/wp-emoji-loader.min.js
</script>
<noscript><link rel="stylesheet" href="https://ziliao.tiaomu.com/wp-content/themes/abiz/assets/css/all.min.css?ver=6.5.1"></noscript>
</body>
</html>