优化网站设计(二十八):避免使用Filters(滤镜)

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题。

作为通用的原则,雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Site  (http://developer.yahoo.com/performance/rules.html),同时,他们还发布了一个相应的测试工具Yslow  http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践,并结合自己的实际项目情况进行应用。 接下来的一段时间,我将结合ASP.NET这个开发平台,针对这些原则,通过一个系列文章的形式,做些讲解和演绎,以帮助大家更好地理解这些原则,并且更好地使用他们。

准备工作

为了跟随我进行后续的学习,你需要准备如下的开发环境和工具

  1. Google Chrome 或者firefox ,并且安装 Yslow 这个扩展组件.请注意,这个组件是雅虎提供的,但目前没有针对IE的版本。
    1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
    2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
    3. 你应该对这些浏览器的开发人员工具有所了解,你可以通过按下F12键调出这个工具。
  2. Visaul Studio 2010 SP1 或更高版本,推荐使用Visual Studio 2012
    1. http://www.microsoft.com/visualstudio/eng/downloads
  3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解,本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我和大家讨论的是第二十八条原则:Avoid Filters (避免使用滤镜)。

和上一条原则(优化网站设计(二十七):使用link而不是@import导入样式表)一样,这一条原则也是关于标准化设计的问题。滤镜这个功能也是IE当年为了提供更加丰富的一些页面效果而设计的(相应的也会有代价)。

IE 所支持的滤镜列表,可以参考下面这个链接

http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx

其实不仅仅是别的浏览器可能不支持,IE 从9.0版本开始也放弃了这方面的支持。

我们可以期待的是,CSS 3.0作为后续的一个版本,会为网页的特殊效果提供一个标准的支持。如果对CSS 3.0有兴趣,希望预先做些学习的话,可以参考

http://www.w3school.com.cn/css3/index.asp

与之前滤镜很相似的一些功能可以参考

  1. http://www.w3school.com.cn/css3/css3_text_effect.asp
  2. http://www.w3school.com.cn/css3/css3_2dtransform.asp
  3. http://www.w3school.com.cn/css3/css3_3dtransform.asp
  4. http://www.w3school.com.cn/css3/css3_transition.asp
  5. http://www.w3school.com.cn/css3/css3_animation.asp

目前IE 在新标准的支持还处于比较靠后的位置,我们希望IE能对此作出更快的支持。

posted @ 2013-05-19 14:23  陈希章  阅读(1245)  评论(0编辑  收藏  举报