1.浏览器对script引用的js文件分两步,下载,下载完毕后马上执行;这两步都会阻塞浏览器继续解析。

2.加入defer属性,<script defer type="text/javascript" src="some.js" ></script>,浏览器会异步加载js,待DOMContentLoaded后顺序执行js。

3.预加载js,自定义执行时机。

<script language="javascript" type="text/javascript">
    function cachejs(script_filename){
        var cache = document.createElement('object');
        cache.data = script_filename;
        cache.id = "coolshell_script_cache_id";
        cache.width = 0;
        cache.height = 0;
        document.body.appendChild(cache);
    }
 
    function loadjs(script_filename) {
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', script_filename);
        script.setAttribute('id', 'coolshell_script_id');
 
        script_id = document.getElementById('coolshell_script_id');
        if(script_id){
            document.getElementsByTagName('head')[0].removeChild(script_id);
        }
        document.getElementsByTagName('head')[0].appendChild(script);
    }
 
    function LoadJS(){
        var script = './alert.js';
        loadjs(script);
    }
 
</script>
 
 
...
 
<p style="cursor: pointer" onclick="LoadJS()">Click to load alert.js </p>
 
...
...
<script>
    cachejs('./alert.js');
</script>

4.seajs和requirejs

seajs是执行到引用文件代码,再去引用下载,慢。

requirejs也是如此。

希望有什么选项能给个选择,指定哪些文件要预加载,哪些文件是需要时才去加载。

参考链接:

http://coolshell.cn/articles/9749.html

http://www.cnblogs.com/coco1s/p/4010310.html

http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html

js文件的装载和执行的更多相关文章

  1. 引入js文件,ajax不执行操作

    今天写了一个页面,在页面中写的可以执行,但是放到js里面,引入到页面,ajax却不执行了,仔细一看原来是路径的原因 ${pageContext.request.contextPath} 为获取项目名称 ...

  2. AJAX载入外部JS文件到页面并让其执行的方法(附源码)

    一. 向HTML页面中动态添加JS文件(从外部载入)并让其执行的两种方法 1.只适用于IE浏览器的简单方法: 先在文档中放置一张JS"空床"并添加ID:<script id= ...

  3. js文件引用方式及其同步执行与异步执行

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp74   任何以appendChild(scriptNode) 的方式引入 ...

  4. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  5. 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

    这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...

  6. Jmeter_前端RSA加密下的登陆模拟_引用js文件实现

    版权声明:本文为博主原创文章,未经博主允许不得转载. 在一次项目实战中,前端登录使用了RSA加密,使用LoadRunner压测的第一步,就是模拟用户登录,可惜loadRunner11并不能录制前端的加 ...

  7. HTML引入JS文件

    浏览器解析HTML文件时,先判断script 标签中是否有src属性,有则执行指定路径下的JS文件,没有则执行script标签中的js脚本. 1. HTML内嵌JS head里面添加script元素, ...

  8. Jmeter_前端RSA加密下的登陆模拟_引用js文件实现(转)

    在一次项目实战中,前端登录使用了RSA加密,使用LoadRunner压测的第一步,就是模拟用户登录,可惜loadRunner11并不能录制前端的加密过程,并且安装的LR是基于C语言版,网络上关于RSA ...

  9. 解决eclipse js文件报错(转)

    在我们将项目导入Eclipse后,配置好各种编译条件.加载好jar包.配置好tomcat后发现项目还是报错,(前提是项目本身并没有错误,而是我们在初次导入到Eclipse中的时候报错),那是什么原因引 ...

随机推荐

  1. linux设备驱动归纳总结(五):3.操作硬件——IO静态映射【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-83299.html linux设备驱动归纳总结(五):3.操作硬件——IO静态映射 xxxxxxxxx ...

  2. mybatis n+1问题

    mybatis的一对多或者多对多的时候,2中方式解决,一种是嵌套select,但是会有n+1问题,不推荐:另外一种是使用一条sql,在该sql里面使用子查询的方式来完成.比如 select * fro ...

  3. ecshop底部版权修改和组成分析

    我们在ecshop二次开发和ecshop使用过程中,往往需要对ecshop底部进行处理和修改.比如ecshop底部版权问题,ecshop底部程序结构问题.也有很多朋友咨询ecshop底部的一些修改问题 ...

  4. YTU 2297: KMP模式匹配 三(串)

    2297: KMP模式匹配 三(串) 时间限制: 1 Sec  内存限制: 128 MB 提交: 25  解决: 16 [提交][状态][讨论版] [Edit] [TestData] 题目描述 输入一 ...

  5. 2015-09-17 001 存储过程数据操作类 H_data_Helper

    using System;using System.Data;using System.Configuration;using System.Linq;using System.Web;using S ...

  6. 测试-Animator的“当前剪辑CurrentAnimatorStateInfo”

    左边是Transport到Idle,右边是完全到Idle 当进入过渡时,事实上Transport状态并未结束,通过下面打印出来的hash可以看出还是Transport的状态 过渡结束才正式变为Idle ...

  7. C#'~'按位取反运算符的使用

    按位取反运算符是按照二进制的每一位取反,比如byte类型,~0的结果就是255. 该功能可以在mask中做一些反转操作 如下代码,a存放了2,4,8三个值.用按位取反'~'运算符反转 打印结果是 fa ...

  8. Python学习笔记-Day3-python内置函数

    python内置函数 1.abs    求绝对值 2.all 判断迭代器中的所有数据是否都为true 如果可迭代的数据的所有数据都为true或可迭代的数据为空,返回True.否则返回False 3.a ...

  9. linux里用cmake安装的软件要怎么卸载?

    找到make install之后产生的这个文件install_manifest.txt 这里在build文件里面有一个 install_manifest.txt,在里面有安装的所有东西的路径,删除它们 ...

  10. CssSpritesGenerator使用

    最近一直在看CSS 的东西,在优化之路是哪个继续前进. 什么是css sprites css sprites直译过来就是CSS精灵,但是这种翻译显然是不够的,其实就是通过将多个图片融合到一副图里面,然 ...