前端经典面试题合集, JS 脚本延迟加载的方式有哪些?
前端经典面试题合集, JS 脚本延迟加载的方式有哪些?
QA
Step 1
Q:: JS 脚本延迟加载的方式有哪些？
A:: 1. 使用 defer 属性：<script src='example.js' defer></script>。defer 属性会让脚本在 HTML 解析完成后再执行。2. 使用 async 属性：<script src='example.js' async></script>。async 属性会让脚本异步加载并立即执行，不会阻塞 HTML 解析。3. 动态创建脚本标签：通过 JavaScript 动态创建脚本标签并插入到 DOM 中，例如：let script = document.createElement('script'); script.src = 'example.js'; document.body.appendChild(script); 4. 使用 setTimeout：通过 setTimeout 方法延迟执行脚本代码，例如：setTimeout(function() { // 你的脚本代码 }, 0);
Step 2
Q:: defer 和 async 的区别是什么？
A:: 1. defer 属性会让脚本在 HTML 完全解析完毕后再执行，并且按顺序执行多个脚本。2. async 属性会让脚本异步加载并立即执行，不保证执行顺序。defer 适用于多个脚本之间有依赖关系的情况，而 async 适用于独立的脚本。
Step 3
Q:: 如何在 HTML 页面中动态加载 JavaScript 文件？
A:: 可以通过 JavaScript 动态创建 script 标签并将其插入到 DOM 中，例如：let script = document.createElement('script'); script.src = 'example.js'; document.body.appendChild(script);。这种方式常用于需要在特定事件触发时加载额外脚本的场景。