游戏人生

Lua 脚本中使用了大量字符串，这些字符串通常用于格式化输出到客户端进行显示。在前
期开发过程当中，为了快速开发的需要，这个问题往往被搁置起来。

在面临本地化需求时，我们的目标是使用尽量少的代价使本地化更加容易。

针对 Lua 脚本中使用的字符串，使用一个名为 messages 的 table 将所有字符串以
下面的形式进行存储：

messages = {
    hello = "你好",
    world = "中国",
}

在使用时，需要对原来的字符串进行替换：

print('hello' .. ", " .. 'world')

替换为：

print(L('hello') .. ", " .. L('world'))

在指定语言为 “zh_CN” 时，该语句将输出：

你好, 中国

上述功能借助一个简单的模块 i18n 完成，该模块对外提供可配置项如下：

local locale = {
    default_lang = "en_US",     -- default language, READ ONLY
    dir = "locale",             -- parent directory of locale resources
    lang = "",                  -- locale language
    pkg = {},                   -- table contains locale message strings
}

这段小程序 放在了 github 上。

Contents

• INTRODUCTION
• 前几章的一点看法
• 什么是好的设计
• 我关于写代码的一些琐碎的看法

INTRODUCTION

之前没有把 Paul Graham 的 <黑客与画家> 一书读完, 上周就从同事那里把书带回家, 也一直没读, 到这周才有时间读完. 很久没有更新了 (一看时间, 整整 5 个月), 顺便把这篇写了几个月的感想放出来.

前几章的一点看法

这本书前面 8 章讲述的内容, 大多是我并不太感兴趣的, 比如财富, 比如创业. 不是因为它们本身怎么样, 而是因为我一直认为, 它们是没有办法复制的, 我宁可依循我自己的原则. 其中 Graham 的一些观点我比较不能赞同, 有一些我认为可以拿出来讨论.

Graham 用一种颠覆性的观点表达了他对计算机科学的看法. 不得不说, 我并不能完全同意他把计算理论对黑客的重要性等同于颜料化学成分对画家的重要性. 他甚至认为, 黑客新想法的最佳来源, 并非那些名字里有计算机三个字的理论领域, 而是来自于其他创作领域. 与其到计算理论领域寻找创意, 你还不如在绘画中寻找创意.

我无意带着恶意去揣测这与他攻读人工智能博士学位时遭受的挫折是否有关, 显然, 那应该不是一段愉快的记忆, 但这并没有妨碍他成为一名优秀的黑客. 只是, 我们无法也不应该告诉那些试图成为黑客的学生们, 计算机理论基础是多么的无足轻重. 如果需要做一些说明, 我相信大家对黑客的定义或许是有区别的.

我赞同 Graham 所讲的如果你不爱一件事, 你不可能把它做得真正优秀, 要是你很热爱编程, 你就不可避免地会开发你自己的项目. 我也强烈反对多人共同开发同一模块, 说的更直白一点, 我不喜欢别人弄脏我的设计.

从第 9 章开始, Graham 阐述和设计编程相关的内容, 这里就摘抄一些我认为比较重要的 (其实我只是把第 9 章看的比较细致, 其它章节基本都是扫过…).

什么是好的设计

• 好设计是简单的设计

  少即是多. 当你被迫把东西做得很简单时, 你就被迫直接面对真正的问题, 当你不能用表面的装饰交差时, 你就不得不做好真正的本质部分.

• 好设计是永不过时的设计

  数学家哈代说: 丑陋的数学在世界上无法生存. 飞机设计师凯利.约翰逊说: 如果解决方法是丑陋的, 那就肯定还有更好的解决方法, 只是还没有发现而已. 显然, 这些经典的观点也同样适用于编码设计.

• 好设计是解决主要问题的设计

• 好设计是启发性的设计

  其实, 任何设计是都启发性的, 只是坏设计会成为项目中的 "破窗户".

• 好设计通常是有点趣味性的设计

  好的设计并非一定要有趣, 但是很难想像完全无趣的设计会是好的设计.

• 好设计是艰苦的设计

• 好设计是看似容易的设计

  只见贼吃肉, 没见贼挨打. 结合这句话, 你就很容易理解上面两条的含义了.

• 好设计是对称的设计

  这条要看怎么理解了. 对称的危险在于它可以用来取代思考, 在大量使用重复的时候这种危险性更大. 只有知道什么是对称, 为什么需要对称才能做到好的对称.

• 好设计是模仿大自然的设计

• 好设计是一种再设计

  很少有人一次就把事情做对. 犯错误是很正常的事情. 扔掉早期原型是需要信心的.

• 好设计是能够复制的设计

• 好设计常常是奇特的设计

  唯一达到奇特的方法, 就是追求做到好作品, 完成之后再回过头看.

• 好设计是成批出现的

  这是一个残酷的现实, 因为从历史来看, 大师的时代就是大师的时代. 不管你信不信, 反正我是信了.

• 好设计常常是大胆的设计

  优秀作品的秘诀就是: 非常严格的品味, 再加上实现这种品味的能力.

我关于写代码的一些琐碎的看法

最后, 我想插一段自己关于写代码的一些想法. 之前我曾试图分析自己现在为什么会对代码的美感如此纠结, 那是无关乎代码运行的.

我有一个与自己要求完美的内心并不一致的方面, 我往往只是提出自己的要求和看法, 但并不会强制要求别人. 我觉得每个人有他自己的自由和尊严, 尤其是聪明的程序员. 但这与项目管理的要求或许是相悖的, 或许是因为自己比较希望自己的信念得到别人的尊重, 我会尽量尊重别人的观点, 至少表面上是这样.

我写代码的时候容易分心. 往往会因为环境不称心, 而分心去改善, 如果碰壁, 会挫伤我的积极性. 举个例子, 为了阅读代码, 我一定会努力寻求一个自己觉得舒服的编辑器, 于是我会在 Emacs 和 Vim 之间徘徊很久; 在发现 Vim 有很多强大的命令时, 我一定试图掌握更多的命令, 直到自己满意为止; 当我再次用 Vim 打开代码后, 我发现我虽然不需要一个强大的 IDE, 但我至少需要 tags, 在遇到不能跳转的 tag 时, 我会变得很烦躁, 进而无所适从.

在编码和其他一些事情上, 我不喜欢将就, 我希望能够尽我所能, 能够把一件事做好. 而且会为了达到这样的目标, 不惜花费掉很多在他人看来不必要的时间.

写代码的时候, 我不会满足于手动编写简单的 makefile, 我希望自己写出的 makefile 看上去足够 "专业", 于是会转去了解 makefile 规则; 然后会尝试 autotools…

这些毛病的一个直接表现是, 我为了解决过程中遇到的一点不爽, 强迫自己去 fix 它, 结果招致更多的不爽, 然后不断的去 fix 它们. 后果就是, 当我再回头的时候, 发现时间已经过去了很久, 我的精力大量投入其中, 耽搁了本来的工作, 虽然时间不能说是浪费, 但效果却并不是很好.

如果说有时候的付出是值得的, 但另一些时候的做法则有 "睡不着觉怨床歪" 的嫌疑. 比如, 比较烦躁的时候, 会觉得鼠标不给力, 耳机/音箱不给力, 显示器不给力… 转去考虑如何让这些莫名其妙的需求被满足.

其实, 回头想想, 这些东西不但没有让我感到羞愧, 而且得到了我内心的纵容, 至少在目前这段时间里, 我的思想就是这个样子, 也决定了我如何去做.

Contents

• INTRODUCTION
• 好的编写习惯
• 将脚本目录加到 PATH 中
• 如何取得执行文件的绝对路径
• 在 dash 中如何进行字符串替换
• 将 rst 格式文档转换为 blog 可用的 html 代码

INTRODUCTION

shell 脚本虽然不是非常复杂的程序, 但对于首次接触的我来讲, 多少还是有些忌惮. 不过, 接触任何新事物都需要勇敢面对, 逐步树立信心. 我是冲着把脚本写好去的, 所以, 我的目标是能够写出友好, 健壮, 优美的脚本.

为此, 我希望用 shell 实现一些日常中琐碎的工作, 比如, 应用部署, 数据备份, 用户管理 等, 现在把这些内容放在 Google code 上.

好的编写习惯

shell 脚本总是以 #!/bin/sh 作为第一行, 以通知 shell 使用系统中的 shell 解释器. 脚本第二行注释写上脚本名称是一个好习惯.

要想了解地道的 shell 是什么写法, 最好的方式是找系统或者各种手册中现成的脚本代码.

将脚本目录加到 PATH 中

为了以后能更加有效的管理和使用脚本, 可以在 home 目录下创建一个 bin 目录以存放常用脚本 (一般以符号链接的形式出现), 并将其添加到 path 中 ($HOME/.profile). 如此一来, 就可以像使用其它系统命令一样直接使用自己的脚本, 而无需加上脚本路径.

path=$path:$HOME/bin

为了使上述改动立即生效, 需要执行下面的命令:

. $HOME/.profile

如何取得执行文件的绝对路径

由于脚本运行目录由用户指定, 有时需要获取执行脚本的绝对路径 (如访问脚本所在目录的其它文件). 由于脚本通常使用符号链接, 因此需要对文件类型加以判断:

if [ -L $0 ] ; then
    FILE=`readlink $0`
    DIR=`dirname $FILE`
elif [ -f $0 ] ; then
    cd `dirname $0`
    DIR=$PWD
else
    echo "[ERR] Unknown file type: $0"
    exit 1
fi

在 dash 中如何进行字符串替换

写脚本的过程中, 用到 bash 自带的 字符串替换功能, 大意是将域名中的 . 替换为 _, 运行时提示 "Bad substitution". 脚本示例如下:

OUTPUT=${$INPUT//\./_}

自 Ubuntu 6.10 开始, 默认的系统 shell sh(1) 被替换为 dash (the Debian Almquist Shell), 取代了 bash (the GNU Bourne-Again Shell).

dash 没有提供自带的字符串替换功能, 只能借助外部 echo, sed 等命令实现:

OUTPUT=`echo $INIPUT | sed 's/\./_/g'`

将 rst 格式文档转换为 blog 可用的 html 代码

docutils 的 rst2html 可将 rst 格式文档转换为 html 代码, 因为夹杂了大量的 css 等信息, 以及部分细节与我 blog 编写
习惯并不完全吻合, 每次需要再手动整理一下, 这次用 shell 处理了一下, 也算为以后将 rst 格式文档直接生成到 Trac 中做个预研, 以下为全部代码:

# Generate html file name based on rst file.
FILE_RST=$1
FILE_HTML=`echo $FILE_RST | sed 's/\.rst$//g'`".html"
eval rst2html $FILE_RST $FILE_HTML

# Remove redundant meta, css, tag code.
CUR_LN=1
TITLE_LN=`sed -n '/<title>/'= $FILE_HTML`
sed -i "$CUR_LN,`expr $TITLE_LN - 1`"d $FILE_HTML

CUR_LN=`expr $CUR_LN + 1`
HEAD_LN=`sed -n '/<h1 class="title"/'= $FILE_HTML`
sed -i "$CUR_LN, $HEAD_LN"d $FILE_HTML

LAST_LN=`sed -n "$"= $FILE_HTML`
sed -i "`expr $LAST_LN - 2`,$LAST_LN"d $FILE_HTML

sed -i "/<\/\?div/"d $FILE_HTML

# Update individual tags.
sed -i 's/ class="[^"]*"//g' $FILE_HTML
sed -i 's/ class="[^"]*"//g' $FILE_HTML
sed -i 's/\(href="http.*"\)/\1 target="_blank"/g' $FILE_HTML
sed -i 's/h4>/h5>/g' $FILE_HTML
sed -i 's/h3>/h5>/g' $FILE_HTML
sed -i 's/h2>/h4>/g' $FILE_HTML
sed -i 's/h1>/h3>/g' $FILE_HTML
sed -i 's/<pre/<pre class="brush:bash"/g' $FILE_HTML

在上一篇文章中我们已经完成了SVN服务器的布署，本文将在此基础上完成Trac布署及其与SVN的集成。

Trac由Edgewall公司开发维护，使用Python开发，开源，用于软件开发项目管理，提供SVN等版本控制工具的Web接口，与Wiki、bug跟踪集成。

Trac官网提供了完备文档，并有丰富的插件库。

这篇文章详细讲述了Ubuntu 10.04下Trac 0.12的安装过程（不同之处在于其使用Bazaar作为版本控制工具），本文讲述布署基于MySQL的Trac，并完成与SVN的集成。

1. 安装Trac

$ sudo apt-get install apache2 libapache2-mod-wsgi python-setuptools \
 python-genshi mysql-server python-mysqldb libapache2-mod-auth-mysql
$ sudo easy_install Trac==0.12

2. 配置数据库

$ mysql -u root -p
mysql> CREATE DATABASE trac DEFAULT CHARSET utf8 COLLATE utf8_bin;
mysql> exit

3. 配置Trac项目

$ sudo mkdir /home/www/trac
$ sudo trac-admin /home/www/trac initenv

项目名称 [My Project]> <project_name>
数据库连接字符串 [sqlite:db/trac.db]> mysql://root:<password>@localhost/trac

如果您想试用一下这个新的项目环境，请尝试运行Trac独立Web服务器 `tracd`：

  tracd --port 8000 /home/www/trac

恭喜您！

$ sudo trac-admin /home/www/trac permission add admin TRAC_ADMIN

4. 修改数据库表引擎

$ mysql -u root -p

mysql> USE trac;
mysql> ALTER TABLE `attachment` ENGINE = InnoDB;
ALTER TABLE `auth_cookie` ENGINE = InnoDB;
ALTER TABLE `cache` ENGINE = InnoDB;
ALTER TABLE `component` ENGINE = InnoDB;
ALTER TABLE `enum` ENGINE = InnoDB;
ALTER TABLE `milestone` ENGINE = InnoDB;
ALTER TABLE `node_change` ENGINE = InnoDB;
ALTER TABLE `permission` ENGINE = InnoDB;
ALTER TABLE `report` ENGINE = InnoDB;
ALTER TABLE `repository` ENGINE = InnoDB;
ALTER TABLE `revision` ENGINE = InnoDB;
ALTER TABLE `session` ENGINE = InnoDB;
ALTER TABLE `session_attribute` ENGINE = InnoDB;
ALTER TABLE `system` ENGINE = InnoDB;
ALTER TABLE `ticket` ENGINE = InnoDB;
ALTER TABLE `ticket_change` ENGINE = InnoDB;
ALTER TABLE `ticket_custom` ENGINE = InnoDB;
ALTER TABLE `version` ENGINE = InnoDB;
ALTER TABLE `wiki` ENGINE = InnoDB;
mysql> SELECT table_name, engine FROM information_schema.tables
WHERE table_schema=DATABASE();
mysql> exit

5. 布署Apache

$ sudo trac-admin /home/www/trac/ deploy /home/www/trac/deploy
$ sudo chown -R www-data /home/www/trac
$ sudo vim /etc/apache2/sites-available/svn

        # 往文件中加入以下内容, 使用与SVN相同的用户验证
        WSGIScriptAlias /trac /home/www/trac/deploy/cgi-bin/trac.wsgi
        <Directory /home/www/trac/deploy/cgi-bin>
                WSGIApplicationGroup %{GLOBAL}
                Order deny,allow
                Allow from all
        </Directory>

        <Location /trac/login>
                AuthType Basic
                AuthName "Trac Login"

                AuthBasicAuthoritative off
                AuthUserFile /dev/null

                Auth_MySQL on
                Auth_MySQL_Authoritative on
                Auth_MySQL_Host localhost
                Auth_MySQL_DB svn
                Auth_MySQL_User root
                Auth_MySQL_Password <password>
                Auth_MySQL_Password_Table user
                Auth_MySQL_Empty_Passwords off
                Auth_MySQL_Encrypted_Passwords on
                Auth_MySQL_Username_Field name
                Auth_MySQL_Password_Field passwd
                Auth_MySQL_Encryption_Types PHP_MD5

                Require valid-user
        </Location>

$ sudo a2enmod auth_mysql
$ sudo a2ensite svn
$ sudo /etc/init.d/apache2 restart

6. 完成Trac与SVN的整合

将SVN配置到Trac的配置文件trac.ini中。找到repository_dir配置项：

$ sudo vim /home/www/trac/conf/trac.ini

repository_dir = /home/www/svn

访问http://www.svn.com/trac，大功告成！

由于不同的Linux版本服务器布署方案不尽相同，本文不保证对Ubuntu之外的环境有效，事实上，由于Apache服务模块实现和使用不同，本文的方案仅适用于Ubuntu，如果在其它环境下，建议参考其它文章。

本文使用vim作为配置文件编辑器，对vim不熟悉的读者可以使用nano或者其它。

1. 安装Apache + MySQL

我所使用的服务器版本为（使用$ uname -a查看）：Linux 2.6.32-24-server x86_64 GNU/Linux，在安装系统时已经安装了Apache、MySQL。或者使用下述命令进行安装：

$ sudo apt-get install apache2 mysql-server

如果在启动Apache时遇到端口冲突，可能是已安装的其它Web服务器（如NGINX）占用80端口引起的，可以修改相应配置文件，换用其它端口，如8080。如果出现下面的提示：

apache2: Could not reliably determine the server's fully qualified domain
         name, using 127.0.1.1 for ServerName

需要往httpd.conf（默认为空）文件中添加一行：

$ sudo vim /etc/apache2/httpd.conf

ServerName localhost

2. 安装subversion

安装subversion及对应Apache的服务器模块和MySQL用户认证管理模块，如果使用基本认证，则不必安装libapache2-mod-auth-mysql，考虑到用户信息是很多服务的一个基本要素，使用数据库进行管理是必要的。

$ sudo apt-get install subversion libapache2-svn libapache2-mod-auth-mysql
$ sudo a2enmod auth_mysql

3. 创建subversion项目

创建svn项目（选择一个合适的目录），修改用户以便可以通过HTTP访问：

$ sudo svnadmin create --fs-type fsfs /home/www/svn
$ sudo chown -R www-data /home/www/svn

4. 创建用户验证数据库

$ mysql -u root -p

mysql> CREATE DATEBASE svn;
mysql> USE svn;
mysql> CREATE TABLE user (
name char(30) NOT NULL COMMENT '用户名',
passwd char(32) NOT NULL COMMENT '密码',
PRIMARY KEY (name) )ENGINE=InnoDB DEFAULT CHARSET=utf8;
mysql> INSERT INTO user VALUE ('admin', MD5('admin'));

此处需要注意，密码域一定要足够宽，本文将使用MD5密码（32字节），如果使用SHA1，则需要40字节。

5. 配置虚拟主机

为提供HTTP访问svn，并提供MySQL用户验证（Ubuntu与Linux其它版本在配置上是有区别的），需要配置虚拟主机。本文提供局域网布署方案，使用指定的主机名www.svn.com（对应IP地址为192.168.1.2）：

$ sudo vim /etc/hosts

192.168.1.2      www.svn.com

编辑虚拟主机的配置文件（可以基于Apache提供的默认配置进行修改）：

$ sudo vim /etc/apache2/sites-available/svn

<VirtualHost *:80>
        ServerName www.svn.com
        ServerAdmin admin@svn.com
        DocumentRoot /home/www
        ErrorLog /home/www/log/svn_error.log
        LogLevel warn
        CustomLog /home/www/log/svn_access.log combined

        <Directory />
                Options FollowSymLinks
                AllowOverride None
        </Directory>

        <Directory /home/www/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride None
                Order allow,deny
                allow from all
        </Directory>

        <Location /svn/>
                DAV svn
                SVNPath /home/www/svn

                AuthType Basic
                AuthName "Subversion Repository"

                AuthBasicAuthoritative off
                AuthUserFile /dev/null

                Auth_MySQL on
                Auth_MySQL_Authoritative on
                Auth_MySQL_Host localhost
                Auth_MySQL_DB svn
                Auth_MySQL_User root
                Auth_MySQL_Password <password>
                Auth_MySQL_Password_Table user
                Auth_MySQL_Empty_Passwords off
                Auth_MySQL_Encrypted_Passwords on
                Auth_MySQL_Username_Field name
                Auth_MySQL_Password_Field passwd
                Auth_MySQL_Encryption_Types PHP_MD5

                Require valid-user
        </Location>
</VirtualHost>

6. 启用站点

$ sudo a2ensite svn
$ sudo /etc/init.d/apache2 reload

在浏览器中打开http://www.svn.com/svn，提示输入用户名及密码后，可以看到SVN目录树，大功告成！

我一直希望能够推进研发工作流程的规范化，也在不断尝试用Web完成若干工作，并计划在时机成熟之后推广到其它部门。不想这次另一个项目的程序和我们的策划不约而同地换服务器，都希望使用SVN代替AB，于是用Ubuntu架了两台服务器，但如何能够让策划自己管理这台服务器在我预想之外，只好把文档写的更加繁冗，尽量让没有使用过Linux的用户也能读懂。

Web前端开发听上去并不是一份牛逼的工作，但如果你的Web前端开发搞的很牛逼，那么你一定是做到了Steve Souders提到的那14条，个人认为如果前端开发有什么所谓的金科玉律，应该就是指他们了。Yahoo!后来还据此专门为Firebug开发了一个插件：YSlow。

闭门造车不是个好主意，Web QQ 2.0的前端我认为做的很有创意，所以我准备停下来，认真分析一下其实现。在开始分析之前，先来了解一些基础知识。

基础知识

那些不得不说的工具

“工欲善其事，必先利其器”，我所使用的分析工具简单而强大，上文已经提到过：Firebug + YSlow，显然，你还需要一个FireFox（推荐使用FX 3.6，4.0的组件比较少吧？）。

一次页面访问的执行顺序是怎样的？

当用户通过浏览器访问指定页面（url）时，浏览器将其包装为一个http请求，该请求除包含待访问页面地址及若干参数（可选）外，还包含了用户的浏览器及操作系统信息，语言、编码信息，缓存信息及其它一些浏览器配置信息等。

这是请求http://web2.qq.com/时的头信息（部分）：

GET / HTTP/1.1
Host: web2.qq.com
User-Agent: Mozilla/5.0 (X11; U; Linux i686; zh-CN; rv:1.9.2.10) Gecko/20100915 Ubuntu/10.04 (lucid) Firefox/3.6.10
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
If-Modified-Since: Wed, 29 Sep 2010 10:50:21 GMT

这是对上述请求的响应的头信息：

HTTP/1.1 304 Not Modified
Server: nginx
Date: Thu, 30 Sep 2010 03:18:22 GMT
Last-Modified: Wed, 29 Sep 2010 10:50:21 GMT
Connection: close
Expires: Thu, 07 Oct 2010 03:18:22 GMT
Cache-Control: max-age=604800

具体的响应内容，就是我们能够看到的页面了。但由于一次页面访问可能导致多次发送http请求（事实上，由于图片、脚本、样式表的存在，这几乎是必然的），页面上的内容并不会一次全部加载完成，而是陆续加载。

关于http请求的更多内容见这里。

一次http请求的执行顺序是怎样的？

从浏览器发出http请求，到收到服务器响应，整个过程通常可能持续几毫秒到几秒不等的时间，其顺序如下：

1. 域名解析：时间一般比较短（n ms)，取决于所访问站点隶属的DNS服务器及网络环境。
2. 建立连接：时间一般稍长（n*10^1 ms），取决于所访问站点对应服务器及网络环境。
3. 发送请求：时间一般很短（接近于0 ms），取决于本地浏览器。
4. 等待响应：时间一般稍长（n*10^1 – n*10^3 ms），取决于所访问站点对应服务器的处理效率及网络环境。
5. 接收数据：时间一般稍长（n*10^1 – n*10^3 ms），取决于请求内容的多少及网络环境。

下面将根据http请求发送顺序具体分析webqq 2.0的http请求。

http请求分析

分析之前，先看一张图，这是http请求序列中的一小部分（由于Web QQ 2.0资源更新比较频繁，内容不尽相同，但影响不大）。后面还会有更加详细的分解：

我们注意到图中有颜色为蓝色和红色的两条竖线，蓝色线表示页面的所有DOM（文档对象模型）加载完成，为DomContentLoaded事件的触发点，jQuery的$(document).ready()将开始执行，IE不支持该事件；红色线为文档load事件的触发点，意味着所有内容加载完毕（含图片资源等），window.onload()将会被执行。

1. 加载页面

首先看一下具体响应页面内容（这也是上图中的第一个http请求）。为了方便，我直接将分析内容以注释形式夹在其中（位于对应内容上方）：

<!-- 这是html5的文档标识，web qq 2.0明显已经为html5的到来做好了准备 -->
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 针对IE8，使用IE7进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="keywords" content="QQ、QQ网页桌面、WebQQ 2.0、web QQ、网页聊天、网页QQ、QQ被封、QQ空间、腾讯微博、QQ邮箱、腾讯新闻、QQlive、QQ地图、QQ校友、QQ团购" />
    <meta name="description" content="WebQQ2.0以个人化门户为理念，致力于满足用户聊QQ，看资讯、写微博、玩游戏、听音乐、拼团购、收发邮件及网络存储等各种网络生活需求，打造一站式个人网络生活平台。" />
    <meta name="copyright" content= "腾讯公司" />
    <!-- 主要是针对移动终端等，禁止用户缩放 -->
    <meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, width=device-width, user-scalable=no">
    <title>WebQQ 2.0</title>
    <!-- 设置各种环境下的图标 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
    <link rel="apple-touch-icon" href="/webqq.png"/>
    <!-- 加载jet库 -->
    <script type="text/javascript" src="./js/jet.all.js?t=20101014002"></script>
    <!-- 加载样式表 -->
    <link type="text/css" rel="stylesheet" href="http://hp.qq.com/webqqpic/style/jet.all.css?t=20101014002" />
    <link type="text/css" rel="stylesheet" href="http://hp.qq.com/webqqpic/style/qqweb.main.css?t=20101014002" />
    <link id="qqwebSkin" type="text/css" rel="stylesheet" href="about:blank" />
    <script type="text/javascript">
        Jet().$package(function(J){
            // 加载主题样式
            var themeId = "theme_wood1";
            J.out("themeId:  "+themeId)
            J.http.loadCss("http://hp.qq.com/webqqpic/style/" + themeId + "/qqweb.theme.css?t=20101014002",{node:J.dom.id("qqwebSkin")});
        });
    </script>
</head>
<body>
    <!-- 需要开启JavaScript -->
    <noscript>
        <div class="noscript">
            你好，需要浏览器开启JavaScript功能来帮助你使用WebQQ2.0。<br/>
            请设置浏览器开启 JavaScript功能，然后重试。
        </div>
    </noscript>
    <!-- 针对ios触屏用户，添加触屏响应 -->
    <iframe id="touchpad" src="./touchpad.html"></iframe>
    <div id="desktop" class="EQQ_Container">
        <div id="topBar">
            <div class="topBar_bg">
                <a title="20101014002" id="logo" href="http://im.qq.com/webqq" target="_blank"></a>
                <div id="qqBar" class="qqBar">
                </div>
            </div>
        </div>
        <div id="mainPanel">
            <div id="sideBarReplacement" class="sideBarReplacement">
            </div>
            <div id="toggleBar" class="toggleBar toggleBar_show" title="打开侧边栏"></div>
        </div>
        <div id="toolBar">
            <div class="toolBar_bg">
                <div id="statusBar">
                    <div id="settingCenterButton" class="settingCenterButton"></div>
                </div>
                <div id="taskBar"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://pingjs.qq.com/tcss.ping.js"></script>
    <script type='text/javascript'>
        Jet().$package(function(J){
            if(J.platform.iPad) document.querySelector('#touchpad').style.display = 'block';
        });
        if(typeof(pgvMain) == 'function'){
            // 与页面访问及缓存控制相关，腾讯平台共用的一个统计功能，暂且放下
            pgvMain();
        }
    </script>
    <script type="text/javascript" src="./js/qqweb.all.js?t=20101014002"></script>
</body>
</html>

如果在没有缓存的情况下，下载该页面（大约1.4K）可能耗费n ms的时间，资源的加载时间与其大小成正比（同时受当时网络环境影响）。

通过Firebug查看该页面效果是这样的：

2. 加载资源

正如我们在前面的序列图中看到的，浏览器在处理返回的页面过程（从上到下顺序执行，遇到错误将中止）中，该页面所使用（直接使用）的脚本及样式表会依次加载。加载过程是异步的，后续资源不需要等待前面的资源加载完成，但如果遇到内联或外联脚本，则需等待脚本执行后才能继续。因此，如果可能，将脚本置于页面底部是明智的选择：

• Line 20: http://web2.qq.com/js/jet.all.js?t=20101014002
• Line 22: http://hp.qq.com/webqqpic/style/jet.all.css?t=20101014002
• Line 23: http://hp.qq.com/webqqpic/style/qqweb.main.css?t=20101014002
• Line 66: http://pingjs.qq.com/tcss.ping.js
• Line 78: http://web2.qq.com/js/qqweb.all.js?t=20101014002

3. 执行页面

接下来便是执行脚本以及加载各DOM所需的资源并完成元素绘制。

• Line 25：内联脚本功能为加载当前使用的主题样式，并将所加载的样式表嵌入到Line 24对应的结点中。
• Line 43：针对触屏用户添加触屏响应，将其置入一个iframe中。
• Line 47：样式填充——加载logo（背景图片元素，由qqweb.main.css给出）。
• Line 75：内联脚本功能为处理缓存（cookie）并发送统计信息。

通过上面的http请求顺序，我们也能够看出：页面执行是从上到下的，DOM元素（如Line 47的logo）必须等到前面的脚本（Line 25）执行完毕才能开始绘制，这也印证了我们上文提到的尽量将脚本放在页面底部的必要性。当然，如果脚本本身不需要立即执行（如这里的jet库），放在页面顶部反而是必须的，后续脚本的执行依赖它们，需要等待其加载完成才能继续执行，前面序列图的时间线已经很好的证明了这一点。

Web QQ的实现逻辑全部位于上文分析的页面底部的javascript文件qqweb.all.js中，其实现基于JET。

欲知后事，且听下回……