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设计模式 Interpreter(解释器模式)
Jun 26 PHP
PHP 时间日期操作实战
Aug 26 PHP
php 多关键字 高亮显示实现代码
Apr 23 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
Jun 27 PHP
PHP PDO fetch 模式各种参数的输出结果一览
Jan 07 PHP
php插入排序法实现数组排序实例
Feb 16 PHP
php发送html格式文本邮件的方法
Jun 10 PHP
yii2中使用Active Record模式的方法
Jan 09 PHP
Yii2中如何使用modal弹窗(基本使用)
May 30 PHP
Laravel5框架添加自定义辅助函数的方法
Aug 01 PHP
Yii框架布局文件的动态切换操作示例
Nov 11 PHP
PHP Pipeline 实现中间件的示例代码
Apr 26 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分页时出现的Fatal error的解决方法
2011/04/18 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
js实现select下拉框选择
2020/01/11 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
python生成验证码图片代码分享
2016/01/28 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
对python调用RPC接口的实例详解
2019/01/03 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python3实现二叉树的最大深度
2019/09/30 Python
python的json包位置及用法总结
2020/06/21 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
护理专业个人求职简历的自我评价
2013/10/13 职场文书
大学生毕业的自我鉴定
2013/11/13 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
公司保密管理制度
2015/08/04 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
go goth封装第三方认证库示例详解
2022/08/14 Golang