原理解析：第一步：使用dom创建[removed]或者<link>标签，并给他们附加属性，如type等第二步：使用appendChild方法把标签绑定到另一个标签，一般是绑到<head>. 应用：1、提高代码的复用，减少代码量；2、添加一个javascript控制器和 session可以实现动
动态加载外部CSS或JS文件是网页开发中一种常见的优化策略，它允许我们在页面加载时按需引入资源，而不是一次性在HTML文档中预先定义所有样式表和脚本文件。这种技术有多个优点，包括提高页面加载速度，降低首屏渲染时间，以及更灵活的代码组织方式。
**原理解析**
动态加载的实现主要涉及以下步骤：
1. **创建元素**：我们需要通过DOM（Document Object Model）API来创建`<script>`或`<link>`标签。对于CSS文件，我们会创建`<link>`标签，设置其`rel`属性为`"stylesheet"`，`type`属性为`"text/css"`，并指定`href`属性为CSS文件的URL。对于JavaScript文件，我们会创建`<script>`标签，`type`属性通常设置为`"text/javascript"`或`"module"`（对于ES6模块），`src`属性则指向JS文件的位置。
2. **附加属性**：除了基本属性外，还可以根据需要添加其他属性，例如`async`（异步加载）或`defer`（延迟加载）。`async`属性使得脚本可以在不阻塞页面解析的情况下加载，而`defer`属性则确保脚本在HTML解析完成后但在`DOMContentLoaded`事件触发前执行。
3. **插入DOM**：接下来，我们使用`appendChild`方法将新建的`<script>`或`<link>`标签插入到DOM树中的合适位置。通常，CSS链接会添加到`<head>`元素中，以确保样式立即生效。而`<script>`标签可以放在`<head>`或`<body>`的末尾，取决于是否需要立即执行或按需加载。
4. **监听加载状态**：为了知道文件是否成功加载，我们可以为`<link>`和`<script>`元素添加事件监听器，例如`load`和`error`事件。这样，我们就可以在文件加载完成或失败时执行相应的回调函数。
**应用场景**
动态加载有以下几种常见应用场景：
1. **按需加载**：只有当用户需要特定功能时，才加载对应的CSS或JS文件，如路由懒加载、模块化开发中的按需导入。
2. **代码分割**：在SPA（单页应用）中，将大体积的库或模块分割成多个小文件，按需加载，以减小初始加载的资源大小。
3. **动态主题**：通过动态加载不同的CSS文件，实现网站主题的快速切换。
4. **性能优化**：利用异步加载或延迟加载策略，减少首屏渲染时间，提升用户体验。
5. **脚本依赖管理**：当某些脚本依赖于其他脚本时，可以通过动态加载来确保加载顺序。
6. **内容更新**：例如，通过检测用户的行为或服务器的反馈，动态替换或添加CSS，以实现界面的实时更新。
**实现示例**
```javascript
// 动态加载CSS
function loadCSS(url) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
}
// 动态加载JS
function loadJS(url, callback) {
const script = document.createElement('script');
script.src = url;
if (callback) {
script.onload = callback;
}
document.body.appendChild(script);
}
// 使用示例
loadCSS('styles.css');
loadJS('script.js', function() {
console.log('JavaScript file loaded');
});
```
通过以上方式，我们可以实现对CSS和JS文件的动态加载，从而更好地控制网页的加载流程，提高性能，并提供更加个性化的用户体验。同时，这种技术也适用于响应式设计、动态内容更新等多种场景，为现代Web开发提供了更多的灵活性。
