使用javaScript动态加载Js文件和Css文件

使用JavaScript动态加载JS文件和CSS文件是一种常见的前端技巧，可以帮助优化网页加载速度，提升用户体验。下面是实现这个技巧的完整攻略：

动态加载JS文件

动态加载JS文件通常分为两种方式：利用script标签动态插入和利用XMLHttpRequest请求代码并执行。

利用script标签动态插入

通过在HTML文档中添加一个script标签，并设置其src属性为JS文件的URL，就可以动态加载JS文件。代码示例如下：

var script = document.createElement('script');
script.src = 'path/to/my.js';
document.head.appendChild(script);

上述代码中，首先创建了一个script标签，然后设置了它的src属性为要加载的JS文件的URL，最后通过appendChild方法将script标签添加到文档头部。这样JS文件就会被自动下载并执行。

利用XMLHttpRequest请求代码并执行

使用XMLHttpRequest可以请求JS文件的代码，并执行JS代码。代码示例如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/my.js', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        eval(xhr.responseText);
    }
};
xhr.send();

上述代码中，首先创建了一个XMLHttpRequest对象，然后通过open方法指定要请求的JS文件的URL，最后通过onreadystatechange事件监听器，在请求成功后执行eval方法将JS代码执行。

动态加载CSS文件

动态加载CSS文件通常也是通过在HTML文档中添加link标签实现的。代码示例如下：

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/my.css';
document.head.appendChild(link);

上述代码中，首先创建了一个link标签，然后设置了它的rel属性为stylesheet（代表样式表），href属性为要加载的CSS文件的URL，最后通过appendChild方法将link标签添加到文档头部。这样CSS文件就会被自动下载并应用于文档中。

另一种动态加载CSS文件的方式是使用@import指令，具体代码如下：

var style = document.createElement('style');
style.textContent = '@import "path/to/my.css";';
document.head.appendChild(style);

上述代码中，首先创建了一个style标签，然后设置其textContent属性为CSS文件的@import指令，最后通过appendChild方法将style标签添加到文档头部。这样CSS文件也会被自动下载并应用于文档中。

以上就是动态加载JS文件和CSS文件的完整攻略，两种文件的动态加载方式都分别给出了两个示例代码。