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 正则 过滤html 的超链接
Jun 02 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
Sep 12 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
Dec 11 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
Feb 01 PHP
通过curl模拟post和get方式提交的表单类
Apr 23 PHP
PHP图片等比例缩放生成缩略图函数分享
Jun 10 PHP
PHP实现自动登入google play下载app report的方法
Sep 23 PHP
Symfony数据校验方法实例分析
Jan 26 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
Apr 27 PHP
php实现随机显示图片方法汇总
May 21 PHP
php生成4位数字验证码的实现代码
Nov 23 PHP
功能强大的PHP POST提交数据类
Jul 15 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
php抓即时股票信息
2006/10/09 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
EasyUI中的tree用法介绍
2011/11/01 Javascript
js加强的经典分页实例
2013/03/15 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
chrome调试javascript详解
2015/10/21 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python微信好友数据分析详解
2018/11/19 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
Python小白垃圾回收机制入门
2020/06/09 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
android面试问题与答案
2016/12/27 面试题
学校节能减排方案
2014/06/13 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫