javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行。在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题。
当浏览器遇到(内嵌)<script>标签时,当前浏览器无从获知javaScript是否会修改页面内容。因此,这时浏览器会停止处理页面,先执行javaScript代码,然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加在javaScript的过程中(即外链 javaScript),浏览器必须先花时间下载外链文件中的代码,然后解析并执行它。在这个过程中,页面渲染和用户交互完全被阻塞了。
也就是说:每当浏览器解析到<script>标签(无论内嵌还是外链)时,浏览器会(一根筋地)优先下载、解析并执行该标签中的javaScript代码,而阻塞了其后所有页面内容的下载和渲染。
方式一:惯例的做法
最传统的方式是在head标签内插入<script>标签。
然而这种常规的做法却隐藏着严重的性能问题。根据上述对<script>标签特性的描述,我们知道,在该示例中,当浏览器解析到<script>标签时,浏览器会停止解析其后的内容,而优先下载脚本文件,并执行其中的代码,这意味着,其后的test.css样式文件和<body>标签都无法被加载,由于<body>标签无法被加载,那么页面自然就无法渲染了。因此在该javaScript代码完全执行完之前,页面都是一片空白。
<script type="text/javaScript" src="example.js"></script>
方式二:经典的做法
既然<script>标签会阻塞其后内容的加载,那么将<script>标签放到所有页面内容之后不就可以避免这种糟糕的状况了吗? 将所有的<script>标签尽可能地放到<body>标签底部,以尽量避免对页面其余部分下载的影响。
在IE8+浏览器上已经实现了脚本并行下载,但在某些浏览器中(即使脚本文件放到了<body>标签底部),页面中脚本仍是一个接着一个加载的。所以我们需要下一个方法,即:动态加载脚本。
方式三:动态脚本
通过文档对象模型(DOM),我们可以几乎可以页面任意地方创建。
<script type='text/javascript'> var script = document.createElement('script'); script.type = 'text/javaScript'; script.src = 'file1.js'; document.getElementsByTagName('head')[0].appendChild(script); </script>
上述代码动态创建了一个外链file1的<script>标签,并将其添加到<head>标签内。这种技术的重点在于:
无论在何时启动下载,文件的下载和执行过程不会阻塞页面其他进程(包括脚本加载)。
然而这种方法也是有缺陷的。这种方法加载的脚本会在下载完成后立即执行,那么意味着多个脚本之间的运行顺序是无法保证的(除了Firefox和Opera)。当某个脚本对另一个脚本有依赖关系时,就很可能发生错误了。比如,写一个jQuery代码,需要引入jQuery库,然而你写的jQuery代码文件很可能会先完成下载并立即执行,这时浏览器会报错——‘jQuery未定义'之类的,因为此时jQuery库还未下载完成。于是做出以下改进:
<script type='text/javascript'> function loadScript(url, callback) { var script = document.createElement('script'); script.type = "text/javaScript"; // IE和opera支持onreadystatechange // safari、chrome、opera支持onload if (script.readyState) {//IE script.onreadystatechange = function() { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else {//其他浏览器 script.onload = function() { callback(); }; } script.src = url; document.getElementsByTagName('head')[0].appendChild(script); } </script>
上述代码改进的地方就是增加了一个回调函数,该函数会在相应脚本文件加载完成后被调用。这样便可以实现顺序加载了,写法如下(假设file2依赖file1,file1和file3相互独立):
loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){});
file2会在file1加载完后才开始加载,保证了在file2执行前file1已经准备妥当。而file1和file3是并行下载的,互不影响。 虽然loadScript函数已经足够好,但还是有些不尽人意的地方——通过分析这段代码,我们知道,loadScript函数中的顺序加载是以脚本的阻塞加载来实现的(正如上述红字部分指出的那样)。而我们真正想实现的是——脚本同步下载并按相应顺序执行,即并行加载并顺序执行。
方式四:LABjs
LABjs库能帮我们真正地实现“并行加载与顺序执行”,推荐写法如下:
<script src="LAB.js"></script> <script type="text/javaScript"> $LAB .script("script1.js").wait() .script("script2-a.js") .script("script2-b.js") .wait(function(){ initScript1(); initScript2(); }) .script("script3.js") .wait(function(){ initScript3(); }); </script>
方式五:requireJS
<script src="require.js"></script> <script type="text/javaScript"> require([ "script1.js", "script2-a.js", "script2-b.js", "script3.js" ], function(){ initScript1(); initScript2(); initScript3(); } ); </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
问题内容: 我想从CDN加载脚本,然后在React中执行该脚本公开的功能: 该脚本有时需要花费一些时间(通常是第一次)加载,并且何时调用“ foo”不可用,并且出现如下错误: TypeError:无法读取未定义的属性“ render” 如何确保脚本成功加载后调用? 问题答案: 根据React Component Specs和Lifecycle的说法,我认为在componentWillMount()
本文向大家介绍动态加载JavaScript文件的3种方式,包括了动态加载JavaScript文件的3种方式的使用技巧和注意事项,需要的朋友参考一下 以下是遇到的几种动态加载JavaScript文件的方式,持续更新中。。。 一、使用document.write/writeln()方式 该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方式会导致整个页面重绘。 实现方式: 需要注意的是特殊
问题内容: 我有一个html页面,我在其中通过如下所示的javascript动态附加html 我想调用一个js函数,例如,loadedContent(); 一旦以上脚本添加了动态html。 有人可以帮我怎么做吗? 问题答案: 您可以在不使用head.js javascript的情况下实现这一目标。
本文向大家介绍动态加载JavaScript文件的两种方法,包括了动态加载JavaScript文件的两种方法的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码。第二种是,动静创建一个script标签
本文向大家介绍java用类加载器的5种方式读取.properties文件,包括了java用类加载器的5种方式读取.properties文件的使用技巧和注意事项,需要的朋友参考一下 用类加载器的5中形式读取.properties文件(这个.properties文件一般放在src的下面) 用类加载器进行读取:这里采取先向大家讲读取类加载器的几种方法;然后写一个例子把几种方法融进去,让大家直观感受。最后
本文向大家介绍JavaScript数组的5种迭代方法,包括了JavaScript数组的5种迭代方法的使用技巧和注意事项,需要的朋友参考一下 ES5为数组定义了5个迭代方法。每种方法都接收两个参数。要在每一项上运行的函数和(可选的)运行该函数的作用域对象--影响this的值。//其中(可选的)这个参数暂时未遇到过。 其中,函数都接收三个参数(数组中的每一项、每一项的索引值、数组对象本身)。 下面是5