性能 - 99css

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 * 255 (or 224) gives you 16,777,216 combinations. Image formats

性能

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# 和以下类似（详见解决IE6.0.2800压缩HTTP数据Bug之草记） http://imgcache.qq.com/qzonestyle/project/css/xxx.

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 in base64? Probably not NCZ也有 Data URIs explained 引起了我们对data uri的关注，国内的也有一些不错的文章，

性能

Balance is The Key to Life

via Please Don’t Touch the Slow Parts

性能

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时首先构造一个内部文件树来代表所有显示的元素。然后浏览器根据标准的CSS级联、继承和排序规则，为元素指定匹配的各种样式。在Mozilla里的执行情况(可能在其他浏览器也是这样)，CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则，从最右边的选择器开始（称为“键”【Key】

性能

The Life of Page 2.0

via The performance roadmap

性能

Websites On Speed

via Websites On Speed

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"> <div class="inner"> <div

OOCSS

Web 开发哲学

via Object Oriented CSS

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. 很像语言的进化令 CSS 更强大有什么不同？ ul{...} ul li{...} ul li a(②但是，结构在这里)

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 的速度呢？处理 DOM 会使浏览器 reflow (浏览器决定如何显示东东的进程)。直接操作 DOM，改变元素的 CSS 样式，

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 背景：逐步呈现快速的网页逐步呈现。即随浏览器的加载而逐步显示其内容。一个逐步呈现的页面给浏览者页面在加载的视觉回馈，并尽快给给用户请求信息。Google和Yahoo 都建议逐步呈现页面，比如把 CSS 写在页面

HTML

用 HTML 5 来提升性能

Google 网站管理员 Jens Meiert 发表了一篇《Using HTML 5 for performance improvements》，大部分内容在《Reducing the file size of HTML documents》(中文版)中都有提及，新增的部分为async(和 defer)，以下为该段的翻译： async 和 defer 使用在 script 元素上。要解释为什么这些属性会提升性能，最好是看一下未使用时发生了什么 — 各自的脚本在用户代理(浏览器，下同)继续解析页面前将被提取并直接执行，有时这个行为是我们想要的，有时不是。新的 async 属性允许各自的脚本在可用时异步执行。HTML 4

OOCSS

[翻译]驯服CSS选择器--健壮我们的样式表

PPT:Taming CSS Selectors 作者：Nicole Sullivan 翻译：ytzong CSS 文件的大小和所引起的 HTTP 的请求数是 CSS 性能的最关键因素回流(reflow)和渲染时间 (非常！)没那么重要副本(duplication)比陈旧的规则(stale rules)更糟糕因为我们有工具处理后者定义缺省值不要在每处都重复编码不好的： #weatherModule h3{color:red;} #tabs h3{color:blue;} 推荐： h1, .h1{...} h2, .h2{

性能

YSlow 规则权重

via Don’t make me wait! or Building High-Performance Web Applications

性能

IE8 CPU 耗费情况

via A Lap around Windows Internet Explorer 8

性能

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 Internet Explorer 8 Used C24FMeasuring Social Media Marketing C26FDesigning the Windows

Let's make the web faster

[翻译] gzip 压缩原理

译注：本打算翻译这篇文章的，搜了一下已经有人翻译过了，不过网站失效，通过快照获取了部分内容，在此基础之上进行了一些修改，感谢 bloglei。原文：How gzip compression works 作者：Kevin Khaw & Eric Higgins，Google 网站管理员翻译：bloglei &ytzong 译注：以上是 youtube 视频，请翻墙观看（文中图片调用自 picasa，若显示不了也要翻墙）浏览器请求有无 gzip 压缩的高级预览服务器未 gzip：浏览器：连接服务器并请求页面。通知服务器，浏览器支持 gzip “Accept-Encoding:

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 变化）对 reflow 次数的影响对开发者来说非常必要。有时reflow 页面中的一个元素会 reflow 它的父元素（译注：这里是复数）以及所有子元素。有多种用户操作和 DHTML

HTML

[翻译]减小 HTML 文件

原文：Reducing the file size of HTML documents 作者：Jens Meiert & Kevin Khaw， Google 网站管理员翻译：ytzong 改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法，比如：硬压缩（rigid compression），acupuncture-like ID 及改变 class 名（译注：这一句不是很确定，原文：There are several ways to do this, from rigid compression

HTML

[翻译]谨慎使用 Iframe

原文：Using Iframes Sparingly 原作者：Steve Souders 翻译：ytzong 使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示iframe 是多么耗费性能：使用 iframe 的页面通常没有这么多 iframe，所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。 iframe 阻塞 onload window 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成，用户依据此判断页面是否已经加载完。而 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左右，但是浏览器不会转换压缩的图像数据。当图片下载并解压，将耗费75MB内存(1299* 15000 * 4)。如果图片没有阿尔法透明，可能会减小到1299 * 15000 * 3，可往往还是牺牲了渲染速度。即便如此，

性能

[翻译]简化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规则会明显的拖慢页面。这是应该关注的焦点。所以我开始关注现实中影响页面性能的CSS样式相关的小问题。我收到了很多反馈。David Hyatt的文章《Writing Efficient CSS for use in