动态加载外部CSS与JS文件

动态加载外部CSS与JS文件是指在页面运行过程中，通过JavaScript代码动态地将外部CSS和JS文件引入到页面中。该技术有助于减小页面首屏加载时间，并且可以方便地做到条件加载，提高网页性能。

下面是动态加载外部CSS与JS文件的完整攻略：

1. 动态加载外部CSS文件

代码示例：

//创建一个link标签，并为其设置CSS文件的链接地址
var link = document.createElement("link");
link.href = "style.css";
link.rel = "stylesheet";
link.type = "text/css";

//将link标签插入到页面head中
document.getElementsByTagName("head")[0].appendChild(link);

代码解释：

首先，我们使用document.createElement()方法创建一个link标签，并为其设置需要引入的CSS文件的链接地址（href属性）、文件类型（type属性）以及与当前文档的关系（rel属性设置为stylesheet）。

接着，我们使用document.getElementsByTagName()方法获取页面中的head标签，并在其子元素列表中添加这个新的link标签。

2. 动态加载外部JS文件

代码示例：

//创建一个script标签，并为其设置JS文件的链接地址
var script = document.createElement("script");
script.src = "demo.js";
script.type = "text/javascript";

//将script标签插入到页面head中
document.getElementsByTagName("head")[0].appendChild(script);

代码解释：

我们使用document.createElement()方法来创建一个script标签，并为其设置要引入的JS文件的链接地址（src属性）以及文件类型（type属性设置为text/javascript）。

然后，我们使用document.getElementsByTagName()方法获取页面中的head标签，并在其子元素列表中添加这个新的script标签。

以上两个示例代码都是将动态加载的CSS与JS文件插入到head标签中。当然，你也可以选择将它们插入到其他的页面元素中，如body标签。不过，建议还是将CSS文件放到head标签中，这有助于更快地渲染页面。