如何实现js非阻塞、并行加载，甚至能保持执行顺序呢？各浏览器表现如何？站在巨人的肩膀上，Kyle Simpson、Nicholas C. Zakas和Steve Souders对此有过总结和方案。

背景

1. Script DOM Element。 动态插入<script>，不会阻塞，但无法保持执行顺序。但唯有Firefox可以保持执行顺序，但也差点在Firefox 4 nightly的版本中去掉这个特性。

2. HTML5 async 非阻塞，加载完后立即执行，不保证顺序。这个属性不管有没有值、值为true或false，都是等同的效果（由于Kyle的推进，不能保证执行顺序与其值无关了）。

Google Analytics的新版嵌入代码就结合使用了上面两个方案，如：

var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
          + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);

3. IE defer属性。不阻塞，可以保证顺序，在DOM加载完成后执行（在DOMContentLoaded之前）。

4. <script>的type属性设为”script/cache” 非标准的type属性，使js文件只会被加载而不会执行。需要执行时，创建一个type属性为”text/javascript”的正常<script>元素，src设为前面已经加载的js地址即可，执行顺序开发者可控（执行时机也完全可控）。类似的方式也有通过<img>来做预加载的。

5. document.write。文档流关闭后执行会清空整个页面。

6. XHR 并行加载，执行顺序可控，但有同域限制。

基本需求

Steve Souders 和 Nicholas C. Zakas 一起总结了下，认为js加载方案必须解决以下问题：

1. 支持特性检测
2. 不会重复加载
3. 支持并行加载

开发者的美好愿望

Nicholas C. Zakas 几经周折，有了以下的提案，分离js的加载和执行，方便开发者自由控制js的执行时间。

var script = document.createElement("script");

// 此属性仅可由js动态写入，在HTML标签中直接写入无效
script.preload = true;

// src赋值后，立即触发加载（仅加载，不会执行js内容）
script.src = "foo.js";

// onpreload是需要新支持的事件，加载完成后触发此事件
script.onpreload = function(){
    // 在需要时，将加载的js插入到DOM中，即可运行生效
    document.body.appendChild(script);
};

基于特性检测feature detection（区别于特性推测feature inference）

var isPreloadSupported = (typeof script.preload == “boolean”);

这一特性只有在Javascript中动态赋值时生效，直接写到HTML标签上时是无效的。

但这只是一个提案，开发者们的美好愿望，而非被浏览器支持的标准。目前这一提案已在LABjs中支持，Zakas本人也在积极推进此提案的标准化。

而Kyle在推进另外一种方式，即要求对含有属性async=false的<script>保持执行顺序。如果async=true，则一旦加载完则会马上执行脚本，不会严格保持顺序。默认地，页面中的<script>的async属性为false，即保持执行顺序；js创建的<script>的async属性为true，即加载完立即执行，不保证顺序。

为了支持特性检测，一个由js创建的<script>标签默认具有async=true的属性。

Kyle的这一提案已被HTML5小组接受放入草案，在Firefox 4 nightly版本中的也已实现。

Firefox 4为了更向HTML5标准看齐，一度在开发者版本中去掉了对动态创建<script>来加载js文件的执行顺序支持：

<script> elements created using document.createElement() and inserted into a document now behave according to the HTML5 specification by default. Scripts with the src attribute execute as soon as available (without maintaining ordering) and scripts without the src attribute execute synchronously.

为此，Kyle向WebKit开发团队抗议，提了一个bug，最终得到了如他所愿的支持：

To make script-inserted scripts that have the src attribute execute in the insertion order, set .async=false on them.

Zakas很欣赏Kyle的方案，Kyle在LABjs中也支持了Zakas的提议，各浏览器们也这么和谐就好了。

现有解决方案

LABJS
作者：Kyle Simpson
特点：并行加载，并保持顺序
主要方案：async=false、preonload新提案的支持，以及兼容各浏览器的方案，维护成本不小。

ControlJS
作者：Steve Souders
特点：并行加载，无顺序保证
主要方案：<script type=”text/cache”>

HTML 第一版

追溯HTML的元祖第一版，就是不要求自闭合的，如下的一段用法就表明了其的松散随意

<ADDRESS>
Newsletter editor<p>
J.R. Brown<p>
JimquickPost News, Jumquick, CT 01234<p>
Tel (123) 456 7890
</ADDRESS>

对于<img>这类标签，本来就是没有闭合的，原始定义为：

The IMG element is empty: it has no closing tag.

现行的 HTML5

HTML5中，<br> <img> <input> <meta>等空标签可以不用自闭合了。

官方草案中描述：

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

即自关闭的斜线(/)对空标签无效。

Void Elements 包含以下标签：

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

官方答疑中，对被问及此问题的答复如下：

Void elements in HTML (e.g. the br, img and input elements) do not require a trailing slash. e.g. Instead of writing, you only need to write. This is the same as in HTML4. However, due to the widespread attempts to use XHTML1, there are a significant number of pages using the trailing slash. Because of this, the trailing slash syntax has been permitted on void elements in HTML in order to ease migration from XHTML1 back to HTML.

言即不再需要自闭合(/)这个小尾巴了，如果要写上也是可以的。

除了MathML标签遵循XML语法需要自闭合外，普通HTML标签不要自闭合才是标准的写法。

测试代码

测试代码中避开了type的默认值，因为<button>的type属性在IE下的默认值是button，而在其他浏览器默认是submit 。我们平时在使用时，建议显式的声明type属性。

Always specify the type attribute for the button. The default type for Internet Explorer is “button”, while in other browsers (and in the W3C specification) it is “submit”.

// 创建input
var iptEl = document.createElement('input');
iptEl.type = 'password';  // 避免默认值
iptEl.name = 'damon';

document.body.appendChild(iptEl);

// 创建button
var btnEl = document.createElement('button');
btnEl.type = 'reset';  // IE下这里报错了
btnEl.name = 'damon';

document.body.appendChild(btnEl);

alert(document.getElementsByTagName('input')[0].type +','+
    document.getElementsByTagName('button')[0].type);

测试结果

从测试结果可以看到，<input>并无此问题。

解决方案

MSDN有一段说明:

As of Microsoft Internet Explorer 5, the type property is read/write-once, but only when an input element is created with the createElement method and before it is added to the document.

即只有document.createElement创建的input元素，在其增加到DOM树之前允许对type属性进行一次更改。但从实际情况来看并非如此，这个仅有的一次设置type的机会在创建时就用掉了。从上面的测试结果看，这个问题直到IE9才修复。

针对IE，document.createElement(tag)中，tag可以是带有属性的字符串，创建时即将type和name写上即可。

Attributes can be included with the sTag as long as the entire string is valid HTML.

对其他的现代浏览器(Chrome、Safari等)使用setAttribute即可，或者使用document.createAttribute创建属性节点，再通过setAttributeNode加到元素节点上。

方法一：

var btnEl;

try {
    btnEl = document.createElement('');
} catch(e){}

if(! btnEl) {
    btnEl = document.createElement('button');

    btnEl.setAttribute('type', 'reset');
    btnEl.setAttribute('name', 'damon');
}

document.body.appendChild(btnEl);
alert(document.getElementsByTagName('button')[0].type +','+
    document.getElementsByTagName('button')[0].name);

方法二：

var btnEl;

try {
    btnEl = document.createElement('');
} catch(e){}

if(! btnEl) {
    btnEl = document.createElement('button');

    var aType = document.createAttribute('type');
    var aName = document.createAttribute('name');

    aType.value = 'reset';
    aName.value = 'damon';

    btnEl.setAttributeNode(aType);
    btnEl.setAttributeNode(aName);
}

document.body.appendChild(btnEl);
alert(document.getElementsByTagName('button')[0].type +','+
    document.getElementsByTagName('button')[0].name);

入手VPS后，硬件配置有限，先简单搭建了一个静态站点环境，后续再加入php和mysql等。

linux用的是默认的debian，老而稳定，主机商提供的简化版本实在简化，很多不必要的功能都没有，有些有必要的功能也是需要自己安装的，这个风格我很喜欢。考虑到资源限制和继续保持简单，用的是nginx。为了使用方便，搭了个FTP。

nginx安装和配置

方便的apt-get，使用官方源安装即可，版本不是最新，但肯定稳定。
apt-get install nginx

配置文件在 /etc/nginx 下，查看安装详细：
dpkg -L nginx

常用的指令:

• 启动nginx：
  /etc/init.d/nginx start
• 停止nginx：
  /etc/init.d/nginx stop
• 重新加载nginx配置：
  /etc/init.d/nginx reload
• 重启nginx：
  /etc/init.d/nginx restart
• 查看版本：
  /usr/sbin/nginx -v

vsftpd 安装和配置

照样官方源apt-get安装vsftpd，会提示安装libcapl。
apt-get install vsftpd

配置文件位于 /etc/vsftpd.conf，进入配置：

	anonymous_enable=NO
	local_enable=YES
	write_enable=YES
	local_umask=022
	chroot_local_user=YES
	chroot_list_enable=YES
	chroot_list_file=/etc/vsftpd.chroot_list

上面指定了chroot_list文件，这个文件中的用户（一行一个用户名）拥有访问主目录以外的权限，需要对应建立一个：

vi /etc/vsftpd.chroot_list
:wq

重启vsftpd
/etc/init.d/vsftpd restart

增加权限

	groupadd ftpgroup
	useradd damon –g ftpgroup –d /home/damon –s /bin/bash
	passwd damon

	chown impng.ftpgroup /var/www/impng.com
	chmod 755 /var/www/impng.com

扫尾工作，将nginx和vsftpd加入到自启动：

	update-rc.d -f nginx defaults
	update-rc.d -f vsftpd defaults

国内的空间很多不太稳定，超售严重，建议大家使用一些监控服务去测量自己网站的在线率。如果欠满意，那就联系主机商换个空间吧，至少会换到一个超售没那么严重的主机上。我使用的是监控宝提供的免费服务，15分钟的检测频率，可以从电信、网通各两个检测点监控你的网站在线情况，以及响应速度。统计报表也较完善，短信告警需要付费，一般邮件告警就可以了，使用你的手机邮箱就好了。

TODO

1. vsftpd是一直运行的，但FTP服务并不是时刻都需要的，优化为按需启动。使用xinetd启动vsftpd即可，需要时才启动。但ramHOST的VPS过于精简，没有xinetd…
2. 安装php和mysql，但128M的小内存VPS，需要优化。参考下张晏的Nginx 0.7.x + PHP 5.2.6（FastCGI）+ MySQL 5.1 在128M小内存VPS服务器上的配置优化。

用GAE做了2件事，一件是用Cron Jobs建了个定时任务，替代之前的不准时的方案（在指定时间段内，有人访问站点，则会触发一个定时任务，没人访问就杯具了）。

另一件就是众所周知的事，可以随时浏览fb和tw了，不过记得配置下fbcdn.net的规则，否则你看到的是裸奔的facebook了，刚好今天是4月9日CSS裸奔节，也恰到好处了。

使用GAE的简单三步骤：

1. 拥有一个GAE帐号并创建一个应用

到appengine.google.com注册即可，需要手机接收验证码，手机号码前记得加上“+86”，要有国际化意识:)

2. 安装Python环境

Python官网目前的最新版本是2.7.1和3.2，千万不要赶时髦，GAE只支持Python 2.5.2，尽管GAE团队已经在很努力的支持2.6、2.7甚至3.2，至少目前是不行的。遗憾的是，Python官网历史版本的下载页打不开了，只能在其他可信的站点下载Python 2.5.2版本了。傻瓜式安装。

3. 安装GAE环境

到Google Code下载适合你系统的Google App Engine SDK，才十几Mb，一会就好了。同样傻瓜式安装，如果不希望在长长的环境变量中又添加一段，这里的安装路径最好不要太深，免得以后的命令行操作打太多的路径了。

SDK简要说明

我使用的是Python的SDK，在安装路径下可以注意到这么几个文件/文件夹：

• appcfg.py : 部署应用到google。
• dev_appserver.py : 本地开发服务器环境。
• app.yaml: 必需文件，描述此应用所运行的，以及访问地址和对应的处理程序，还可以指定是否需要管理员身份访问。应用程序配置的文档
• index.yaml : 非必需文件，相当于你的数据配置。还没用到，需要的可以看看数据存储区索引配置的文档。
• cron.yaml : 如果需要Cron Jobs服务的话，就要建这个文件，语法很简单，功能很完善，看看Cron计划任务的文档吧。
• new_project_template/ : 标准的app模板，包含app.yaml、index.yaml和py主程序，新建app的话，就直接复制这个文件夹吧。
• demos/ : 里面有个guestbook的例子，可以参照学习下。

常用指令

都在CMD命令行方式下操作。

• appcfg.py update [app文件夹路径] : 上传文件到GAE，有个缓慢的身份验证过程，然后会将制定文件夹下的文件上传，并检测是否可以运行。
• appcfg.py update_cron [app文件夹路径] : 更新Cron Jobs的设置，即上传cron.yaml。
• appcfg.py cron_info [app文件夹路径] : 查看Cron Jobs的执行计划，列出未来5次执行时间。
• dev_appserver.py [app文件夹路径] : 本地调试用，运行后，就可以在浏览器打开http://localhost:8080/调试了，如果在app.yaml中设置了需要管理员权限的话，还会要求先输入Google帐号。

小Tips:想要删除应用可没那么简单了，GAE保证你的应用不会丢失，哪怕你自己想丢失XD。方法也很简单，将文件内容都清空再传一次好了。

如果需要根据URL的hash值变化，来进行不同的页面处理，需要一个监测方案。最常见的方法就是通过一个定时程序，不停的去检测url中hash的变化，一旦检测到变化，则触发操作。

但这个方案并不是实时触发的，而且究竟该多久检测一次，没有一个有依据的数值。如果数值过大，可能会影响到页面的快速呈现；如果数值过小，则会引起过高的资源占用。

比较完美的一个方式是采用onhashchange的事件监测。

hashchange事件在html5中有定义，在url的hash段变化的时候触发。目前支持onhashchange的浏览器有：

• Gecko 1.9.2 (Firefox 3.6/Thunderbird 3.1/Fennec 1.0)
• IE 8
• WebKit 528+ (Safari/Google Chrome)
• Opera 10.70

秉承不应基于浏览器检测，而应基于对象和方法检测的原则，可用 if(‘onhashchange’ in window) { } 检测浏览器是否支持onhashchange。这里不能用 typeof window.onhashchange === ‘undefined’ 来检测，因为很多支持onhashchange的浏览器下，其初始值就是undefined。

需要注意的是，在IE8以ie7的模式运行时，window下存在onhashchange这个方法，但是永远不会触发这个事件，因此需要先检测IE的document.documentMode。

综上所述，采取比较完善方式的代码片段：

    if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
        // 浏览器支持onhashchange事件
        window.onhashchange = hashChangeFire;  // TODO，对应新的hash执行的操作函数
    } else {
        // 不支持则用定时器检测的办法
        setInterval(function() {
            var ischanged = isHashChanged();  // TODO，检测hash值或其中某一段是否更改的函数
            if(ischanged) {
                hashChangeFire();  // TODO，对应新的hash执行的操作函数
            }
        }, 150);
    }

通过URL hash来传递数据，在某些场景下相对URL query的方式，不会引发浏览器发起新连接，是一个很好的优化。同时可让页面中的某些中间交互环节通过URL可访问到，是一个很好的体验。试试吧:)

try { __flash__toXML(xxxx()) ; } catch (e) { ““; }

关于Flash怎么实现和js通信的，可以参看这里ExternalInterface 与 JavaScript。

步步排查，最终定位到问题所在：

必须要向DOM树上存在的节点，将flash innerHTML进去才行，否则在flash player10.0下js不能调用到flash抛出的接口函数。

之前的做法是先将flash inner到一个js创建的节点中，然后再把这个节点append到页面中。这样引发在flash player下js不能和flash通信的问题。

Plugin Switcher

这里介绍一个工具：Plugin Switcher，用于切换各个flash player的版本。省得到处找各个版本的flash player了，还省得手动卸载和安装了。

Plugin Switcher下载地址：http://www.pluginswitcher.de/download/index.html

手动安装低版本的flash player

如果之前安装过flash player 10.1.x.x的版本，卸载后再安装比它低的版本，提示“正尝试安装的 Adobe(R) Flash(R) Player 版本不是最新的版本。请访问 http://www.adobe.com/go/getflashplayer 以获取最新、最安全的版本。”。如下图：

如果不使用工具，手动办法如下：

卸载flash player后，打开注册表，找到 HKEY_LOCAL_MACHINE\SOFTWARE\Macromedia\FlashPlayer\SafeVersions， 删除右侧相关版本号内容，或者全部删除，再安装低版本flash player。如下图：

大多数的做法，是将所有的语法规则文件都加载，页面内含哪种代码，就调用哪种brush。这样的缺点显而易见，如果页面没有任何代码，是不需要这些brush文件的，甚至这个插件本身都可以不要加载；即算是页面包含需要高亮的代码，一般情况下只是2-3种brush文件就够了，其他的也是不用加载的。浪费流量，处理不当还是影响页面呈现时间。

对这种情况，SHLwhenneed基于SyntaxHighlighter，实现按需加载。即在检测到页面有需要高亮效果的代码后，才会加载SyntaxHighlighter和相应的brush文件。

SHLwhenneed调用方式

在页面已加载jquery.js的情况下，再引入shlwhenneed.js即可。或直接安装SHLwhenneed的wordpress插件即可。

SHLwhenneed支持以下的调用方式：

<pre class="brush:javascript">
function damon() {
	var a = 'hello ';
	var b = 'world';

	document.write(a + b);  // output
}
</pre>

<pre class="javascript" name="code">
function damon() {
	var a = 'hello ';
	var b = 'world';

	document.write(a + b);  // output
}
</pre>

<pre class="lang:javascript">
function damon() {
	var a = 'hello ';
	var b = 'world';

	document.write(a + b);  // output
}
</pre>

推荐使用第一种方式，即<pre class=”brush:xxxx”>，xxxx代表的是代码语言的种类。本页的效果即采用SHLwhenneed插件呈现。

SHLwhenneed下载

wordpress插件下载：

SHLwhenneed之wordpress插件

主要源码下载：

SHLwhenneed.source.zip(1.0.5，源码)

当我快完成这个插件的时候，才发现SyntaxHighlighter的最新版本已经增加了类似的功能，但对比起来，还是缺乏那么一点“智能”，并且在页面不含任何代码的时候，会比SHLwhenned要多加载几个文件。

每次将代码复制到浏览器中检测，还是有点麻烦，在比较紧急的情况下，甚至忽略或忘记。在IDE中集成这个作为插件，在提交测试前运行一下，更加方便快捷。鉴于目前的国内网络环境，本地检测更是一种永久可行的方法。

本文以Editplus为例，安装此功能。

为EditPlus添加JSLint的方案

一种方法是直接使用jslint.js文件来检测，但实际中不完善，可以参见这篇介绍《editplus中的jslint》。

另外一种方法是对jslint.js进行封装，比较完善。配置方式见《JSLint for EditPlus 检验js语法》
。

此插件包含两个文件：JSLint.wsf和JSLint.js，可以从http://www.jslint.com/fulljslint.js下载最新版本来替换解压后的JSLint.js。Editplus通过WScript.exe执行JSLint.wsf，将当前文件的内容给JSLint.js检测，并输出检测结果。

JSLint插件不支持含非英文字符的UTF-8编码的文件

但这个插件存在一个问题：仅支持ASCII编码的校验，对于包含中文的UTF-8编码的文件会停止校验。

打开JSLint.wsf，里面读取文件的时候，默认都采用了ASCII的编码读取的，所以对非ASCII编码的文件不会正常校验。

原因

在JSLint.wsf的最后的部分可以找到如下代码：

if(args.length>0) {
	var fso = new ActiveXObject("Scripting.FileSystemObject"),
		file = fso.OpenTextFile(filepath),
		cot = file.ReadAll();
	JSLINT(cot);
	var report = JSLINT.reportTXT();
	WScript.StdOut.Write(report);
 }
 WScript.Quit();

这里采用FSO的OpenTextFile获取文件内容。OpenTextFile的格式为：

object.OpenTextFile(filename[, iomode[, create[, format]]])

format指定了读取文件的编码格式，其值可以为：

• -2：采用系统默认编码
• -1：采用Unicode
• 0：采用ASCII，默认值

其默认值为0，也就是读取ASCII编码的文件，不支持指定编码为UTF-8,所以针对UTF-8编码的文件会报错。

解决方案

为了支持对UTF-8文件的检测，改用ADODB.Stream读取文件，将这段代码改写如下：

if(args.length>0) {
/**
	var fso = new ActiveXObject("Scripting.FileSystemObject"),
		file = fso.OpenTextFile(filepath),
		cot = file.ReadAll();
/**/
	var stream = new ActiveXObject("ADODB.Stream"),
	cot = '';

	stream.Mode = 3;  // 常用值 1:读，2:写，3:读写，当前环境之允许用3
	stream.Type = 2;  // 1:二进制，2:文本(默认)
	stream.Charset = 'UTF-8';  // 指定编码
	stream.Open();
	stream.LoadFromFile(filepath);
	cot = stream.ReadText(-1);  // 读取全部内容
	stream.Close();

	JSLINT(cot);

	var report = JSLINT.reportTXT();
	WScript.StdOut.Write(report);
}
WScript.Quit();

这样，就可以对UTF-8进行JSLint的检测了。

你也可以直接下载修改好的JSLint插件文件。

TODO

目前是根据个人常用的文件编码方式（如UTF-8），将其硬编码到JSLint.wsf中的，最好是能够自动识别文件编码并读取和校验。这将涉及编码方式的检测，尤其是到对无BOM的UTF-8文件检测。

参考资料：

在 Windows 中的 Windows 脚本宿主的概述

原版本EditPlus.JSLint

Reading and Writing Binary Files Using JScript

OpenTextFile Method

Stream Object (ADO)

1. 页面结构中不要出现明文的email，防止spam。可以先escape下，然后在页面中用js做unescape出来即可，虽然也不能杜绝被抓取到email，但还是要好很多的。做成图片的开销不小，会增加一个连接，而且alt里面也不能出现email，图片失败就什么都看不到了，关键是不可复制；做成base64的方式内嵌的话，体积也不会小。

2. 是否写上了和主站的格式一致的<title>，同时别忘了keywords和description。

3. favicon.ico有没有设置，并已经足够小。favicon是否和主站不一致，是否会引发品牌争议。如果需要删除favicon.ico文件，记得检查<head>中是否也有设置，请一并删除。但由此会带来一个favicon的404，需要斟酌。

4. JS脚本有没有压缩？

5. IE下有没跑一遍？避免出现数组最后的那个逗号。

6. 有没用JSLint等工具检查一遍？规范下你的脚本吧。

7. 页面上所有的链接都点一点，即使不是属于你这个版本的，只要你的这个版本中能看到的都应该检查下。

8. 有没有因为空格或换行带来了表现和其他页面不一致？虽然很细节，但是很明显。

9. 狂点几下需要异步请求的几个链接或按钮，看下有没做处理，看下服务器还能否承受。

10. 请产品人员检查下文字是否正确，最好不要因为文字错误而重新发布一次。

11. 把哪些没有依赖关系的，加载或执行慢的js丢到最后去，尤其是你的统计脚本。

12. 抓包，避免404和重复请求，有没cache，对速度慢的接口有没有做友好提示。

13. 回家也看下，没有公司的带宽，页面还正常否，功能还正常否，加载速度还能忍受否？

待补充……真不喜欢用13结尾。