99css

性能

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
  • ytzong
    ytzong
ytzong • 3 min read
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:
  • ytzong
    ytzong
ytzong • 3 min read
CSS

[翻译]纯 CSS 无 Hack 跨浏览器的多列等高

原文：Equal Height Columns with Cross-Browser CSS and No Hacks 作者：Matthew James Taylor 翻译：ytzong 纯 CSS 打造多列等高并不像想象中那么容易。本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。 多列等高的问题 上例中有包含不同内容的 3 列，可以看出存在的问题是列的背景色随着其包含内容的高度而自适应展开。这是我们要解决的问题。如何使所有的列等高？或具体的说，如何使所有列的高度等于最高列的高度？这很棘手，因为我们不清楚每列将会多高，哪一列是最高的。不能简单的给所有列一个固定的高度，如果内容很少将会导致页面底部有大片空白；
  • ytzong
    ytzong
ytzong • 8 min read
Let's make the web faster

[翻译]界面提示与感知延迟

原文：UI messaging and perceived latency 作者：Roma Shah，用户体验研究员 翻译：ytzong 对一般的用户而言，速度并不意味着性能。用户对网站速度的感知很大程度上取决于其整体感受，包括他们如何高效的从网站获取所需，以及网站反映出来的易响应性。 当设计 Web 站点或 Web 应用时，谨记用户来你的网站是有目的的。他们能越快（越容易）达到他们的访问目的越好。如果用户在获取内容时遇到了许多困难，他们将会离开你的网站，而去能让他们更快达成目标的其他网站。 节省用户时间，让他们感觉没那么慢有很多工作可以做，本文只涉及提示信息。 提示信息，要考虑三点： **网站是否足够简单和直观，首次访问者是否可以很容易上手？**如果不是，花些时间去设计首次运行经验（first-run-experience）提示。 比方说，你的网站是一个拥有数项功能的强大的 Web 应用。
  • ytzong
    ytzong
ytzong • 4 min read
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
  • ytzong
    ytzong
ytzong • 3 min read
HTML

[翻译]谨慎使用 Iframe

原文：Using Iframes Sparingly 原作者：Steve Souders 翻译：ytzong 使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示iframe 是多么耗费性能： 使用 iframe 的页面通常没有这么多 iframe，所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。 iframe 阻塞 onload window 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成，用户依据此判断页面是否已经加载完。而 onload
  • ytzong
    ytzong
ytzong • 2 min read
性能

谨慎使用 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，可往往还是牺牲了渲染速度。即便如此，
  • ytzong
    ytzong
ytzong • 2 min read
性能

[翻译]简化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
  • ytzong
    ytzong
ytzong • 2 min read
性能

[翻译]CSS选择器的性能影响

原文：Performance Impact of CSS Selectors 原作者：Steve Souders 翻译：ytzong 一些关于CSS选择器性能的讨论引起了我的兴趣。 第一个是Shaun Inman写的《合格的CSS选择器（CSS Qualified Selectors）》，实际上这篇博文并没有提到CSS性能，不过有一个来自David Hyatt(Safari 和 WebKit 的架构师,同时为 Mozilla, Camino, Firefox 工作)的评论： 如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant
  • ytzong
    ytzong
ytzong • 6 min read
全文 Feed

cnbeta Rss feed 全文输出

前言： 小众曾介绍过《RSS feed 摘要输出轻松全文》，其中提到的cnbeta全文feed不是很稳定，经常有的文章只有标题没有正文，于是小弟五一抽空做了这个feed。 简介： 该feed目前30分钟更新一次，不适合抢沙发。 已知问题： CB启用了防盗链，图片无法正常显示（Firefox用户配合RefControl扩展伪装可完美解决） 地址： http://feeds2.feedburner.com/cnbeta-full
  • ytzong
    ytzong
ytzong • 1 min read
Bug

说说display:inline-block

前言： Firefox 3发布后，我开始肆无忌惮的使用inline-blcok… 基本用法： inline元素的inline-block： span{displsy:inline-blcok;} block元素的inline-block： div{displsy:inline-blcok;#displsy:inline;#zoom:1;} 开头的为针对IE6/7的hack，多数人用*，用*的话我使用的格式化工具会出错。 遇到的几个问题： **代码格式化对间距的影响：**HTML： <ul> <li class="current">1</li> <li>2<
  • ytzong
    ytzong
ytzong • 4 min read
Bug

Firefox 3 Bug：Iframe页面被带入Quirks Mode

前言： 在B/S系统中经常用到iframe，iframe中的数据用表格填充。 BUG: 标准模式时： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 进入iframe页面时th及td的字体不继承body的样式（偶尔出现）。 分析： 用firebug查看某一单元格（先在选项中选中显示浏览器默认样式），如下图： 其中style.css是我写的CSS，quirk.css为firefox在Quirks Mode时的默认样式，位于安装目录下的res文件夹中（
  • ytzong
    ytzong
ytzong • 1 min read
Bug

IE6 BUG：边框不能设为透明

前言： 有时候我们需要用纯CSS来写小三角，如下图： 代码： HTML： <div class="pointer"></div> CSS： body{background-color:yellow;} .pointer{width:0;height:0;border-top:100px transparent solid;border-right:200px red solid;font-size:0;} 为了方便看效果，特意放大 问题： 正常显示效果： IE6下却遭遇BUG（不透明）： 解决方法： 将实线改为虚线，代码： body{
  • ytzong
    ytzong
ytzong • 2 min read
Bug

IE 6/7 BUG：下拉框select设宽度时option超出显示不全

问题如下图： 解决思路： 当鼠标移到select元素时将其宽度置为auto； 鼠标移开时恢复为原定宽度。 代码（基于jQuery）： $(function() { $(".ProductAttributesSelect") .mouseover(function(){ $(this) .data("origWidth", $(this).css("width")) .css("width", "auto"); }) .mouseout(function(){ $(this).css("width", $(this).data("origWidth")); }); }); 英文雅虎的注册页面有DEMO，童鞋们可以去围观下，O(
  • ytzong
    ytzong
ytzong • 1 min read
CSS

CSS修饰上传域input type="file"

在WebMail项目中，我们需要使用图片修饰的按钮来替代系统默认的上传域。 原理： 将上传上传域透明，绝对定位叠在修饰的图片按钮上方，点击图片按钮时其实是点到上传域。 问题： 图片按钮太大时，上传域的可点击区域不能将其完全覆盖。 解决方法： 加大字体。 HTML： <input class="file" type="file" /> CSS： input.file{font-size:5em;} 各浏览器显示效果： 嘿嘿，这下够用了吧~ 延伸阅读： Styling an input type=”file” Styled file select controls Styling File Inputs
  • ytzong
    ytzong
ytzong • 1 min read