`

js load js, 阻塞或并行加载

    博客分类:
  • JS
 
阅读更多
参考:
http://blog.csdn.net/doymm2008/article/details/7513634
http://blog.csdn.net/huli870715/article/details/6373170

方式一:
<head>
  <script type="text/javascript" src="a.js"></script>
  <script type="text/javascript" src="b.js"></script>
</head>


此种方式:



方式二:
<html>
<head>
<script type="text/javascript">
function load_js(src) {
  var script_elem = document.createElement('script');
  script_elem.type = 'text/javascript';
  script_elem.src = src;
  document.getElementsByTagName('head')[0].appendChild(script_elem);
}
load_js('a.js');
load_js('b.js');
load_js('http://www.jt-tech.net/misc/jquery.js');
</script>
</head>
<body>
<img src="http://static.perfgeeks.com/wp-content/uploads/2011/01/p_460_001.jpg" />
</body>
</html>




  function dynamicLoad()
  {
     var _doc=document.getElementsByTagName('head')[0];
     var script=document.createElement('script');
     script.setAttribute('type','text/javascript');
     script.setAttribute('src','jquery-1.4.4.js');
     _doc.appendChild(script);
  }


此种方式:




js的阻塞与并行加载,根据自己的需要选择合适的方式。当选择并行加载时,如果两个并行加载的js有依赖关系,就有可能出现问题,此时也许就不得不现在阻塞加载了,把依赖的js放在最前面,一个一个的加载执行。
  • 大小: 49.4 KB
  • 大小: 54.7 KB
分享到:
评论

相关推荐

    JS动态加载库

    3. **异步加载(Asynchronous Loading)**:避免阻塞主线程,使脚本并行加载,提升页面加载效率。 二、API介绍 根据描述,这个JS动态加载库提供了三个API,虽然具体名称未知,但常见的动态加载库的API可能包括: 1....

    单页面的js文件动态加载组件

    js文件动态加载是通过JavaScript代码在需要时按需加载外部JavaScript文件的一种技术。这样可以减少初始页面加载时间,提高用户体验,因为不是所有的代码都在页面加载时就需要执行。有几种常见的方法可以实现动态加载...

    js-async-files-load:异步JS文件加载

    在现代JavaScript中,我们还可以使用`fetch` API或者`XMLHttpRequest`(XHR)来异步加载文件,尤其是在需要动态加载或条件加载时。例如,我们可以创建一个函数来异步获取并执行脚本: ```javascript function load...

    load.js:用于 Javascript 和 TypeScript 的小型、全面的脚本加载器

    它提供了一个简单而强大的 API,让您可以管理代码中的脚本依赖项而不是外部 HTML 文件,并在不阻塞 CSS、图像或其他脚本的情况下并行异步加载它们。为什么要加载.js?...代替脚本标签使用脚本标签有三个主要问题: ...

    LABjs无阻塞脚本加载工具

    LABjs,全称为"Load And Balance JavaScript",是一款强大的JavaScript库,专为了解决Web页面中的脚本阻塞问题而设计。在传统的HTML文档中,脚本通常按顺序执行,这意味着一个脚本的加载和执行会阻塞后续脚本的加载...

    前端开源库-load

    5. **动态加载策略**:load库提供了多种加载策略,如并行加载、顺序加载等,开发者可以根据项目需求选择最合适的策略。 在实际应用中,使用load库的步骤可能包括以下几点: 1. 引入load库:首先在HTML文件中引入...

    Js载入文件并显示进度条JSLoader

    4. **错误处理**:JSLoader还包含了错误处理机制,当文件加载失败时,会触发onerror事件,开发者可以设置回调函数处理这种情况,例如重新尝试加载或显示错误信息。 **二、使用方法** 1. **引入JSLoader**:首先...

    JavaScript文件的同步和异步加载的实现代码

    与同步加载相对的是异步加载,它允许浏览器并行加载JavaScript文件,不会阻塞页面的其他内容的渲染。通过动态创建script元素并设置`async`或`defer`属性,或者使用AJAX技术实现。 1. **动态创建script元素** 通过...

    js页面生命周期1

    async属性使脚本并行加载,不等待其他资源,而defer属性则确保脚本在DOMContentLoaded之后,但在load事件之前执行。 总的来说,掌握页面生命周期事件可以帮助开发者更好地管理页面状态,确保代码在正确的时间执行,...

    ui5-CoreLoader.js:快速响应 SAPUI5 和 OpenUI5 Core(-Library) 加载器

    之后,在你的HTML文件中引入ui5-CoreLoader.js,并调用其提供的API来预加载或异步加载Core库。 四、API使用 ui5-CoreLoader.js提供了一系列API供开发者使用,例如`loadCore`用于加载Core库,`loadLibrary`用于加载...

    如何使用headjs来管理和异步加载js

    JavaScript的异步加载是现代网页开发中不可或缺的一部分,特别是在优化页面性能和提升用户体验方面。本文主要探讨了如何使用headjs这个轻量级的JavaScript库来实现动态管理和异步加载JavaScript文件,以解决对于小型...

    special-load-page:特殊加载页面

    在IT行业中,特殊加载页面(Special Load Page)通常是指一种非标准或定制化的网页加载机制,用于优化用户体验、处理特定场景或实现特定功能。这种页面可能包含动态内容、交互元素或者特殊的加载效果,以满足不同...

    javascript动态加载三

    异步策略则避免了同步加载的阻塞问题,它允许多个模块并行加载,提高加载效率。当一个模块加载完成后,它的回调函数会被调用,这样就可以在不阻塞主线程的情况下执行相关的代码。在JavaScript中,可以通过`...

    使用RequireJS库加载JavaScript模块的实例教程

    AMD规范允许模块和它们的依赖关系并行加载。在RequireJS中,模块通过`define`函数来定义,它接受三个参数:模块名(可选)、依赖的模块列表和一个工厂函数。工厂函数执行后返回模块的接口(通常是对象或函数)。例如...

    加载 Javascript 最佳实践

    这种做法的主要原因是,JavaScript脚本在执行时会阻塞页面的其他内容的渲染,如果放在之前,可以减少对页面加载时间的影响。 但是随着时间的推移,浏览器技术发生了变化。现代的浏览器已经具备了并行下载JavaScript...

    LABjs-2.0.3

    2. **智能加载策略**: LABjs 提供了多种加载策略,如按需加载(on-demand loading)、并行加载(parallel loading)和延迟加载(deferred loading)。这些策略可以根据网页的具体需求进行选择,以实现最佳性能。 3....

    iframe 异步加载技术及性能分析

    它的主要优点是能够与主页面并行加载,不阻塞主页面的渲染。然而,`iframe`的使用并非没有代价。正如Steve Souders在他的博客中提到的,`iframe`可能会导致以下问题: 1. **阻塞主页面的`onload`事件**:当`iframe`...

    harmonyos2-loader:使用iframe的资源加载器

    使用非阻塞行为并行加载资源 避免延迟load和DOMContentLoaded事件 如果需要,即使在load事件之后也保留脚本执行顺序 基于可重用源代码(工厂字符串)构建持久模块化系统 目前,一个小的loadJSON.js独立助手显示了大...

    Node.js-zanePerfor一款完整高性能高可用的前端性能监控系统

    Node.js是基于Chrome V8引擎的JavaScript运行环境,以其非阻塞I/O模型和事件驱动特性在服务器端编程领域展现出高效性能。ZanePerfor利用Node.js的异步处理能力,能够轻松处理大量并发请求,实现高性能监控。 **二、...

    JavaScript多线程编程简介.txt

    2. **多线程**:在计算机程序设计中,多线程是指在一个程序中可以同时运行多个线程,每个线程都可以独立执行不同的任务或同一任务的不同部分,从而实现并行计算,提高程序的执行效率。 #### 四、JavaScript中的多...

Global site tag (gtag.js) - Google Analytics