性能 256色 从神飞那里借了本《高性能网站建设进阶指南》，粗略读了一遍，最重要的收获是第10章图像优化纠正了我对256色的认识 Truecolor versus palette image formats Using the RGB color model, how many distinct colors can you represent in a graphic? The answer is more than 16 million: 255 * 255
性能 Building Performance Into the New Yahoo! Homepage via Building Performance Into the New Yahoo! Homepage by Nicholas Zakas, Yahoo!
性能 background:url(#)的性能问题 很久之前写了使用 background:url(#) 解决 IE bug，原理是请求一张不存在的图片，不过写法有些问题。 写为 background:url(#) 会增加一个http请求，比如当前css的URL为 http://imgcache.qq.com/qzonestyle/project/css/xxx.css 则会多请求一次 http://imgcache.qq.com/qzonestyle/project/css/xxx.css# 和以下类似（
CSS Data URI&MHTML: 用还是不用？ YAHOO!的性能专家Stoyan Stefanov先后发布了 data:urls – what are they and how to use them MHTML – when you need data: URIs in IE7 and under Data URIs, MHTML and IE7/Win7/Vista blues Uncompressed data
性能 CSS 换行符对 Gzip 的影响 之前做过一个css压缩工具，其中一点是把换行符都去了，有同事反映这个做法过于极端，加上服务器端会进行gzip，这个换行符到底要不要去掉呢？于是拿了个项目中的文件简单测试了一下（css中的注释已去除）： 去除换行符保留换行符gzip前46.4KB48.0KBgzip后8.40KB8.58KB可见，去除换行符对性能来说还是有好处的，不过前提是注意这些[网站优化原则](http://www.99css.com/196)。
Let's make the web faster [转译]优化浏览器渲染 ISD Webteam的大布同学（twitter：@tc_bryanzhang）牺牲了自己大量的xx时间翻译了Page Speed系列中的Optimize browser rendering，因其blog还在重新打造当中，所以偶这里先转载了，以下是翻译全文： 优化浏览器渲染 资源被下载到客户端后，浏览器仍需加载，解释，并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面，就可以提升客户端的性能。 使用高效率的CSS选择器 避免CSS expressions 将样式表放在页面顶部 指定图像尺寸 使用高效率的CSS选择器 概述 避免低效率的匹配大量元素的键选择器【key selectors】可以加快页面渲染。 详细信息 当浏览器解析HTML时首先构造一个内部文件树来代表所有显示的元素。
OOCSS [翻译]OOCSS FAQ 原文：http://wiki.github.com/stubbornella/oocss/faq（翻译时为Version 28） 翻译：ytzong 在OOCSS中怎么定义“对象”？ 对象类似JAVA中的类，保持着OO的特征。 一个CSS对象由4部分组成： 可能是一个或多个DOM节点的HTML 由wrapper节点的class名开始的CSS样式声明 类似于背景图片和显示用的sprites组件以及 JavaScript行为，监听或者与对象关联的方法 这可能令人费解，因为每个CSS class不是其自身必要的对象，但可以是一个wrapper class的一个部件。比如： <div class="mod&
OOCSS [翻译]Object Oriented CSS 什么是面向对象的 CSS 框架？工具？哲学？ Object-oriented CSS is a coding paradigm that styles “objects” or “modules”—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles. 很像语言的进化 令
Let's make the web faster [翻译]加速 JavaScript：处理 DOM 原文：Speeding up JavaScript: Working with the DOM 作者：KeeKim Heng, Google 页面工程师 翻译：ytzong 当制作 RIA(Rich Internet Application) 时，我们使用 JavaScript 来改变或增加元素。这是靠 DOM (Document Object Model 文档对象模型) 来完成的，这是如何影响 app
Let's make the web faster [翻译]用Page Speed Activity捕获并分析浏览器渲染 原文：Capturing and analyzing browser paint events using Page Speed Activity 作者：Bryan McQuade, 软件工程师 翻译：ytzong 安装 Page Speed 是一个 Firebug/Firefox 扩展，安装地址：http://code.google.com/speed/page-speed/download.html
HTML 用 HTML 5 来提升性能 Google 网站管理员 Jens Meiert 发表了一篇《Using HTML 5 for performance improvements》，大部分内容在《Reducing the file size of HTML documents》(中文版)中都有提及，新增的部分为async(和 defer)，以下为该段的翻译： async 和 defer 使用在 script 元素上。 要解释为什么这些属性会提升性能，最好是看一下未使用时发生了什么
OOCSS [翻译]驯服CSS选择器--健壮我们的样式表 PPT:Taming CSS Selectors 作者：Nicole Sullivan 翻译：ytzong CSS 文件的大小和所引起的 HTTP 的请求数 是 CSS 性能的最关键因素 回流(reflow)和渲染时间 (非常！)没那么重要 副本(duplication)比陈旧的规则(stale rules)更糟糕 因为我们有工具处理后者 定义缺省值 不要在每处都重复编码 不好的： #weatherModule h3{
性能 IE 团队的前端性能优化建议 2009-3-18 ~ 2009-3-20，微软面向 Web 开发和 Web 设计人员的 MIX 09 年度大会在拉斯维加斯举行，本届大会的主题是”The Next Web Now”，关于开发技术和设计怎么更加有效结合起来，服务未来互联网的发展趋势。120多场精彩的课程，3000多来自各国的专家参会。 视频及PPT在此下载，虽然其中多数是微软的产品宣讲，不过也有一些很有价值的分享，比如： C23FWindows Internet Explorer 8 in the Real World: How Is
Let's make the web faster [翻译] gzip 压缩原理 译注：本打算翻译这篇文章的，搜了一下已经有人翻译过了，不过网站失效，通过快照获取了部分内容，在此基础之上进行了一些修改，感谢 bloglei。 原文：How gzip compression works 作者：Kevin Khaw & Eric Higgins，Google 网站管理员 翻译：bloglei &ytzong 译注：以上是 youtube 视频，请翻墙观看（文中图片调用自 picasa，若显示不了也要翻墙）
Let's make the web faster [翻译]减少 reflow 原文：Minimizing browser reflow 作者：Author: Lindsey Simon 翻译：ytzong 浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做 reflow。由于 reflow 是一种浏览器中的用户拦截（user-blocking）操作，所以了解如何减少reflow 次数，及不同的文档属性（DOM 层级（DOM depth），CSS 效率，不用类型的 style 变化）对
HTML [翻译]减小 HTML 文件 原文：Reducing the file size of HTML documents 作者：Jens Meiert & Kevin Khaw， Google 网站管理员 翻译：ytzong 改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法，比如：硬压缩（rigid compression），acupuncture-like ID 及改变 class 名（译注：这一句不是很确定，
HTML [翻译]谨慎使用 Iframe 原文：Using Iframes Sparingly 原作者：Steve Souders 翻译：ytzong 使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示iframe 是多么耗费性能： 使用 iframe 的页面通常没有这么多 iframe，所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。
性能 谨慎使用 CSS Sprites CSS sprites 是网站速度的优化很重要的一环，但也有其对性能的不利之处。 Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到： CSS sprites 的最大问题是内存占用。非精确构造的 sprite 图片会占用意想不到的内存空间。以 WHIT TV 网站为例，这里是一张sprite 图片，1299×15,000 的png，已经经过很好的压缩，实际下载大小只有26K左右，但是浏览器不会转换压缩的图像数据。
性能 [翻译]简化CSS选择器 原文：Simplifying CSS Selectors 原作者：Steve Souders 翻译：ytzong 本文是《EvenFaster Web Sites: Performance Best Practices for Web Developers (Paperback)》的最后一章。上篇帖子《Performance Impact of CSS Selectors》（中文版）最后提出了一段假设： 对大多数网站而言，优化CSS选择器活得的性能提升很小，不值得去计较。有些配合Javascript交互的CSS规则会明显的拖慢页面。