动态加载js、css的实例代码

动态加载JS、CSS是指在网页加载完成后，通过JavaScript动态向页面添加新的JS、CSS资源。实现动态加载JS、CSS资源的方法有多种，包括DOM操作及XMLHttpRequest等方式。

DOM操作方法

使用DOM操作方法，可以通过JavaScript创建新的script标签或link标签来动态添加JS和CSS文件。具体代码如下：

// 动态加载JS文件
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function() {
    console.log('JS文件已加载完成');
};
script.src = 'path/to/your/js/file.js';
head.appendChild(script);

// 动态加载CSS文件
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.onload = function () {
    console.log('CSS文件已加载完成');
};
link.href = 'path/to/your/css/file.css';
head.appendChild(link);

上述代码中，首先获取head标签，然后创建一个新的script标签或link标签，并设置type、src/href等属性，最后将新标签添加到head中即可。

XMLHttpRequest方法

使用XMLHttpRequest方法，可以向服务器请求JS或CSS文件并动态添加到页面上。以下代码演示了通过XMLHttpRequest加载JS文件的过程：

// 动态加载JS文件
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        eval(xhr.responseText);
        console.log('JS文件已加载完成');
    }
};
xhr.open('GET', 'path/to/your/js/file.js', true);
xhr.send();

以上代码中，首先创建一个XMLHttpRequest对象，然后通过onreadystatechange监听readystatechange事件，当readyState为4且status为200时，表示请求已经成功，此时可以通过eval方法执行返回的JS代码，最后输出“JS文件已加载完成”的信息。

以上是两种实现动态加载JS、CSS的方法及示例代码。需要注意的是，动态加载的JS、CSS文件可能会导致页面性能降低、加载速度变慢等问题，需要谨慎使用。