js顺序加载与并行加载

  前端优化过程中常提到js的加载方式,下面说下几种常用的加载方式:

  1:head标签内插入<script>标签

  <script type="text/javaScript" src="test.js"></script>

  这是最常见的方法,但是这个方法有个最大的问题,就是当浏览器解析到<script>标签时,浏览器会停止解析其后的内容,而优先下载脚本文件,并执行其中的代码,是个阻塞的过程,这意味着,其后的test.css样式文件和<body>标签都无法被加载,由于<body>标签和样式等资源无法被加载,那么页面自然就无法渲染了,因此常常页面打开会出现页面内容空白或者样式丢失问题,这都是在头部引入了过多的js文件阻塞加载造成的,虽然高版本的浏览器已经可以对脚本并行加载,可是还有些浏览器脚本依旧是一个接一个加载的,因此优化的话可以把js放在body标签最底部,这样页面可以先快速显示出来,提高了体验友好度。

  2:创建动态脚本

var script=document.createElement(‘script‘);
script.type=‘text/javaScript‘;
script.src=‘test.js‘;
document.getElementsByTagName(‘head‘)[0].appendChild(script);

  上述代码动态创建了一个<script>标签,并添加在<head>标签内,无论在何时启动下载,文件的下载和执行过程不会阻塞页面其他内容的加载执行。此方法比较常见,我们常用的一些第三方库中,很多都采用这种方式。然而这种方式有个最大的问题就是无法保证多个脚本之间的加载顺序,比如我写了一个代码,这个代码要依赖于jQuery,但是如果我这个文件优先于jQuery脚本先下载完并立即执行,这时浏览器会报错——‘jQuery未定义’之类的,因为此时jQuery库还未下载完成。

  3:LABjs

  可以帮我们完成脚本的并行加载和按顺序执行,这也是我们公司目前用的主要方式,想要看详细的用法去官网看看。

  常见用法:

  1,

$LAB.script("script1.js")
    .script("script2.js")
    .script("script3.js")
    .wait(function(){// 等待所有script加载完再执行这个代码块
        script1Func();
        script2Func();
        script3Func();
    });

  2,

$LAB.script("script1.js")
    .wait()    // 空的wait()只是确保script1在其他代码之前被执行
    .script("script2.js")    // script2 和 script3 依赖于 script1
    .script("script3.js")
    .wait()    // 但是script2 和 script3 并不互相依赖,可以并行下载
    .script("script4.js")    //script4 依赖于 script1, script2 及 script3
    .wait(function(){script4Func();});

  3,

$LAB.script("script1.js")    // script1, script2, and script3 之间没有依赖关系,
    .script("script2.js")    // 所以可以任意顺序执行
    .script("script3.js")
    .wait(function(){    // 如果需要,这里当然可以执行javascript函数
        alert("Scripts 1-3 are loaded!");
    })
    .script("script4.js")    // 依赖于 script1, script2 及 script3
    .wait(function(){script4Func();});

  上面实例中,前面三个脚本并行加载,任意顺序执行,如果有依赖并且脚本很多的话,没一个script函数后面接个wait就闲的代码很臃肿麻烦,所以labjs库提供了个参数可以确保下载完后顺序执行

$LAB.setOptions({AlwaysPreserveOrder:true})// 设置每个脚本之间等待
    .script("script1.js")// script1, script2, script3, script4 互相依赖
    .script("script2.js")// 并且并行下载后循序执行
    .script("script3.js")
    .script("script4.js")
    .wait(function(){
        script4Func();
    });

  这样写代码精炼了很多,推荐

  4,

$LAB.script(function(){
        // `_is_IE`的值ie为true ,非ie为false
        if(_is_IE){
            return"ie.js";    // 如果是ie则这个js会被加载
        }else{
            return null;    //如果不是ie这个代码就会被略过
        }
    })
    .script("script1.js")
  .wait();
时间: 2024-08-29 10:59:23

js顺序加载与并行加载的相关文章

js的并行加载与顺序执行

javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题. 当浏览器遇到(内嵌)<script>标签时,当前浏览器无从获知javaScript是否会修改页面内容.因此,这时浏览器会停止处理页面,先执行javaScript代码,然后再继续解析和渲染页面.同样的情况也发生在使用 src 属性加在javaScript的过程中(即外链 javaScript)

js的并行加载以及顺序执行

重新温习了下这段内容,发现各个浏览器的兼容性真的是搞大了头,处理起来很是麻烦. 现在现总结下并行加载多个js的方法: 1,对于动态createElement('script')的方式,对所有浏览器都是异步并行加载的.这里所说的并行不仅仅指的是 js并行加载,也包括js和其他资源比如图片,iframe的加载.但是此种方式在Firefox的2.0 3.0 3.1版本和opera 9.63 下是可以顺序执行的.但是由于Kyle的提议,现代浏览器都可以通过对动态创建的script元素设置属性async=

head.js让网站并行加载但顺序执行JS

http://headjs.com/ 并行加载JS,但是执行的时候却按顺序执行,提高网站速度 <script src="js/head.min.js"></script> <script type="text/javascript"> head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_valida

LABjs学习(一)之无阻塞动态并行加载脚本文件以及管理执行顺序

什么是LABjs LABjs是一个动态的脚本加载器,LABjs的定义特性是能够在浏览器允许的范围内以最快的速度并行加载所有JavaScript文件,但是如果文件之间存在依赖关系,则可以选择确保正确的执行顺序. 总计来说就是:动态并行加载脚本文件以及管理加载脚本文件的执行顺序 使用方法 $LAB对象替代了<script>标签,然后.script()方法表示加载Javascript文件,不带参数的.wait()方法表示立即运行刚才加载的Javascript文件,带参数的.wait()方法也是立即运

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了. <!DOCTYPE html> <html lang="en

OpenJDK类加载实现浅析#3:并行加载

今天来看下OpenJDK类加载中关于并行加载的一些代码.还是一样要分别看看类加载库跟虚拟机,因为二者在这方面仍然是需要配合完成的. 类加载库所做的工作 在JDK7之前,ClassLoader#loadClass方法是synchronized的, protected synchronized Class<?> loadClass(String name, boolean resolve) 也就是说,类加载的时候,直接是要锁住整个classloader的. 到了JDK7,这个地方终于做出了优化,直

[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏

前言 Load Mask(遮罩)效果,就是在页面还没有完全显示出来之前, 加上一个转装转的效果. 类似: 添加这样的效果有两个好处: 1. 在页面没完全show出来之前, 把后面的页面给遮罩起来, 防止进行一些非法的操作. 2. 如果页面show出来的时间比较长的话, 可以暂时吸引用户的注意力(也就是提高 User Experience). 在Extjs 中, Ext js 的使用方式有多种. 你有可能会发现为什么有的状况下load mask 不出现?  且听下面一一道来... JsonStor

easyui日期在未加载easyui-lang-zh_CN.js出现英文的情况下加载中文的方法

我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包,但是还是出现了英文.使得我们不得埋怨这框架咋这么不好用,其实我们仔细看看这个中文包就会发现里面很多都是重新修改了定义语言的参数.假如我们用jquery初始化加载方法$(function(){//这里是我们自定义的操作方法});这个方法里面的东西执行后发现更本没加载我们的中文下面是我写的datetimebox日期控件js代码: $(function () { function adddaytimes(

android应用因为加入js而导致webview一直在加载中的bug解决方案

日前在开发程序的时候发现,有一个应用的webview加载html5页面总是一直在加载中,加载很慢或干脆加载不出来, 但是在其它应用中却没有问题,能很快加载,找了一圈问题原因,脑袋都大了也没找到.今天听浏览器的大牛说可能是 js导致的,尝试在onpause里加入mWebView.pauseTimers(), onResume()里加入mWebView.resumeTimers(). 奇迹般的解决了,目前正在研究为什么.... @Override protected void onPause(){