CDN是最稳的引入方式，应优先在中引入CSS、前引入JS bundle（如bootstrap.bundle.min.js），可避免漏载Popper等依赖；国内推荐BootCDN，需配SRI校验与HTTPS，并设本地回退方案。
CDN 是最稳的引入方式，别碰本地下载
直接在 里加 CDN 链接，比下载 ZIP、npm install 或手动复制文件快得多，也更少出错。尤其对后台管理页、原型系统这类“改完即上线”的场景，CDN 能绕过构建流程、不卡本地环境、依赖自动拉齐。
常见错误是：把 bootstrap.min.css 下载到本地后发现图标不显示、下拉菜单没反应——大概率漏了 bootstrap-icons 或 popper.js；而用 CDN 一行就搞定全部依赖链。
- Bootstrap 5：在
加<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">，再在前加<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> - Font Awesome 图标：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> - ECharts：
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> - Chart.js：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
如果用了 data-bs-toggle="modal" 却没反应，优先检查是否只引了 bootstrap.min.js ——它不含 popper，必须用 bootstrap.bundle.min.js。
模板结构里别硬塞第三方 HTML
第三方组件（比如一个弹窗、图表容器、仪表盘卡片）不该直接写死在 里，否则后续复用、传参、替换全靠字符串拼接或正则替换，极易崩溃。
立即学习“前端免费学习笔记（深入）”；
真正可集成的起点是 <template id="chart-card"></template>：它不渲染、不执行脚本、不触发资源加载，纯结构声明。但要注意几个硬约束：
-
<template></template>必须放在内，放里部分浏览器会忽略 - 内容必须是合法 HTML 片段，不能有顶层文本节点（比如开头换行或空格）
- 占位符统一用
data-bind属性，例如<h2 data-bind="title"></h2>，避免和框架命名冲突 - 样式隔离别靠 class 前缀，要用 Shadow DOM；否则第三方库自己的
.btn可能覆盖你的全局样式，或反过来
图表库初始化必须手动控制，别等自动扫描
纯 HTML 不会画图，<canvas id="myChart"></canvas> 只是个空容器。你得显式调用 JS 初始化，且必须等 DOM 就绪、库加载完成之后再执行。
常见错误是：页面一加载就跑 new Chart(...)，但 chart.js 还没下载完；或者多个模块都监听 DOMContentLoaded 并尝试初始化同名图表，结果互相覆盖。
- 推荐做法：用
Promise.all([import('echarts'), fetch('/api/data')])或简单点，用<script defer></script>+ 显式函数封装 - 初始化逻辑必须封装成工厂函数，例如
createSalesChart(container, options)，由调用方决定挂载点和参数 - 返回值要是完整 DOM 节点（不是字符串或 DocumentFragment），否则插入位置难控制
- 内部禁止操作
document.body，所有副作用要外显可控
如果后端返回的是 JSON，确保字段名和图表配置对得上，比如 labels 和 datasets[0].data，字段错一位，图表就空白。
iframe 嵌入第三方服务时，别忽略 sandbox 和 title
嵌 YouTube 视频、Google Maps 或内嵌报表页面，<iframe></iframe> 是最安全的选择，但它不是“加个 src 就完事”。关键属性必须显式设置：
-
src是必需的，省略会导致渲染空白帧（不同浏览器行为不一致） -
title是推荐的，关系到无障碍访问（a11y），没它屏幕阅读器可能读不出内容意图 -
sandbox是安全底线，至少加上sandbox="allow-scripts allow-same-origin"，否则跨域脚本直接被禁 - 尺寸别只靠 CSS 控制，
width和height属性仍建议保留，防止加载中抖动
特别注意：如果 iframe 指向的是你自己的另一个 HTML 页面（比如倒车摄像头页），而该地址用了自定义域名如 http://pi-car:8081，在树莓派等嵌入设备上必须先改 /etc/hosts，加 127.0.0.1 pi-car，否则 DNS 解析失败，iframe 就是白屏。
最容易被忽略的是：图表库和 iframe 的加载时机不一致，一个靠 DOMContentLoaded，一个靠网络延迟，混在一起做数据联动时，常出现“图表已渲染但数据还没回来”或“iframe 加载完了但 JS 还没初始化”。这类问题不会报错，只会让仪表盘看起来“偶尔失灵”，调试时得盯住 Network 面板看资源顺序。
