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的历史和优缺点
Oct 09 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
May 03 PHP
PHP 转义使用详解
Jul 15 PHP
php检测网页是否被百度收录的函数代码
Oct 09 PHP
php实现统计网站在线人数的方法
May 12 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
Mar 07 PHP
php实现文章置顶功能的方法
Oct 20 PHP
详解Yii2高级版引入bootstrap.js的一个办法
Mar 21 PHP
一个实用的php验证码类
Jul 06 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
Sep 05 PHP
phpStorm2020 注册码
Sep 17 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
Mar 09 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php使用curl访问https示例分享
2014/01/17 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
使用PHP编写发红包程序
2015/07/22 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
C语言笔试题回忆
2015/04/02 面试题
学校文明单位申报材料
2014/05/06 职场文书
1000字打架检讨书
2014/11/03 职场文书
2014年评职称工作总结
2014/11/20 职场文书
工作检讨书大全
2015/01/26 职场文书
鲁冰花观后感
2015/06/10 职场文书
导游词之麻姑仙境
2019/11/18 职场文书