JavaScript脚本多线程执行问题(转帖)
2008-06-28 11:30
519 查看
Loading Javascript files in parallel
You've got your website all set up but are experiencing slow load times for some customers, especially on slower connections. One possible cause is inefficient network usage because of serialized loading of external Javascript files.Static links in <head>
If you include script files in the HEAD element both IE and Firefox will download the scripts serially, waiting for each one to finish downloading before proceeding with the next one. Take the following HTML snippet that loads two external javascripts:<head>
<script type="text/javascript" src="Script1.js"></script>
<script type="text/javascript" src="Script2.js"></script>
</head>
Network traffic for loading scripts in <head> tag
Script1.js
Script2.js
In this common scenario a large amount of network bandwidth can potentially go unused.
Loading the scripts in parallel
You have two options for loading scripts in parallel:Attach them as elements dynamically
Use document.write to attach them
Both of these options will produce the same network traffic with the difference being in how the scripts are executed on the client. By loading the scripts in parallel we can cut down initial page load time drastically. The time for Script1.js to finish downloading will probably go up slightly over serial loading (since more of the connection is used) but the overall download time should decrease.
Network traffic for loading scripts in parallel
Script1.js
Script2.js
Attaching scripts as elements dynamically
<head><script type="text/javascript">
function AttachScript(src)
{
var script = document.createElement("SCRIPT");
script.type = "text/javascript";
document.getElementsByTagName("body")[0].appendChild(script);
script.src = src;
}
</script>
</head>
<body>
<script type="text/javascript">
AttachScript("Script1.js");
AttachScript("Script2.js");
</script>
</body>
In this scenario IE and Firefox will download both scripts but Internet Explorer will also execute them in the order they finish downloading in whereas Firefox downloads them asynchronously but still executes them in the order they are attached in the DOM.
In Internet Explorer this means your scripts cannot have dependancies on one another as the execution order will vary depending on network traffic, caches, etc.
In Firefox you can mostly get away with keeping dependancies on Script1 from Script2 with the caveat that if the user presses stop after Script2 has finished downloading but Script1 has not, Firefox will execute Script2 and abort downloading Script1. Ensure that Script2 can properly handle Script1 failing to load.
Attaching scripts via document.write
<script type="text/javascript">document.writeln("<script type='text/javascript' src='Script1.js'><" + "/script>");
document.writeln("<script type='text/javascript' src='Script2.js'><" + "/script>");
</script>
Using document.write produces the same effect in both Internet Explorer and Firefox: the scripts are downloaded in parallel but executed in the order they're written to the page. The same caveat above about the user stopping the page after Script2 has finished downloading before Script1 has applies.
This technique can be used to download more than two files at the same time as long as more than 1 hostname is used. IE will only open 2 HTTP connections to a named server in order to be a good client (Firefox will open 4) but you can easily work around this by creating additional domain names like scripts1.example.com, scripts2.example.com etc that point to the same host. At some point you will see diminishing returns and possibly even slowdowns from trying to download too many files at once so don't go too crazy with parallelizing.
Edit: Noted that Firefox will open 4 connections per named host by default.
Published Friday, December 22, 2006 12:58 PM by Kristoffer Filed under: Website Performance
--------------------------------------------------
--refer:
http://blogs.msdn.com/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx
相关文章推荐
- JavaScript脚本执行的多线程问题
- IE11下javascript脚本不执行的问题
- 绝对酷,如何解决asp.net中javascript脚本的问题(使用服务器控件执行客户端脚本)
- JavaScript 关键字引起的JS脚本执行问题
- 绝对酷,如何解决asp.net中javascript脚本的问题(使用服务器控件执行客户端脚本)
- QT Webkit 多线程执行 javascript 崩溃问题
- 执行MySQL脚本文件遇到的问题
- 编写高性能的JavaScript 脚本的加载与执行
- 解决执行python 脚本一闪而过问题
- 关于网页标准与JAVAScript执行的问题
- javascript 脚本执行消耗时间 time、timeEnd
- liunx 脚本执行,中文乱码问题
- mysql 执行脚本中遇到到权限问题
- jenkins 执行sh脚本 没携带环境变量,报错command not founds问题
- 关于android上引用js脚本 和rhino 多线程支持的问题
- 生产者消费者问题 这是一个非常经典的多线程题目,题目大意如下:有一个生产者在生产产品,这些产品将提供给若干个消费者去消费,为了使生产者和消费者能并发执行,在两者之间设置一个有多个缓冲区的缓冲池,生产者
- Mac 关闭chrome的自动更新解决版本更新造成的自动化测试脚本执行不通过的问题
- 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码
- MySql-执行外部sql脚本 outfile disable问题
- javascript脚本从载入浏览器到显示执行的过程解析