html-query-plan一个不错的sql server查询计划展示web 组件
html-query-plan 是一个不错的sql server 查询计划web 展示组件,基本可以还原sql server 查询计划的展示，如果我们需要集成web 的
sql server 性能优化，是一个不错的选择
参考使用
- 下载html-query-plan
我使用了2.6版本的，参考如下地址：
https://github.com/JustinPealing/html-query-plan/releases/download/v2.6/html-query-plan-2.6.zip - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="html-query-plan-2.6/css/qp.css" />
<script src="html-query-plan-2.6/dist/qp.js"></script>
<style>
#container {
overflow-x: auto;
width: auto;
height: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
fetch("/myquery.txt").then(req=>{
console.log(req)
return req.text()
}).then(result=>{
console.log(result)
QP.showPlan(document.getElementById("container"), result);
})
</script>
</body>
</html>
- 简单说明
通过fetch 获取查询计划的内容（实际使用我们可以通过类似pmm 的qan 模式，抓取慢查询的处理，然后存储db：clickhouse，mongodb，rdbms。。。）
html-query-plan对于展示使用比较简单，直接使用QP.showPlan第一个参数为dom element ，第二个为查询计划的xml content - 效果
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
2017-05-06 Spring boot admin 使用
2017-05-06 Prometheus 简介
2014-05-06 oracle nodejs 访问
2014-05-06 oracle 变量作用域
2014-05-06 Oracle集合类型
2014-05-06 Oracle sql之条件语句 循环语句