设为首页 加入收藏

TOP

高性能JavaScript 加载和执行
2015-08-31 21:24:32 来源: 作者: 【 】 浏览:36
Tags:高性能 JavaScript 加载 执行

  脚本位置:推荐将所有的<script>标签尽可能放到标签的底部,也就是之前,这样就能在执行js代码之前将用户界面呈现出来,改善用户体验。


  组织脚本:由于每个<script>标签初始下载时都会阻塞页面渲染,所以减少页面包含的<script>标签数量有助于改善这一情况。通常一个大型网站或者网络应用需要依赖数个java script文件,你可以把多个文件合并成一个,这样只需要一个<script>标签,就可以减少性能消耗,实质是减少了http请求。


  无阻塞的脚本:defer、动态脚本元素、XMLHttpRequest脚本注入(和动态脚本元素技术相比的优点是你可以下载java script代码但不立即执行,但是因为同源策略所以有很大的局限性)、LazyLoad类库


  接下来就是labjs的时间了,labjs是一个js文件加载器,而requirejs和seajs则是模块加载器,模块加载器一般可以降级为文件加载器使用。labjs通过优雅的语法(script和wait 链式)实现了这两大特性,核心是性能优化,可以管理文件依赖,并且“异步”执行。下面通过具体的例子来简单讲讲这两大api的用法。


  如果你只需实现动态脚本元素技术那样的多个脚本并发“异步”执行,那实在太简单不过了:


  当然你也可以用数组或者对象的方式传参,详细可以参考文档,我也会在下一篇中详细介绍labjs的常用api。


  如果说加载完两个文件(或者多个),你需要一个回调,这时候就要用到wait了:


  如何管理文件依赖?也很简单:


  script4依赖script1、script2和script3,通过以上代码依赖文件能够异步并行执行,而等它们三个文件执行完后执行script4,效率大大提升。需要特别注意的是,script中只能包含.js结尾的文件(或者对象、数组),而不能是一个匿名的js函数,如果是则会立即执行。


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇JavaScript文件加载器LABjs API详.. 下一篇不得不说的JavaScript异步加载

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: