HTML iframe的现代替代方案：为什么现在不推荐使用iframe了？
🧑🏫 作者：全栈老李
📅 更新时间：2025 年 6 月
🧑💻 适合人群：前端初学者、进阶开发者
🚀 版权：本文由全栈老李原创，转载请注明出处。
大家好，我是全栈老李。今天咱们聊聊一个看似简单但实际暗藏玄机的话题——iframe。记得我刚入行那会儿，iframe可是嵌入第三方内容的"万金油"，但现在你去GitHub上看那些明星项目，几乎找不到iframe的影子了。这中间发生了什么？让我们一探究竟。
iframe的前世今生
iframe全称Inline Frame，是HTML4时代就存在的标签。它的基本用法是这样的：
简单几行代码就能把另一个网页嵌入到当前页面中，这在2000年代初期简直是黑科技。那时候的网页开发，iframe常被用于：
嵌入广告
加载第三方小工具（如地图、社交媒体按钮）
实现"无刷新"页面切换（现在想想真是时代的眼泪）
但随着时间的推移，iframe的问题逐渐暴露出来...
iframe的七宗罪
1. 性能杀手
每个iframe都是一个完整的文档环境，意味着浏览器要为其创建新的DOM树、CSSOM和JavaScript上下文。根据Google的研究，每个iframe平均会增加15-30%的内存消耗和10-20ms的解析时间。
// 全栈老李实测：测量iframe加载性能
console.time('iframe加载');
document.querySelector('iframe').onload = () => {
console.timeEnd('iframe加载'); // 通常输出200-500ms不等
};
2. 安全噩梦
同源策略本应是保护伞，但iframe却成了XSS攻击的温床。还记得那些年我们被clickjacking支配的恐惧吗？