Javascript 加载性能优化

2019-09-09 郑州网站建设  

浏览器对javascript的处理主要有2部分:download和执行

download在有些浏览器中是并行的,有些浏览器中是串行的,如IE8、Firefox3、Chrome2都是串行download的

执行在所有浏览器中默认都是阻塞的,当js在执行时不会进行html解析等其它操作

阻塞特性:

javascript有个阻塞特性,当浏览器执行javascript代码时,不能同时做其它任何事情。无论当前javascript代码是内嵌还是在外部链接文件中,页面的download和渲染都必须停下来等待脚本执行完成。浏览器在download和执行脚本是进出现阻塞的原因在于,脚本可能会改变页面或javascript的命名空间,它们对后面页面内容造成影响。

一、脚本位置

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

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

由于脚本的阻塞特性,页面会在3个javascript文件全部download执行完成后,页面才会继续渲染,把脚本放在页面顶部会导致明显延迟,通常表现为显示空白页,用户无法浏览内容,也无法与页面交互。

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

由于脚本会阻塞页面其它资源的download,因此推荐将javasrcipt尽量放到body标签的底部,以减少对整个页面download的影响。

二、组织脚本

由于<script>标签在download时会阻塞页面的渲染,所以减少<script>标签数量有助于改善这一情况。建议将多个javascript文件合并为一个,这样可以减少性能的消耗。同时也可以减少请求的数量。

参考:

三、无阻塞脚本 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>

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

3、XMLHttpRequest 脚本注入

此技术会先创建一个XHR对象,然后用它downloadjavascript文件,最后创建动态的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>

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

四、推荐的无阻塞加载方式 1、YUI3的方式 2、LazyLoad(1.5k)

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1576.html转载请标明出处,谢谢合作!
标签:
  • 浏览器
  • javascript
  • 特性
  • 阻塞
  • javasc