async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面。
目前我用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
图1-1. 下载阻塞DomReady
图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>
在浏览器中加载的情况:
图2-1 异步下载 不阻塞DomReady 阻塞load事件
图2-2 执行阻塞load事件
图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');
在浏览器中加载的情况:
图3-1 下载阻塞load事件
图3-2 执行阻塞load事件
图3-3 IE9不阻塞load事件
小结
async和script动态加载在现代浏览器中加载的情况是一致的。前者使用简单,后在兼容性方面更好。
异步加载文件还有很多方法,ajax(会受到同源限制)、iFrame、img…
参考链接:
http://ie.microsoft.com/TestDrive/Performance/AsyncScripts/Default.html
http://ued.ctrip.com/blog/?p=3121
http://blog.jobbole.com/47304/
http://www.infoq.com/cn/articles/browser-resource-loading-optimization
JS文件加载:比较async和DOM Script的更多相关文章
-
js文件加载优化
在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. ...
-
前端设计中关于外部js文件加载的速度优化
在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
-
js文件加载太慢,JavaScript文件加载加速
原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: ...
-
【转】html、css、js文件加载顺序及执行情况
原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然 ...
-
html、css、js文件加载顺序及执行情况
HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...
-
js文件加载执行顺序
转自:http://blog.163.com/water_down/blog/static/170276590201111711243458/ <script type="text/j ...
-
js模块加载详解
看着java中各种import加载,在回过头来看看javascript还在自己造*,写各种XX的模块加载框架,ECMASCRIPT6不知什么时候能够普及.不过DT归DT,该学的还是要学. 一 同步加 ...
-
实现简单的 JS 模块加载器
实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...
-
页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
随机推荐
-
[LeetCode] Assign Cookies 分点心
Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...
-
HTTP权威指南阅读笔记三:HTTP报文
报文的组成部分 报文由三部分组成:对报文进行描述的起始行(start line).包含属性的首部(header),以及可选的.包含数据的主体(body)部分. 请求报文格式 <method> ...
-
Activiti 查看流程图
package com.mycom.processDefinition; import java.io.File; import java.io.IOException; import java.io ...
-
poj3252
好了,我的数论渣爆了………… 首先[n,m]内的round number显然就是f[m]-f[n-1] 即问0~x内有多少round number: 设x的二进制位数为t: 首先很好分析出在这个范围 ...
-
2014年度辛星css教程夏季版第六节
这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...
-
lufylegend库 鼠标事件 循环事件 键盘事件
lufylegend库 鼠标事件 循环事件 键盘事件 <!DOCTYPE html> <html lang="en"> <head> <m ...
-
第五篇:数据备份、pymysql模块
http://www.cnblogs.com/linhaifeng/articles/7525619.html#_label3 一 IDE工具介绍 生产环境还是推荐使用mysql命令行,但为了方便我们 ...
-
Hibernate主键生成策略及选择
1 .increment:适用于short,int,long作为主键,不是使用数据库自动增长机制 这是hibernate中提供的一种增长机制 在程序运行时,先进行查询:select max(id) f ...
-
[CodeForces 372A] Counting Kangaroos is Fun
题目链接:http://codeforces.com/problemset/problem/372/A 二分思想 AC代码: #include <cstdio> #include < ...
-
深入理解Java中的IO
深入理解Java中的IO 引言: 对程序语言的设计者来说,创建一个好的输入/输出(I/O)系统是一项艰难的任务 < Thinking in Java > 本文的目录视图如下: ...