Csspeople

这是一篇比较老的文章了，觉得挺有意义，大概意思如下，原文地址http://www.stevesouders.com/blog/2008/03/10/ie8-speeds-things-up/。

在IE8 beta 1版本的新闻发布会上提到了浏览器性能的改进，这些性能的改进都是围绕DOM结构，Javascript的执行效率。，其中有三个非常大的进步：每个域名支持6个并发请求；支持脚本并行加载（非常大的进步）以及支持Data:URIs。

并发请求使页面加载速度更快（对于CPU较慢的用户可能会更糟，但对于大多数用户来说更快）；HTTP1.1文档中提到每个域名只能同时加载2个请求，然而这些都是1999制定的标准，今天的客户端和服务器完全能够支持更多的并发请求，所以IE8将并发请求提高到2~6个。

支持脚本并行加载使页面加载速度更快。当浏览器在下载脚本文件时Firefox和IE8以前的版本是不允许下载其他文件的，这是一件非常痛苦的事情。伴随着WEB2.0和DHTML的发展越来越多的页面需要脚本支持，意味着用户在体验这些页面的时候需要更长的等待时间，脚本需要有执行顺序（代码依赖关系）这是可以理解的，但是没有理由不能并行下载。然而IE8迈出了非常重要的一步，拿FACEBOOK来说，他们的页面有17个脚本，当你清空缓存后打开页面你会发现大多数浏览器加载肯定很慢，但是对IE8来说脚本加载速度却可以提高80%，下面这张图就是FACEBOOK的脚本加载情况：

经过长时间的等待IE8终于宣布支持Data:URIs,它允许开发人员直接在HTML文件中嵌入资源（图片，脚本以及任何URL），这一点对于css背景图片特别有效，你可以直接在样式文件中嵌入代码，然后将样式文件做cache处理。

招聘职位：页面重构工程师

工作职责：

负责互联网系统产品的网站重构

职位要求：

1. 对符合web标准的网站重构有丰富经验，有成功案例；
2. 精通结构化语言xhtml、xml与解释性语言css；
3. 精通图像处理软件与网页编辑软件；
4. 对业界最新的页面实现有浓厚的兴趣和深入的见解；
5. 逻辑分析能力强，善于沟通，较强的学习能力；
6. 熟悉对象模型与脚本语言，有前台开发经验者优先考虑；

工作地点：

深圳

如果你想应聘该职位，请将简历发送到csspeople@gmail.com；QQ：289694837

原文地址：http://www.smashingmagazine.com/2009/07/25/png-optimization-guide-more-clever-techniques/

作者：Sergey Chikuyonok

译文地址：http://zanbu.blogbus.com/logs/43337794.html

灰度

Photoshop 不能保存灰度模式的 PNG 文件，所以你得在保存黑白图像后再使用 OptiPNG，代码如下：

optipng -o5 bw-image.png

灰度图像占用的空间远小于 RGB 图像，因为每个像素只用一个字节来表示，而不是三个：

PNG-24（Photoshop → 真彩色），8167字节

PNG-24（Photoshop + OptiPNG → 灰度），6132字节

在保存图像为 PNG 文件之前，将其设置为灰度模式（图像 → 模式 → 灰度）非常重要，尤其是半透明图像（参见 Dirty transparency 的方法） 。

减少颜色

这个方法可以作为色调分离的替代方案。色调分离会严重改变图像的色彩，如果你要将图像嵌在网站背景中的话，这根本不可接受。这种方法能让你控制颜色更加自如，但也是限制在256色以内。

我有兴趣，继续查看 »

原文地址：www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques

作者：Sergey Chikuyonok

引言

做为一名网页设计师你或许已经对png格式非常熟悉，它提供了完整的透明度，这是一种无损的，功能强大的图像格式。能够很好代替gif图像格式。但是绝大多数人认为它不可被压缩，带着这样的疑问我们来认真看完下面这篇文章。每一种图像格式都有自己的优缺点，如果掌握了相关知识，在进行图像优化时能够针对图像进行相应处理，得到高品质的图像和高压缩率，这是图像优化的关键所在。png被称为开源的gif图像格式，它们之间有很多相同的地方（如：索引色），但png在每一个方面都要强于gif。它介绍了一些非常酷的功能，例如：图像封装和压缩，但对我们网页设计师来说最重要的还是线性过滤（也称为“三角过滤”）。

什么是线性过滤？

这里介绍下它的原理，假如我们有一张5*5像素水平渐变的图片，如下图（每个数字代表了一种颜色）

通过上图你会发现相同的颜色都是在垂直方向上扩展，而不是水平方向。这样的图片如果用gif格式将很难获得高压缩率，它只压缩水平方向扩展的颜色（图像尺寸越大，越能说明问题）。让我们看看线性过滤是怎样将这类图像压缩的：

以数字2为标识的每一行都经过了“Up过滤”，“Up过滤”向 png 解码器发送信息：“对于当前的像素，提取上方像素的值，并将其添加到当前值”。图中第2-5行垂直方向都拥有相同的值。所以它们的值都是0，如果这样的图片越大那么压缩比率也越大。

在理想情况下，“Sub过滤”能提供更好的结果：

以数字1为标识的每一行都经过了“Sub过滤”，它发送信息给解码器：“当前像素提取左侧像素的值，添加到当前值”。例子中的值全为1，我想你大概也猜到这样的数据肯定能被有效的压缩。
我有兴趣，继续查看 »

相信很多朋友在做项目的过程中经常会碰到清除浮动的问题，当子元素被浮动后，父元素就无法自适应高度，解决思路就是清除浮动，让元素能自适应高度。这是老生常谈的话题拉，并没有什么难点，实现方法有很多。我们不妨来比较一下常见的几种方法。

使用额外的标签<div>或<br />：

<ul class='list'><li>1</li><li>2</li></ul><div class="clear" ></div>

.list{ list-style:none;}
.list li{ float:left;}
.clear{clear:both; display:block; height:0; overflow:hidden;}

缺点：增加了额外的标签，如果页面中需要清除的浮动较多的话，那么这些额外的标签将是每个程序员的噩梦。

我有兴趣，继续查看 »