async和DOM Script文件加载比较


Posted in PHP onJuly 20, 2014

目前我用demo.js作为执行文件操作.代码:

var now = function() { return +(new Date()); }
var t_s = now();
while(now() - t_s < 2000) { }

用sleep.php作为请求文件操作。代码:

<?php
  sleep(3);
  echo 'var bb';
?>

1. 一般script标签加载

<script src="demo.js"></script>
<script src="sleep.php"></script>

在浏览器加载情况: 图1-1. 下载阻塞DomReady 图1-2. 执行阻塞DomReady

async和DOM Script文件加载比较
图1-1. 下载阻塞DomReady

async和DOM Script文件加载比较
图1-2. 执行阻塞DomReady

2. async属性

async是html5中新增的属性,它的作用是能够异步下载脚本文件,不阻塞DOMReady。

每一个async属性的脚本都在它下载结束之后立刻执行,同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况

支持async浏览器: Firefox 3.6+, IE 10+, Chrome 2+, Safari 5+, iOS 5+, Android 3+

<script src="demo.js" async></script>
<script src="sleep.php" async></script>

在浏览器中加载的情况:

async和DOM Script文件加载比较
图2-1 异步下载 不阻塞DomReady 阻塞load事件

async和DOM Script文件加载比较
图2-2 执行阻塞load事件

async和DOM Script文件加载比较
图2-3 IE9不支持async属性下载阻塞DomReady

3. DOM Script动态加载

文档对象模型(DOM)允许您使用 JavaScript 动态创建 HTML 的几乎全部文档内容。 script元素与页面其他元素一样,可以非常容易地通过标准 DOM 函数创建:

var loadScript = function(url) {
 var s = document.createElement('script');
 s.type = 'text/javascript';
 s.async = 'true';
 s.src = url;
 document.getElementsByTagName('head')[0].appendChild(s); 
}
// 加载js文件脚本
loadScript('sleep.php');
loadScript('demo.js');

在浏览器中加载的情况:

async和DOM Script文件加载比较
图3-1 下载阻塞load事件

async和DOM Script文件加载比较
图3-2 执行阻塞load事件

async和DOM Script文件加载比较
图3-3 IE9不阻塞load事件

小结

async和script动态加载在现代浏览器中加载的情况是一致的。前者使用简单,后在兼容性方面更好。 异步加载文件还有很多方法,ajax(会受到同源限制)、iFrame、img…

PHP 相关文章推荐
PHP 采集程序 常用函数
Dec 18 PHP
一贴学会PHP 新手入门教程
Aug 03 PHP
PHP 编程安全性小结
Jan 08 PHP
Codeigniter注册登录代码示例
Jun 12 PHP
PHP中通过trigger_error触发PHP错误示例
Jun 23 PHP
php实现html标签闭合检测与修复方法
Jul 09 PHP
php将数组存储为文本文件方法汇总
Oct 28 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
Jun 30 PHP
PHP二分查找算法示例【递归与非递归方法】
Sep 29 PHP
PHP读MYSQL中文乱码的快速解决方法
Oct 01 PHP
thinkphp分页集成实例
Jul 24 PHP
laravel框架语言包拓展实现方法分析
Nov 22 PHP
Eclipse的PHP插件PHPEclipse安装和使用
Jul 20 #PHP
php多任务程序实例解析
Jul 19 #PHP
php实现斐波那契数列的简单写法
Jul 19 #PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
Jul 19 #PHP
完善CodeIgniter在IDE中代码提示功能的方法
Jul 19 #PHP
CodeIgniter中实现泛域名解析
Jul 19 #PHP
php实现建立多层级目录的方法
Jul 19 #PHP
You might like
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python Logging 日志记录入门学习
2018/06/02 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python 两种方法删除空文件夹
2020/09/29 Python
python定义具名元组实例操作
2021/02/28 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
咖啡厅创业计划书范本
2014/01/22 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS