前段时间，和朋友共同打造的新网站http://www.xinlukou.com终于上线了。我和朋友一直从事IT行业，技术方面虽说不能算是出类拔萃，但是时间既久，基本的能力和经验还是积累的不少;但是在这次新网站从构思到完成的工程中，还是遇到了很多的困难，走了很多的弯路。这里把零零碎碎的一些经验总结一下，与大家分享，也希望能听到大伙更有新意的意见。
1。首页内容的搭配
这里往往是一个矛盾的地方：新网站刚推出的时候，最需要的是吸引网民的注意力，最有特色的功能和最个性化的模块放在首页可以让人一眼就发现，方便用户尽快发现你的网站的特色所在。但是首页是一个网站的门面，过多的HTML，脚本，图片会让首页不堪重负;如果一个10秒都打不开的页面，怎么可能提起用户的兴趣呢?所以这是个需要斟酌的地方。放在首页第一眼可见的内容应该是最需要向外宣传的内容，其他的可以用tab形式分到其他部分;而加载的时候实施“所见即所得”的原则，尽可能对用户第一眼视野之外的东西进行延迟加载。
这里对“延迟加载”的方式做一下小补充。对网页加载速度影响最大的一般是两个方面：request请求数，和内容size;一般来说，图片是页面加载的瓶颈所在，图片的size毫无疑问一般都大于文本;而一个美观绚丽的网站，图片的数量都不会太少，这些就给也面添加了很多的请求数，使页面的访问如同龟速。针对这些情况，延迟加载(lazyload)就是很必要的。用到延迟加载的地方一般有两处，tab和滚动条：tab很明显，起始的时候用户只会看到一个tab，那么其他tab的内容，尤其是图片就可以在tab切换过去，需要显示的时候再做处理，一般放在tab的切换事件中做就行了(这一点由于一些客观原因，现在自己的网站也做得不是很好，就不献丑给大家举例了，^_^);滚动条的相对来说比较明显，多数情况下是针对图片来的，如网站中的http://www.xinlukou.com/help_Index.htm，和http://www.xinlukou.com/help_Detail.htm两个帮助页面，图的数量非常多，就遵循了“所见即所得”的原则，滚动条滚到的时候，才跟据现在的位置去加载应该加载的图片。在处理之前，这两个页面是很慢的，处理过后速度就非常令人满意了。具体的做法网上很多，原理也很简单，这里就不赘述了。(提示一下：不同浏览器的滚动条位置计算方式是不一样的，需要做多版本适应的时候，要注意这一点。)
2。页面的优化
这个话题其实有一部分已经在第一点里说到了，但是只做到前面说的那些还远远不够。其实一个页面如果让它速度提升，用户体验更好，是需要做很多事情的。
1)脚本的优化
脚本的优化一般来说有几个需要做的。第一个是size，编写脚本的时候，程序员自然希望代码美观好看，可能编写好的脚本都是缩进一致注释整齐的，可是。。。浏览器会看注释么?当然不会，多一个字符自然就会增加一点解析的时间。那么对脚本的优化和size缩减会有效的提高页面的加载速度。首先把所有多余的空格和回车去掉(是多余的，必须的就不用了，呵呵。);另外一些简写对缩短脚本的size是非常有效的，如：document.getElementById，每次看到一堆这种东西在页面，不觉得烦么?在最常用的2个js框架JQuery和prototype中，这个都是做得很好的，一个美观醒目的$就解决了一切问题;虽然有时候你觉得功能简单，无需引入一个那么大的js库，那也完全可以自己做一个小函数，如function $(id){return document.getElementById(id);}来解决问题，不要偷懒，一个小函数对代码size的影响可能比你想象中要大很多。
又比如对于逻辑判断式：if(xxx){xxx}else{xxx},完全可以用 exp?do 1:do 2 类似的形式来替换。
另外是一些常用的写法，其实可以有所改进，下面举几个常见的例子：
如对数组ary循环：一般习惯写成for(var i=0;i
又比如判断变量v是否为null，常规的写法是if(v == null)，其实可以写得更简单些: if(!!v)即可。
还有一些就属于奇技淫巧了，比如对小数取整，如var v = 123.456;想获得123这个值，可能有的人就直接去先转成字符串，再截取小数点等等。其实有个办法很方便，v = v>>>0;就可以了;还有数字与字符串的互相转换，用parseFloat或parseInt之类就太不好看了，比如“123”转换数字，直接var v = +"123";就可以达到目的了。
这样的技巧其实很多，就看平时是否对这些有足够的积累。另外关于JavaScript，还有一种很流行的压缩算法，大致的处理方式，就是将变量，函数名用最简单的a,b,c,d来代替，缩减整体的长度，最后拼成完整的代码字符串以后，用eval执行之，让它产生一样的效果。但是脚本压缩是否值得，是个见仁见智的问题。因为压缩的代码，的确在size上有了进步;但是鉴于eval的低效，整体执行时间上能有多大的改观是要根据实际情况来判断的。要对自己处理的脚本有一个充分的了解。这个在网上的资料也很多，就不多罗嗦了。
有一点要注意的是：简洁往往是建立在可读性降低的情况下的，这个要权衡取舍;另外开发版本和发行版本分离开是个好习惯，否则一旦版本发生混乱，后面的麻烦事就多了，呵呵。
* css也有上面说的缩减size的需要，不过css由于本身没有逻辑，只要将多余的空格和换行去掉就可以。
2)脚本和css的合并
size上做完工作，就需要考虑另外一个问题了：如何减少页面一次加载的request数?常见的做法就是把脚本和css分别合并到一个大文件。合并的文件的时候仍然要考虑到开发和发布两个方面的问题：全部和并到一个文件，访问最好，但是修改一处可能导致所有页面大文件全部要重新生成，所有一般还是建议将公用的部分合并起来，其他本页面单独的部分再合并一个。
另外还有一个小技巧，就是css文件和JavaScript文件是可以合并在一个大文件的，主要是利用css解析器和JavaScript解析器对不同注释符号的解析差异来实现的。原理其实很简单。具体的可以参考MSDN上的这篇文章：http://blogs.msdn.com/b/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx
(未完待续-----)