高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化。本篇文章简单描述一下其中的优化准则。
1. 脚本加载优化
1.1 脚本位置对性能的影响
优化页面加载性能的原则之一是将script标签放在body底部,这跟浏览器的渲染原理有关:
- js脚本的下载和执行会阻塞浏览器的解析。在较早时期,浏览器不支持并行下载的时候,js脚本的下载执行按照在html文档中的位置依次进行,可以想象当页面有大量js脚本时页面的加载有多慢;
- js脚本的下载会阻塞其他资源的下载,比如图片、外链css等。虽然目前大多数浏览器支持并行下载,外链js文件可以并行下载,但是在下载js的过程中,其他资源的加载仍然会被阻塞。
综上所述,除非业务需求必须将js脚本放在指定位置,最佳的优化准则是将js放于body底部。
1.2 合并脚本文件
每个script标签都会阻塞页面的解析和其他资源的加载,可以通过合并js脚本文件进行优化。虽然目前大多数浏览器支持并行下载,但是随着web产品越来越庞大,浏览器支持的并行数量明显不能满足需求,随意js文件的合并打包是很有必要的。
目前较流行的grunt/gulp/webpack等编译工具都支持文件的打包合并,webpack甚至可以将css文件也一并打包到js文件里。我们先不去评价这种模式的好坏,单从减少文件数量这个角度来看,这是为了减少http请求数目、script标签数量以提高页面的加载性能。
其实这种理念很早就有,有后端开发经验的朋友可能接触过combo handler,这是Yahoo YUI团队开发的一个Apacha模块。combo handler可以支持浏览器使用一个url请求多个文件,比如我们页面中需要两个js文件,常规情况下使用2个script标签请求:
<script src='http://static.me.com/a.js'></script>
<script src='http://static.me.com/b.js'></script>
使用combo handler可以通过以下形式:
<script src='http://static.me.com?a.js&b.js'></script>
a.js和b.js在服务器是独立存在的,combo handler可以通过一个http请求将两者合并为一起返回,减少了http请求数目,提高了页面加载性能。
2. 无阻塞脚本
2.1 defer和async
defer和async都是针对外链的js脚本文件,如下:
<script src='http://static.me.com/a.js' defer></script>
<script src='http://static.me.com/a.js' async></script>
defer和async的作用都是令指定的js文件异步加载,不影响html文档其他内容的解析,也就是说带有defer和async的js文件和html文档的解析是并行的。但是两者的运行机制有稍许差别。
defer在IE4就引入了,目前几乎所有浏览器都支持。defer的js文件在并行下载结束后并不立即执行,其执行时机是在文档加载完毕后window.onload触发之前。
async是HTML5引入的新规范,目前获得了大多数浏览器的支持。async的js文件在并行下载结束后立即执行。
比较defer和async的区别可以得到以下结论:
- 两者都是并行下载,不影响html文档的解析;
- defer文件的执行时机是在window.onload之前,所以defer文件的位置任意;
- async文件下载结束后立即执行,是乱序的。所以并不适用于有依赖关系的js脚本;
- defer和async的脚本中应当避免使用
document.wirte
,否则会清空页面原有的内容。
2.2 动态脚本
所谓动态脚本的意思是使用JavaScript创建一个script,指定其src并将此script标签插入文档的head中。
之所以将动态script标签插入head而不是body中是因为在低版本IE中如果在html文档未解析完毕时,body中插入script标签会抛出“操作已终止”的错误信息。具体可参考The dreaded Operation Aborted error。
动态脚本请求到的js脚本是立即执行的。
动态创建script标签时,某些业务场景下需要监听被请求的js脚本是否加载完毕。大多数浏览器都支持script.onload
事件:
script.onload = function(){}
IE浏览器没有实现onload事件,而是会触发readystatechange
事件。当readyState
的状态为loaded
或complete
时便可以认为js脚本文件已加载完毕。兼容所有浏览器的loadScript函数如下:
function loadScript(url,callbakc){
var script = document.createElement('script');
script.type = 'text/javascript'; //低版本IE下必须制定type,其他浏览器可以不写
if(script.readtState){ //IE
script.onreadystatechange = function(){
if(script.readyState === 'loaded' || script.readyState === 'complete'){
script.readyState === 'null';
callback();
}
};
}else{ //其他浏览器
script.onload = function(){
callbakc();
}
}
script.src = url;
document.getElementByTagName('head')[0].appendChild(script);
}
2.3 使用XHR注入js脚本
使用XHR注入脚本是比较偏门并且应用面很小的一门技术,原理就是用Ajax去get请求一个js文件,监听xhr.status
,获取到的响应信息是js文件的代码。然后动态创建一个script标签,将获取到的js代码注入script标签内,最后将script标签插入文档中。
这种方式注入的js脚步并不会立即执行。缺点是无法跨域,因此很少得到应用。
高性能JavaScript-JS脚本加载与执行对性能的影响的更多相关文章
- JS脚本加载与执行对性能的影响
高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...
- JS的加载和执行
从JS的加载和执行谈性能优化 ---高性能JS读后感(第一章) 从脚本的"霸道"说起,随着浏览器的进步,js越来越听话了,所以,我们先说说以前的浏览器是怎么加载js的,以及js如何 ...
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器
CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...
- 性能优化-css,js的加载与执行
前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...
- 脚本加载后执行JS回调函数的方法
动态脚本简单示例 // IE下: var HEAD = document.getElementsByTagName('head')[0] || document.documentElement var ...
- 【Hight Performance Javascript】——脚本加载和运行
脚本加载和运行 当浏览器遇到一个<script>标签时,无法预知javascript是否在<p>标签中添加内容.因此,浏览器停下来,运行javascript代码,然后继续解析. ...
随机推荐
- Java 泛型总结
1. 泛型类 class Gen<T> { private T t; public T get(){ return t; } public void set(T argt){ t = ar ...
- 安装Python图型处理库Python Imaging Library(PIL)
方法1: 在Debian/Ubuntu Linux下直接通过apt安装: $sudo apt-get install python-imaging Mac和其他版本的Linux可以直接使用easy_i ...
- 26数据查询的各种小玩法-select 下(必学)-天轰穿sqlserver视频教程
大纲:简单查询-选择数据列,使用字符串,改变列标题,使用数据运算,使用ALL语DISTINCT关键字,使用TOP关键字,排序 优酷超清地址,为了冲优酷的访问量,所以这里只放优酷的地址了,其实其他网站还 ...
- The web application [] appears to have started a thread named [Abandoned connection cleanup thread] com.mysql.jdbc.AbandonedConnectionCleanupThread
01-Jul-2016 14:25:30.937 WARNING [localhost-startStop-1] org.apache.catalina.loader.WebappClassLoade ...
- WPF与winform与silverlight的区别
收到了一封学生的邮件: =========================== 金老师您好: 最近在学C#.NET,基本语法学习的差不多了,接下来准备学习图形界面设计部分.但是我目前对于.NET的Wi ...
- 使用commons-beanutils迭代获取javabean的属性
NoteEntity entity = new NoteEntity(); entity.setNote001("a1"); entity.setNote002("a2& ...
- easyui中 在子tabs中 添加新的tabs
function addToParentTab(title, url) { self.parent.addTabIgnoreExist(title, url, 'icon-cha ...
- EF5.0增删改查的写法及执行Sql的方法
public T AddEntity(T entity) { //EF4.0的写法 添加实体 //db.CreateObjectSet<T>().AddObject(entity); // ...
- Enclosure POJ
0:Enclosure http://poj.openjudge.cn/challenge3/0/ 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 131072kB 描述 为了防止 ...
- Objective-C中将结构体与联合体封装为NSValue对象
在Clang 3.7之前,Objective-C已经可以使用类似@100.@YES.@10.5f等字面量表示一个NSNumber对象:用类似@"xxx"的字面量表示一个NSStri ...