删<!--[if IE]>导致错位是因为老Portal的CSS、JS隐式依赖其注入的class；data-*属性过多拖慢渲染是因触发浏览器自定义数据监听开销；iframe嵌套拖慢首屏是因阻塞DOMContentLoaded；vendor.js体积不降反升是因SplitChunks未合理配置。
为什么删 <!--[if IE]> 条件注释后页面反而错位了
因为现代浏览器（包括 Edge）已彻底不解析 <!--[if IE]>，但很多老 Portal 的 CSS 重置逻辑、栅格初始化、甚至 JS 模块加载都隐式依赖这些注释触发的 class（比如 <html class="ie">）。直接删除会导致后续选择器失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先全局搜索
<!--[if，定位所有条件注释位置 - 检查注释内是否注入了关键 class 或执行了必需的 polyfill（如
document.createElement('header')） - 用现代方式等价替换：对 IE11 及以下需兼容的，改用
UA 检测 + class 动态添加；纯现代环境可直接移除并清理对应 CSS 规则（如.ie .grid-col） - 特别注意
<meta http-equiv="X-UA-Compatible" content="IE=edge">——若页面已放弃 IE 支持，这行可删，否则保留
data-* 属性堆叠超过 5 层时 DOM 渲染变慢的真实原因
不是属性本身慢，而是大量 data- 触发了浏览器对元素的“自定义数据监听”开销，尤其当配合 MutationObserver 或框架（如 Angular 的 ng-reflect-）使用时，每个属性都会被纳入变更追踪树。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
getBoundingClientRect()和performance.now()定位具体卡顿节点，确认是否真由data-引起（而非嵌套过深或样式计算） - 合并冗余属性：把
data-id、data-type、data-status改为单个data-meta='{"id":123,"type":"card","status":"active"}' - 对非运行时必需的调试类属性（如
data-debug-info），构建时用 Webpack 的DefinePlugin剔除 - 避免在循环渲染中动态写入
data-——改用 Map 存储元数据，DOM 元素只保留最小必要 key
Portal 中 <iframe> 嵌套导致首屏时间翻倍的隐蔽瓶颈
问题不在 iframe 内容本身，而在于主页面的 DOMContentLoaded 事件会被所有 iframe 的加载阻塞（即使 iframe 是空 src 或 sandboxed），尤其当多个 iframe 加载第三方脚本时，DNS 查询、TLS 握手、资源竞争会拖垮整体 LCP。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 将非首屏 iframe 改为懒加载：
<iframe loading="lazy">（Chrome 76+ 支持，旧版 fallback 用 IntersectionObserver） - 禁止 iframe 自动加载：初始设
src="about:blank"，滚动进入视口后再赋真实src - 检查 iframe 的
sandbox属性——若不需要 JS 执行，务必加sandbox="allow-scripts"以外的限制，减少安全策略解析开销 - 警惕
document.write()在 iframe 中调用，它会强制同步解析，直接阻塞主文档流
Webpack 构建后 vendor.js 体积没降反升的配置陷阱
常见于 Portal 类项目启用了 SplitChunksPlugin 却未排除 node_modules 中的巨型包（如 moment、lodash、pdfjs-dist），导致 Webpack 把它们和业务代码一起拆分，反而生成更多小 chunk，增加 HTTP 请求与解析负担。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
splitChunks.cacheGroups中显式指定priority，确保moment等大包单独成 chunk（优先级 > 0） - 禁用自动拆分：设
chunks: 'all'+minSize: 30000（30KB），避免把小模块（如utils/uuid.js）也拆出去 - 检查
optimization.runtimeChunk是否为'single'——Portal 多入口场景下，应设为true避免重复 runtime 代码 - 用
webpack-bundle-analyzer查看实际 chunk 构成，重点看是否有node_modules路径意外混入业务 chunk
Portal 页面的 HTML 轻量化，本质是控制「不可见的耦合」——那些没写在标签里、却靠注释、属性、iframe、构建配置暗中维系的依赖。改一处，得查三处上下文。
