动态加载js的问题

(1)严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。

  (2)性能问题。浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个<script>标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。

为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。

  function loadScript(url){

    var script = document.createElement("script");

    script.type = "text/javascript";

    script.src = url;

    document.body.appendChild(script);

  }

这样做的原理是,浏览器即时创造出一个<script>标签,然后"异步"读取Javascript文件。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。

时间: 2024-10-01 06:57:52

动态加载js的问题的相关文章

动态加载JS

res/js/modules/s01.js alert("动态加载JS成功!");  形式1: <script src="layui-v1.0.9_rls/layui.js"></script> <script> layui.use("res/js/modules/s01"); </script> 形式2: <script src="layui-v1.0.9_rls/layui.js

JavaScript 之 动态加载JS代码或JS文件

2.动态加载JS文件 <script type="text/javascript"> function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if(typeof(callback) != "undefined"){     if (scri

为了提高性能,如何动态加载JS文件

超级表格是一款多人协作的在线表格,程序相当复杂,用到十几个JS文件.但是有些文件是在打开某些类型的表格时才需要加载. 例如,只有当打开甘特图表格时,才需要加载gantetu.js文件. 那么问题来了,为了减少js文件数量和请求,如何在需要时自动加载js文件呢? 办法如下. //动态加载js文件function mcss_importJS(js){ var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= doc

关于动态加载js

已知一个需要动态加载的js的文件路径数组,动态加载数组里面所有的js文件. 加载分两种情况: 1. 并行加载,不管js的执行顺序. 2. 串行加载,即一个一个加载,上一个加载完再加载下一个,直到最后. 动态加载js一般都是动态创建一个script, 解决第一种情况: function loadExternalFile(src,parentElement,tagName){ var elem = document.createElement(tagName); if(tagName==='link

jquery动态加载js/css文件方法

先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); } 动态调用方法 HTML代码 代码如下 复制代码 <script type="

[转]动态加载JS脚本

动态加载JS脚本 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script> 2.动态改变已有script的src属性 <script src='' id="s1"></script&

jquery getScript动态加载JS方法改进详解[转载]

转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来. 但是自己在使用过程中却发现了一些不尽如意的地方. 每次需要执行该功能的时候都会去请求一次这个js,这样不是在帮倒忙嘛

动态加载JS代码

到处查资料研究js动态脚本的加载,找到以下7种方法,总有一种适合你! 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){ alert("成功加载"); } 后面的html文件都创建在同一个目录下. 方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如下: <html> <

jquery如何动态加载js文件

jquery如何动态加载js文件:本章节和大家分享一下几种动态加载js文件的方法,希望能够给需要的朋友带来帮助.方法一: $.getscript("test.js"); 方法二: function loadjs(file) { var head = $('head').remove('#loadscript'); $("<scri"+"pt>"+"</scr"+"ipt>").att

动态加载js css 插件

简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两个前端模块加载器为require.js与sea.js,这两款模块加载器都不错.但是呢,有时候我仅仅需要的只是动态加载一个js,不需要把代码模块化,那我们只能自己手写一个加载函数. 简单的加载js /** * HTML动态加载js * @path {String} src地址必须带有后缀名.js *