来自国外的页面JavaScript文件优化


Posted in Javascript onDecember 08, 2010

The problem: scripts block downloads

Let's first take a look at what the problem is with the script downloads. The thing is that before fully downloading and parsing a script, the browser can't tell what's in it. It may contain document.write() calls which modify the DOM tree or it may even contain location.href and send the user to a whole new page. If that happens, any components downloaded from the previous page may never be needed. In order to avoid potentially useless downloads, browsers first download, parse and execute each script before moving on with the queue of other components waiting to be downloaded. As a result, any script on your page blocks the download process and that has a negative impact on your page loading speed.

Here's how the timeline looks like when downloading a slow JavaScript file (exaggerated to take 1 second). The script download (the third row in the image) blocks the two-by-two parallel downloads of the images that follow after the script:

来自国外的页面JavaScript文件优化

Here's the example to test yourself.

Problem 2: number of downloads per hostname

Another thing to note in the timeline above is how the images following the script are downloaded two-by-two. This is because of the restriction of how many components can be downloaded in parallel. In IE <= 7 and Firefox 2, it's two components at a time (following the HTTP 1.1 specs), but both IE8 and FF3 increase the default to 6.

You can work around this limitation by using multiple domains to host your components, because the restriction is two components per hostname. For more information of this topic check the article “Maximizing Parallel Downloads in the Carpool Lane” by Tenni Theurer.

The important thing to note is that JavaScripts block downloads across all hostnames. In fact, in the example timeline above, the script is hosted on a different domain than the images, but it still blocks them.

Scripts at the bottom to improve user experience

As Yahoo!'s Performance rules advise, you should put the scripts at the bottom of the page, towards the closing </body> tag. This doesn't really make the page load faster (the script still has to load), but helps with the progressive rendering of the page. The user perception is that the page is faster when they can see a visual feedback that there is progress.

Non-blocking scripts

It turns out that there is an easy solution to the download blocking problem: include scripts dynamically via DOM methods. How do you do that? Simply create a new <script> element and append it to the <head>:

var js = document.createElement('script');

js.src = 'myscript.js';

var head = document.getElementsByTagName('head')[0];

head.appendChild(js);

Here's the same test from above, modified to use the script node technique. Note that the third row in the image takes just as long to download, but the other resources on the page are loading simultaneously:

来自国外的页面JavaScript文件优化

Test example

As you can see the script file no longer blocks the downloads and the browser starts fetching the other components in parallel. And the overall response time is cut in half.

Dependencies

A problem with including scripts dynamically would be satisfying the dependencies. Imagine you're downloading 3 scripts and three.js requires a function from one.js. How do you make sure this works?

Well, the simplest thing is to have only one file, this way not only avoiding the problem, but also improving performance by minimizing the number of HTTP requests (performance rule #1).

If you do need several files though, you can attach a listener to the script's onload event (this will work in Firefox) and the onreadystatechange event (this will work in IE). Here's a blog post that shows you how to do this. To be fully cross-browser compliant, you can do something else instead: just include a variable at the bottom of every script, as to signal “I'm ready”. This variable may very well be an array with elements for every script already included.

Using YUI Get utility

The YUI Get Utility makes it easy for you to use script includes. For example if you want to load 3 files, one.js, two.js and three.js, you can simply do:

var urls = ['one.js', 'two.js', 'three.js'];

YAHOO.util.Get.script(urls);

YUI Get also helps you with satisfying dependencies, by loading the scripts in order and also by letting you pass an onSuccess callback function which is executed when the last script is done loading. Similarly, you can pass an onFailure function to handle cases where scripts fail to load.

var myHandler = {

onSuccess: function(){

alert(':))');

},

onFailure: function(){

alert(':((');

}

};
var urls = ['1.js', '2.js', '3.js'];

YAHOO.util.Get.script(urls, myHandler);

Again, note that YUI Get will request the scripts in sequence, one after the other. This way you don't download all the scripts in parallel, but still, the good part is that the scripts are not blocking the rest of the images and the other components on the page. Here's a good example and tutorial on using YUI Get to load scripts.

YUI Get can also include stylesheets dynamically through the method YAHOO.util.Get.css() [example].

Which brings us to the next question:

And what about stylesheets?

Stylesheets don't block downloads in IE, but they do in Firefox. Applying the same technique of dynamic inserts solves the problem. You can create dynamic link tags like this:

var h = document.getElementsByTagName('head')[0];

var link = document.createElement('link');

link.href = 'mycss.css';

link.type = 'text/css';

link.rel = 'stylesheet';

h.appendChild(link);

This will improve the loading time in Firefox significantly, while not affecting the loading time in IE.

Another positive side effect of the dynamic stylesheets (in FF) is that it helps with the progressive rendering. Usually both browsers will wait and show blank screen until the very last piece of stylesheet information is downloaded, and only then they'll start rendering. This behavior saves them the potential work of re-rendering when new stylesheet rules come down the wire. With dynamic <link>s this is not happening in Firefox, it will render without waiting for all the styles and then re-render once they arrive. IE will behave as usual and wait.

But before you go ahead and implement dynamic <link> tags, consider the violation of the rule of separation of concerns: your page formatting (CSS) will be dependent on behavior (JS). In addition, this problem is going to be addressed in future Firefox versions.

Other ways?

There are other ways to achieve the non-blocking scripts behavior, but they all have their drawbacks.

Method Drawback
Using defer attribute of the script tag IE-only, unreliable even there
Using document.write() to write a script tag Non-blocking behavior is in IE-only document.write is not a recommended coding practice
XMLHttpRequest to get the source then execute with eval(). “eval() is evil” same-domain policy restriction
XHR request to get the source, create a new script tag and set its content more complex same-domain policy
Load script in an iframe complex iframe overhead same-domain policy

Future

Safari and IE8 are already changing the way scripts are getting loaded. Their idea is to download the scripts in parallel, but execute them in the sequence they're found on the page. It's likely that one day this blocking problem will become negligible, because only a few users will be using IE7 or lower and FF3 or lower. Until then, a dynamic script tag is an easy way around the problem.

Summary

  • Scripts block downloads in FF and IE browsers and this makes your pages load slower.
  • An easy solution is to use dynamic <script> tags and prevent blocking.
  • YUI Get Utility makes it easier to do script and style includes and manage dependencies.
  • You can use dynamic <link> tags too, but consider the separation of concerns first.
Javascript 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 #Javascript
javascript中callee与caller的用法和应用场景
Dec 08 #Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 #Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 #Javascript
jquery蒙版控件实现代码
Dec 08 #Javascript
基于JQuery制作的产品广告效果
Dec 08 #Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 #Javascript
You might like
PHP的SQL注入过程分析
2012/01/06 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
PHP多文件上传实例
2015/07/09 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
js实现弹窗效果
2020/08/09 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python实现八大排序算法
2016/08/13 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
python中的句柄操作的方法示例
2019/06/20 Python
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
会计岗位职责模板
2014/03/12 职场文书
人事任命书格式
2014/06/05 职场文书
应届生求职自荐信
2014/07/04 职场文书
毕业生实习证明
2014/09/19 职场文书
七年级话题作文之执着
2019/11/19 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL