object和embed标签因依赖不安全、性能差的浏览器插件（如flash）而逐渐被淘汰；2. 现代替代方案包括语义化更强、原生支持的html5标签，如
object和
embed标签在 HTML 中扮演着嵌入外部非 HTML 内容的角色，你可以把它们想象成网页上的一个“窗口”，用来展示一些浏览器本身不直接渲染的文件格式，比如早期的 Flash 动画、Java 小程序、PDF 文档，甚至是音视频文件。而“外部资源如何嵌入”这个大问题，其实远不止这两个标签，它涵盖了从最基本的图片、音视频，到复杂的第三方应用、整个网页等多种形式，核心就是通过特定的 HTML 标签和属性，告诉浏览器去哪里获取这些资源，以及如何展示它们。
解决方案
说到
object和
embed标签，它们在 HTML 的发展历程中，确实是扮演过重要角色的。
object标签是一个非常通用的嵌入容器，它设计的初衷就是为了能处理各种各样的外部对象，不仅仅是多媒体，甚至可以是 ActiveX 控件或者其他浏览器插件才能识别的内容。它的灵活性在于可以通过
data属性指定资源的 URL，
type属性指定 MIME 类型，然后通过嵌套 标签来传递参数给嵌入的对象。比如说，你想在网页里放一个 PDF 文件，或者以前流行的 Flash 动画，
object都能派上用场。
而
embed标签呢，它相对来说就简单粗暴一些。它最初并不是 HTML 规范的一部分，更像是一个 Netscape 浏览器为了嵌入插件内容而创造的“事实标准”。它主要通过
src属性指定资源路径，
type指定 MIME 类型。在 Flash 盛行的年代，很多时候你看到的 Flash 嵌入代码里都有它的身影。它没有
object那么强的参数传递能力，但对于简单的媒体嵌入，也算够用。
@@@###@@@ @@@###@@@
当然，现在我们谈论外部资源嵌入，思路已经非常开阔了。除了这两个历史感比较强的标签，更多的是依赖 HTML5 提供的原生标签，比如
接着， 和 标签是 HTML5 带来的福音，它们彻底改变了网页上的多媒体体验。无需插件，直接在浏览器中播放视频和音频，支持多种格式，还提供了丰富的 JavaScript API 供开发者控制播放。
当然，最基础的@@##@@
标签依然是图片嵌入的主力军，它简单、高效。
@@##@@
还有 标签，它主要用于引入外部样式表 (
rel="stylesheet")、网站图标 (
rel="icon") 等。而
此外，像 SVG (Scalable Vector Graphics) 这种矢量图格式，可以直接嵌入到 HTML 文档中，或者通过
@@##@@、
object标签引用。现代前端框架和库，比如 React、Vue、Angular，也通过组件化的方式，将复杂的第三方 UI 组件或服务（如地图、图表库）以更优雅、更可控的方式嵌入到应用中。
嵌入外部资源时，有哪些重要的安全和性能考量？
嵌入外部资源可不是简单地把标签一放就完事了，尤其是在安全和性能方面，这里面学问可大了。我个人在开发中，对这两块是特别上心的。
先说安全吧。这是重中之重。 首先是同源策略（Same-Origin Policy）。这是浏览器的一道重要防线，它限制了来自不同源的文档或脚本之间的交互。比如，你用
还有 Content Security Policy (CSP)，这是一种安全机制，通过 HTTP 响应头或
标签来定义哪些外部资源可以被加载和执行。你可以指定只允许从你的域名加载脚本，只允许从特定 CDN 加载图片，等等。这能有效防范跨站脚本攻击 (XSS) 等。另外，对于用户隐私，特别是嵌入第三方服务（如社交媒体分享按钮、广告），你需要考虑这些服务是否会追踪用户、收集数据。有时候，为了遵守 GDPR 或其他隐私法规，可能需要用户同意后才能加载这些资源。
再来说说性能。 嵌入外部资源，尤其是大型资源，对页面加载速度影响巨大。 懒加载（Lazy Loading）是一个非常实用的技术。对于
@@##@@和
优化资源大小是基本功。视频、音频文件要进行压缩，选择合适的编码格式；图片要优化尺寸、格式和压缩率。PDF 文件也要尽量精简。 对于第三方脚本和样式，尽量采用异步加载 (
async或
defer属性对于
