欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

Javascript 加载性能优化

企业模板

javascript有个阻塞特质,当浏览器实行javascript代码时,不可以同时做其它什么事情。无论目前javascript代码是内嵌还是在外部链接文件中,页面的下载和渲染都需要停下来等待脚本实行完成。浏览器在下载和实行脚本是进出现阻塞是什么原因在于,脚本或许会改变页面或javascript的命名空间,它们对后面页面内容导致影响。

阻塞特质

浏览器对javascript的处置主要有2部分:下载和实行

下载在有的浏览器中是并行的,有的浏览器中是串行的,如IE8、Firefox3、Chrome2都是串行下载的 实行在所有浏览器中默认都是阻塞的,当js在实行时不会进行html分析等其它操作

阻塞特质:

1、脚本地方

ie8+、firefox 3.5+、safari4+、chrome2+都允许并行下载javascript文件,但在下载的过程中仍然会阻塞图片等其它资源的下载。

浏览器在碰到一个引入外部javascript文件的<script>标签时会停下所有工作来下载并分析实行它,在这个过程中,页面渲染和用户交互完全被阻塞了。例:

<html> <head> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="file3.js"></script> </body> </head> <body> <p>页面的内容。。。</p></body></html>

因为脚本的阻塞特质,页面会在3个javascript文件全部下载实行完成后,页面才会继续渲染,把脚本放在页面顶部会致使明显延迟,一般表现为显示空白页,用户没办法浏览内容,也没办法与页面交互。

参考:在服务端合并和压缩javascript和CSS文件

因为脚本会阻塞页面其它资源的下载,因此推荐将javasrcipt尽可能放到body标签的底部,以降低对整个页面下载的影响。

2、组织脚本

因为<script>标签在下载时会阻塞页面的渲染,所以降低<script>标签数目能够帮助改变这一状况。建议将多个javascript文件合并为一个,如此可以降低性能的消耗。同时也可以降低请求的数目。

3、无阻塞脚本

1、延迟脚本

使用方法示例:

HTML4 为<script>标签概念了一个defer 属性,它能使这段代码延迟实行,然而该属性只有IE4+支持,因此它不是一个理想的跨浏览器解决方法。声明了defer 属性的script会在DOM加载完成,window.onload 事件触发前被分析实行:

<html> <head> <title>script defer example</title> </body> </head> <body><script defer> alert('defer');</script><script> alert('script');</script><script> window.onload = function(){ alert('load'); }</script></body></html>

这段代码在支持defer属性的浏览器弹出顺序是:script、defer、load;不支持defer属性的浏览器弹出的顺序是defer、script、load。

2、动态脚本元素

<script type="text/javascript">function loadScript(url, callback) { var script = document.createElement('script') script.type = 'text/javascript'; if (script.readyState) { //for ie script.onreadystatechange = function() { if (script.readyState == 'loaded' || script.readyState == 'complete') { script.onreadystatechange = null; callback(); } }; } else { //other browser script.onload = function() { callback(); }; } script.src = url; document.getElementsByTagName('head')[0].appendChild(script);}</script>

loadscript函数使用方法

<script type="text/javascript"> //单个文件 loadScript('file1.js', function(){ alert('loaded!'); }); //多个文件 loadScript('file1.js', function(){ loadScript('file2.js',function(){ loadScript('file3.js', function(){ alert('all files loaded!'); }); }); });</script>

这种技术的重点在于:无论何时启动下载,文件的下载和实行过程不会阻塞页面其它进程,你甚至可以将代码放在页面的head地区而不影响页面的其它部分(下载该文件的http链接除外)。

3、XMLHttpRequest 脚本注入

此技术会先创建一个XHR对象,然后用它下载javascript文件,最后创建动态的script元素将代码注入到页面中。

<script type="text/javascript">var xhr = new XMLHttpRequest();xhr.open('get', 'file1.js', true);xhr.onreadystatechange = function() { if (xhr.status >= 200 && xhr.status <300 || xhr.status == 304) { var script = document.createElement('script'); script.type = 'text/javascript'; script.text = xhr.responseText; document.body.appendChild(script); }};xhr.send(null);</script>

这种办法优点是可以直接下载javascript代码但不立即实行。因为代码是在<script>标签以外返回的,因此下载后不会自动实行,这使得是可以把脚本推迟到你筹备好的时候。这种办法的局限性在于javascript文件需要与所请求的页面处于相同的域,这意味着javascript文件不可以从cdn下载,因此不合适大型网站或项目。

4、推荐的无阻塞加载方法

1、YUI3的方法

2、LazyLoad(1.5k)

Yahoo!Search工程师Ryan Grove创建的一个通用的延迟加载工具,是loadScript()函数的增强版。

<script type="text/javascript" src="lazyload-min.js"></script><script type="text/javascript"> LazyLoad.js('the-reset.js', function(){ Application.init(); });</script>

要下载多个javscript文件,仅需链式调用另一个$LAB.script()办法:

LazyLoad同样支持多个javascript文件,并能保证在所有浏览器中都可以按正确的顺序实行。要加载多个javscript文件,仅需给LazyLoad.js()y办法传入一个url数组:

<script type="text/javascript" src="lazyload-min.js"></script><script type="text/javascript"> LazyLoad.js(['first.js', 'the-reset.js'], function(){ Application.init(); });</script>

项目地址:https://github.com/rgrove/lazyload

3、LABjs(4.7k)

LABjs是Kyle Simpson受Steve Sounders的启发达成的无阻塞加载工具。使用方法示例:

<script type="text/javascript" src="lab.js"></script><script type="text/javascript"> $LAB.script('the-reset.js') .wait(function(){ Application.init(); });</script>

$LAB.script()办法用来概念需要下载的javascript文件,$LAB.wait()用来指定文件下载并实行完毕后所调用的函数。

<script type="text/javascript" src="lab.js"></script><script type="text/javascript"> $LAB.script('first.js') .script('the-reset.js') .wait(function(){ Application.init(); });</script>

LABjs允许用wait()办法来指定什么文件需要等待其它文件。上面的例子中first.js不可以保证会在the-reset.js的代码前实行,为了确保这一点,需要在第一个script()办法后调用wait():

LABjs独一无二的是它管理依靠关系的能力。一般来讲,连续的<script>标签意味着文件逐个下载并按顺序实行。

<script type="text/javascript" src="lab.js"></script><script type="text/javascript"> $LAB.script('first.js').wait() .script('the-reset.js') .wait(function(){ Application.init(); });</script>

项目地址:https://github.com/kejun/Do

项目地址:http://labjs.com/

4、SeaJS(7.5k)

SeaJS 是淘宝玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 javascript 模块。详细请参考:http://seajs.com/docs/

5、do 框架(3.5k)

Do是豆瓣网kejun开发的一个非常轻量的Javascript开发框架。现在do.min.js。它的核心功能是对模块进行组织和加载。加载采取并行异步队列的方案,并且可以控制实行机会。Do可以任意置换核心类库,默认是jQuery。

6、RequireJS(13.1k)

项目地址:http://requirejs.org/


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.nsxcb.cn 关注: 时间:2022-04-11 14:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/HTML/HTML5/20220411/13717.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧