动态加载js和css(外部文件)

动态加载JS和CSS文件是在页面加载过程中向页面动态地添加外部资源文件。它可以帮助我们减少页面加载时间，提高网站性能，使网站更加简洁干净，增强用户体验。下面是完整攻略：

动态加载JS文件

通过DOM创建script标签

使用JavaScript函数 createElement() 和 appendChild() 创建一个新的script标签，将其插入到文档中，加载外部的JavaScript文件。

var tag = document.createElement('script');
tag.src = 'externalScript.js';
var body = document.getElementsByTagName('body')[0];
body.appendChild(tag);

使用使用jQuery库的getScript()函数

通过jQuery的getScript()方法可以加载外部JavaScript文件，不需要创建script标签并插入到DOM中。用法如下：

$.getScript("externalScript.js", function(){
  // 在这里使用外部JS代码
});

动态加载CSS文件

通过DOM创建link标签

使用JavaScript函数 createElement() 和 appendChild() 创建一个新的link标签，并设置 rel="stylesheet" 和 href 属性，将其插入到文档中，加载外部的CSS文件。

var tag = document.createElement('link');
tag.setAttribute('rel', 'stylesheet');
tag.setAttribute('type', 'text/css');
tag.setAttribute('href', 'externalStyle.css');
var head = document.getElementsByTagName('head')[0];
head.appendChild(tag);

使用使用jQuery库的getCSS()函数

通过jQuery的getCSS()方法可以加载外部CSS文件，不需要创建link标签并插入到DOM中。用法如下：

$.getCSS("externalStyle.css", function(){
  // 在这里使用外部CSS样式
});

以上是动态加载JS和CSS文件的两条示例说明，可以根据实际需求选择不同的方法进行动态加载。