js脚本的加载与执行


1、延迟脚本(defer属性) 
带有defer属性的script标签,可以放置在文档的任何位置,在页面解析到该标签时,会开始下载该脚本,但是不会立即执行,直到dom加载完成(onload事件触发前执行)。并且defer属性的script叫脚本的下载,不会阻塞其他进程,这类文件可以和页面中的其他资源并行下载。 
注:defer属性只有IE和FF3.5+支持

2、 动态添加脚本 
通过动态创建script标签引入外部脚本,加载完后立即执行。 
这种技术的特点:无论何时启动下载,文件的下载和执行不会阻塞页面其他进程。(把新建的脚本放在head里面比body要好,以防body还未加载完成) 
但是当有其他脚本依赖于该动态引进的脚本时,必须保证该脚本下载完毕并且准备就绪。FF、chrome等通过script的onload事件监听,而IE通过触发readystatechange事件来监听。 
FF、Chrome

script.onload=function (){
//脚本加载完毕,可以执行依赖该脚本的操作
};

IE浏览器中:

script.onreadystatechange=function (){
if(script.readyState=='loaded' || script.readyState=='complete'){
//脚本加载完毕
}
};

综上,一个通用的方法:

function loadscript(url,callback){
var script=document.createElement('script');
script.src=url;
if(script.onload){
script.onload=function (){
//脚本加载完毕,可以执行依赖该脚本的操作
callback();
};
}else{ //IE
script.onreadystatechange=function (){
if(script.readyState=='loaded' || script.readyState=='complete'){
callback(); //脚本加载完毕
}
};
}
document.getElementsByTagName('head')[0].appendChild(script);
}

多个脚本有依赖关系时,可以

loadscript('f1.js',function (){
loadscript('f2.js',function(){ });
});

3、XMLHttpRequest脚本注入

var xhr = new XMLHttpRequest();
xhr.open("get", "file1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
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);

优点:所有主流浏览器都支持 
缺点:请求的js脚本必须和页面处于相同的域(文件无法从CDN下载)。大型的web应用一般不会采用该方法。

4、document.write Script Tag 

使用document.write把HTML标签script写入页面。 
缺点是只有在IE中是并行加载脚本的。 
代码如下:

document.write("<script type='text/javascript' src='test.js'><\/script>");

无阻赛的脚本(js脚本延迟方法)的更多相关文章

  1. 【XP-IE8】XP系统的IE8无法正常访问图片,按钮无反应,不执行JS脚本代码

    环境: Windows XP ,自带的是IE6,另外安装的 IE8 . 状况: 使用IE8浏览内网网站,点击登录按钮,没有反应.滚动图片新闻不显示.但使用Chrome浏览器,一切正常,说明是IE8某处 ...

  2. 关于Js脚本的延迟执行

      关于标签,我们有一般会放在两个地方,一个是在标签的内部,另一个是放在前面.这一次我们着重讲解一下放在标签内部.在我们用Js操作DOM元素时,如果不延时执行,DOM元素其实是根本还没有被渲染出来的. ...

  3. ASP.NET UpdatePanel实现点击按钮无刷新且执行js脚本

    [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3770779.html]  *.aspx: <asp:ScriptManager ID=& ...

  4. 原生 JS 中 延迟脚本和异步脚本

    一.延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性.属性的用途是表民脚本在执行时不会影响页面的构造. 脚本会被延迟到页面加载完毕的时候,执行.也就是当 ...

  5. Octopus系列之如何让前台的js脚本变得灵活重用

    Octopus系列如何让前台的js脚本变得灵活,重用 方式1:ajax方式 方式2:form表单方式 面向对象的脚本封装 jQuery的封装 做Web开发的少不了前台Ajax的使用, 返回true:f ...

  6. 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  7. 【转】第5篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  8. unity中js脚本与c#脚本互相调用

    unity中js脚本与c#脚本互相调用   test1.js function OnGUI() { if(GUI.Button(Rect(25,25,100,30),"JS Call CS& ...

  9. JS脚本加载与执行对性能的影响

    高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...

随机推荐

  1. 理解及操作环境变量(基于Mac操作)

    通过本文,简单的了解下环境变量及其操作,与便于遇到相关问题时能够准确快捷的解决. 什么是环境变量 An environment variable is a dynamic-named value th ...

  2. hadoop 基本命令

    hdfs相关 1.查看HDFS文件目录 hadoop fs -ls / mapreduce相关 1.查看mapred job mapred job -list hadoop job -list Use ...

  3. “一切都是消息”--MSF(消息服务框架)之【请求-响应】模式

    在前一篇, “一切都是消息”--MSF(消息服务框架)入门简介, 我们介绍了MSF基于异步通信,支持请求-响应通信模式和发布-订阅通信模式,并且介绍了如何获取MSF.今天,我们来看看如何使用MSF来做 ...

  4. linux下c语言的多线程编程

    我们在写linux的服务的时候,经常会用到linux的多线程技术以提高程序性能 多线程的一些小知识: 一个应用程序可以启动若干个线程. 线程(Lightweight Process,LWP),是程序执 ...

  5. python识别验证码——一般的数字加字母验证码识别

    1.验证码的识别是有针对性的,不同的系统.应用的验证码区别有大有小,只要处理好图片,利用好pytesseract,一般的验证码都可以识别 2.我在识别验证码的路上走了很多弯路,重点应该放在怎么把图片处 ...

  6. 关于Android SDK Manager无法获取更新列表的正确设置

    1.以"管理员身份运行"SDK Manager. 2.Android SDK Manager"=>"Tools"=>"Optio ...

  7. jquery各种事件使用方法总结(from:天宇之游)

    ps:本博客转自博主  天宇之游 ,地址:http://www.cnblogs.com/cwp-bg/  ,再次感谢天宇之游.jquery事件使用方法总结 一.鼠标事件1. click():鼠标单击事 ...

  8. LVS+Keepalived高可用负载均衡集群架构实验-01

    一.为什么要使用负载均衡技术? 1.系统高可用性 2.  系统可扩展性 3.  负载均衡能力 LVS+keepalived能很好的实现以上的要求,LVS提供负载均衡,keepalived提供健康检查, ...

  9. 安装阿里Java代码规约插件

    概述 2017年10月14日杭州云栖大会,Java代码规约扫描插件全球首发仪式正式启动,规范正式以插件形式公开走向业界,引领Java语言的规范之路.目前,插件已在云效公有云产品中集成,立即体验!(云效 ...

  10. Docker中搭建zookeeper集群

    1.获取官方镜像 从dockerhub获取官方的zookeeper镜像: docker pull zookeeper 2.了解镜像内容 拉取完镜像后,通过 docker inspect zookeep ...