期待已久的《高性能网站建设进阶指南》终于出来了。作为口碑前端的一员，都感觉灰常Happy。 相信大家都熟悉那本《高性能网站建设指南》，而作为姊妹篇的《高性能网站建设进阶指南》也绝不会逊色于前者。通过校验该书的机会，也学习到了非常多关于web前端优化的具体的最佳实践，包括图片优化、Load Javascript without block，编写高效的Javascript、css代码，后加载（Initial Payload），拆分window.onload代码等等最佳实践，还介绍了众多的前端开发工具。可以总的来说：《高性能网站建设指南》是一本理论的书，而《高性能网站建设进阶指南》则是实践篇。 它确实是一本值得去反复阅读的好书！！
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 … 了解更多
今晚在校验译本的时候，查看到一些优化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; … 了解更多
在编写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 了解更多