2010-7-30 Update: 对于”Transfer-Encoding:chunked”HTTP响应头，虽然说它可以使得服务器可以以小块数据包的形式连续的发送HTML内容回来，或许有些人会认为：为什么不让他应用于Js，CSS呢，这样使得JS，CSS可以边加载边解析。理论上是可以的，但是实际是会崩溃的，在JS，CSS的响应头中应用它的时候，会造成JS，CSS加载失败，很悲剧的事情…… 2010-6-2 Update: 今天捣鼓了下设置HTTP文档的响应头Transfer-Encoding:chunked。对于Transfer-Encoding的作用，在《高性能网站建设指南》中所说的就是“块编码”，它是HTTP/1.1引入的，使用它HTML文档可以被分成多个数据块立即返回，而不需要浏览器知道数据的大小和确定响应的结束时间，这就允许浏览器在下载数据包后马上进行解析，使得页面的加载速度更快。而HTTP/1.0是通过Content-Length头来发送的，而且还是将HTML一整块的发送，所以浏览器在响应结束之前，不会开始渲染页面和下载资源。 可是经过一上午的折腾，给页面加上了这个HTTP头之后，出错了，Chrome下返回错误“ERR_INVALID_CHUNKED_ENCODING”。郁闷了很久，之后在HTTPWatch官方博客上看到关于这个的文章《Content Length & Transfer Encoding》，在文章的Example中提到了一句话提醒了我：“if you are accessing this page through a proxy it … 了解更多
这几天在思索口碑网的CSS Minify的实现方式，询问之后，悟出点原理，示例： 上面的示例中，将三个css文件压缩为一个css文件，减少了两个HTTP请求，性能上确实能提高不少，特别是对于访问量大的页面。但是之前一直在思索两个问题： 文件名中包含不规则的字符，在windows操作系统下是不允许作为文件名的。 浏览器的缓存怎么处理。 通过一些时间摸索和跟同事进行探讨，迷雾渐渐清晰了。对于一个问题，服务器端是进行了urlrewrite了，比如上面图示的url链接其实是障眼法，是给别人看是这么个东东（它包含了一些版本和文件名的信息，使用版本号的一个好处就是可以在版本升级的时候可以及时更新缓存，保持更行的css文件的及时生效），其实是服务器端会将它rewrite到另外一个文件里。这个文件是会自动通过参数整合三个css文件到一个css文件里，最后download到客户端。那么对于第二个问题也就好解释了，url不变，浏览器就会从缓存里读取。 问题想清楚了，偶也就开始思索着自己去怎么实现这么个功能，下面是我摸索过程中所想到的办法（经测试，都不太理想）：
今晚在校验译本的时候，查看到一些优化HTMLCollection对象的方法，自己开始也对此有些许疑惑，就动手测试起来，首先想到的是把通过document.getElementsByTagName等等类似的方法获得的HTMLCollection对象先储存进数组里，之后来操作数组。这跟普通的缓存HTMLCollection对象的length属性来进行比较，结果很吐血，也很兴奋：我用多了一个循环的操作（把HTMLCollection储存进数组）来跟缓存length的相比，耗时居然比后者少，操作越多，效果越明显。示例如下： [javascript] onload = function(){ Watch.start("Store length"); var p2 = document.getElementsByTagName("p"); //第一次循環使用 for (var i = 0, l = p2.length; … 了解更多
昨天接触到这篇文章《Best Practices for Speeding Up Your Web Site》，觉得太经典了，自己不由自主的想要翻译过来，鉴于本人的英语水平，只翻译了其中的某些条目，有错误在所难免。更多的还是推荐浏览原文。 首先的说明的是：优化页面显示速度，就是不管HTML内容多与少，都要尽量在最快的速度显示出来，这就是Front-end engineers首要明确的意图。所以下面所提及的优化方式，都是从这一目的出发的。下面的翻译的一些条目： 1.最小化HTTP request请求。因为一个页面显示所花费的时间很多都是花费在scripts，stylesheets，images，flashs等等，这些都会通过http request来加载，这些大概占用了页面加载时间的70%-80%，因此，减少HTTP request能很大的优化页面的加载速度。 2.使用第三方的代理服务器来加载scripts，stylesheets等等，这能降低本主服务器的负载，比如google ajax api提供的目前流行的js库：jquery，extjs，prototype，MooTools等等 3.在头部声明cache的expire。在用户第一次view页面的时候会加载全部的内容，包括html以及scripts，stylesheets，images等等，设置了cache的expire一方面能使得用户在下次view页面的时候能从缓存里读取一些数据，减少了HTTP Request的请求数，加快页面的显示。不过这要看用户view页面的回头率是否频繁。设置了cache的expire也要适当。一方面能加快加载速度，另一方面也有助于在cache的expire过期的时候使得用户获得页面的最新数据信息。 4.使用压缩技术（Gzip … 了解更多
在编写javascript的时候，循环是我们经常会进行的操作，尽管目前编写循环的方式多种多样，但是在性能方面还是有区别的，下面我们来看看都有那些循环方式。 第一种：普通的方式，这种方式的性能是比较差的，因为在每次循环的时候都需要计算数组的length一次，在javascript的数组操作中，对length属性的操作的性能是比较慢的，所以尽量在循环内避免使用过多的length操作，包括shift，unshift，pop等等。 [javascript] //假如arr是一个很大的数组 for(var i=0;i<arr.length;i++){ …. } [/javascript] 第二种：缓存数组的length属性,这中方式优化了不少性能，通过一个变量来缓存数组的length，这样每次循环就不需要重复计算数组的length值了。 [javascript] for(var i=0,l=arr.length;i<l;i++){ …. } [/javascript]
Writing Efficient CSS for use in the Mozilla UI 了解更多