当前位置: 首页 > 面试题库 >

js异步加载有哪些方案?

吕向荣
2023-03-14
本文向大家介绍js异步加载有哪些方案?相关面试题,主要包含被问及js异步加载有哪些方案?时的应答技巧和注意事项,需要的朋友参考一下

1.将script标签放在body结束标签之前

<html>
<head></head>
<body>
 .....
<script type="text/javascript" src='...'></script>
</body>
</html>

这种方案会先加载dom树,然后再加载js脚本

2.在onload方法中给dom树动态添加script标签

<html>
<head></head>
<body onload="() => {
  var element = document.creatElement('script');
  element.type = 'text/javascript';
  element.src = '...';
  var headTag = document.getElementsByTagName('head')[0];
  headTag.insertBefore(element, headTag.firstChild);
}">
.....
</body>
</html>

这种方案也是先加载dom树,然后触发onload方法添加script标签加载js脚本

3.使用defer属性

<html>
<head>
    <script defer type='text/javascript'></script>
</head>
<body >.....</body>
</html>

这种方案会并行加载dom树和下载js脚本,js脚本下载后会等dom树解析完再执行

4.使用async属性

<html>
<head>
    <script async type='text/javascript'></script>
</head>
<body >.....</body>
</html>

这种方案也会并行加载dom树和下载js脚本,js脚本下载完后立刻并行执行

 类似资料:
  • 本文向大家介绍异步加载CSS的方式有哪些?相关面试题,主要包含被问及异步加载CSS的方式有哪些?时的应答技巧和注意事项,需要的朋友参考一下 js动态插入link标签 在link标签上设置media属性为低优先级的 print, 文档渲染后改为screen 参考文章

  • 本文向大家介绍js延迟加载的方式有哪些?相关面试题,主要包含被问及js延迟加载的方式有哪些?时的应答技巧和注意事项,需要的朋友参考一下 defer 属性 async 属性 动态创建DOM方式 使用jQuery的getScript方法 使用setTimeout延迟方法 让JS最后加载

  • 本文向大家介绍JS同步、异步、延迟加载的方法,包括了JS同步、异步、延迟加载的方法的使用技巧和注意事项,需要的朋友参考一下 本文讲述了JS同步、异步、延迟加载的方法。分享给大家供大家参考,具体如下: 一:同步加载 我们平时使用的最多的一种方式。 <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续

  • 本文向大家介绍JavaScript异步加载方案相关面试题,主要包含被问及JavaScript异步加载方案时的应答技巧和注意事项,需要的朋友参考一下  

  • 本文向大家介绍实现异步编程有哪些方式?推荐用哪种?相关面试题,主要包含被问及实现异步编程有哪些方式?推荐用哪种?时的应答技巧和注意事项,需要的朋友参考一下 回调函数: 最传统的异步处理,下一步的操作交给前一步来控制。当要处理的内容较多时,会出现回调地狱。代码会比较难维护和处理。 Generator: 通过迭代器来实现异步操作。 Promise: ES6 新增特性。通过 和 来实现异步操作。 asy

  • 本文向大家介绍AJAX创建异步对象XMLHttpRequest有哪些步骤?相关面试题,主要包含被问及AJAX创建异步对象XMLHttpRequest有哪些步骤?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: AJAX创建异步对象XMLHttpRequest 操作XMLHttpRequest 对象 (1)设置请求参数(请求方式,请求页面的相对路径,是否异步) (2)设置回调函数,一个处理服务