CSS优化:减少HTTP Requests

Posted by jay on June 28, 2008

大多数的前端用户都会遇到一个问题,那就是下载速度。对于网络优越的用户,不是问题,但是考虑到移动用户或者是网络条件较差的使用者,最终要的是速度。现在的网站有很多的内容,比如Flash, 图像,声音,JavaScript等等都会减慢页面下载速度。

最基本的优化方法是减少客户端对HTTP Requests。有很多方法可以实现:

使用单个文件。就是说尽量把多个文件的CSS,或者JavaScript放到一个文件里面。虽然有时后我们需要不同的样式在不同的界面,但是在开发过程中能尽量考虑到这个问题,会给减少页面反馈等待时间。

显示图片的局部。如果一个按钮在hover和link的状态用不同的图,大多的方法是利用2个图片来实现鼠标的反馈。其实利用 background-image 和 background-position CSS属性可以实现用显示图片的局部。这样其实页面只做了一次对服务器的Request.

图片定义放在CSS中。如果显示图片的时候把图片插入到页面,这样会使得文本档尺寸增大,增加下载时间。我们可以把图片定义尽量放在缓存的CSS中,这样第一可以减少页面大小,也减少了http requests.

减少Http request是一个最好的性能优化起点。经过一些调查,百分之40-60的用户基本上是带着干净的缓存访问网站的,给他们的第一感觉一定是要页面装载迅速。

Nokia从Symbian开始进入开源市场

Posted by jay on June 26, 2008

前一阵子刚写过一些关于开源的文章,说到Open source的前途问题, 这两天Nokia在开源的方面又作了一些计划。

虽然Symbian系统现在还不是开源的, 但是Nokia近日已经公开宣布很快Symbian就会开放资源. 关于License的问题, Nokia决定用Eclipse Public Lincese.

预想一下在未来2年里面, 网络上的那些开源的开发者会如何对待Symbian. Symbian系统在过去的10多年里面是非常强大的, 他曾经有一段时间在市场上和WindowsMobile可以抗衡, 但是随着市场的挑战与变化, 更多的移动平台不断发展, 它似落到了低谷. 和Android, WindowsMobile, iPhone OSX相比, 他的数据处理, 功能和性能上都落于下峰. 一旦系统开放, Nokia就要像放羊一样, 让系统在社区下面任意发展. 也许开发人员会设置一个分支, 然后从分之里面重新开发一个移动系统. 也许没有什么人会再去怀念Symbian的过去.

话说回来, 除了一些爱玩移动手机的人士, 谁会在乎系统是什么? 又有多少人在乎在手机之外的功能? Symbian着眼于SmartPhone的市场, 这个市场本身就很小. 和普通用户市场相比, 用户数量应该不仅仅差2-3位数. 记得2000年的时候, 根据报道用户数量大约有200m, Symbian预测在2000年Q2-Q3达到400m, 现实看来这样永远是一个梦想而已.

Symbian已经完成了他的使命, 他已经实现了所有设计者计划之内的功能, Road map已经到了尽头.

微软对IE的市场推进到位么?

Posted by jay on June 22, 2008

最近在看客户的浏览用户数据分析的时候看到一些有趣的资料-关于浏览器版本。 相比较其他项目的浏览数据,都是非常相近的。对于浏览器的使用率的比较,没有什么可以研究,大多网站的用户都用IE6/7,接下来的占有率应该是属于Firefox的。

我们这里要比较的是,比如在1000个unique visitors里面有多少人用IE6, 多少人用IE7;类似的, 在那么多的Firefox用户中他们都用的什么版本的浏览器;在这里我们还要包括一些Safari的用户。

这个是最近我在项目抽样里面弄出来的数据。首先,我先写一下那些百分比代表的什么版本:

  • Firefox: 85.75% (ver 2.0014), 5.75% (ver 3.0)
  • Internet Explorer: 62.27% (ver 7.0), 36.17%(ver 6.0)
  • Safari: 36.18% (ver 525.18), 21.7% (ver 419.3), 12.5% ( ver 525.2), 8.55% (ver 523.12)

IE6发布日期27th Aug 2001, IE7发布日期18th Oct 2006。这样算来, IE7到现在差不多一年半的时间,使用率只有62.27%(应该还不到)。对于IE6那些种种的安全问题,标准问题,是不是应该提倡用户更新呢?我们再看看Firefox产品推销成果, FF2发布日期24th Oct 2006, FF3 June 17th 2008。FF2和IE6发布时间接近,也用了一年半的时间,版本2的使用率这里达到85.75%, 上周刚刚发布的FF3使用率就已经占到了5.75%.

那我要问,是不是微软在推销自己的产品?还是在等着Vista的更新把IE6渐渐淡忘? 虽然有系统更新说,有新的版本,既然浏览器是一个独立的产品,更新应当是他本身的职责(back to the good old win browser issue)不应当是系统的职责。这里有一些细微的差别,浏览器问”我有新版本,是否要更新?” 是主动的,给用户更加友好的感觉,用户知道是浏览器要求更新。但是如果系统问“有一个新的浏览器,是否要安装?”,这样的感觉好像在推销产品,系统说我们有个新产品。

我觉得MS应当好好思考一下他们的经营策略。有很多人说他们也许就没有什么真的策略,Gates前一阵子说这样经营,下一个月在conference里又改了一个另一个说法。什么方向是不变的?如果策略是考虑到用户,大方向是不可能有偏差的。

更新:LinuxInsider在7月11日也发表了类似的文章说道用户更新浏览器的问题。

It’s all about OPEN these days

Posted by jay on June 22, 2008

最近两年,我一直在关注一些Open Source(开源)相关的信息。例如, 有关开源的项目, 开源的理念和经营模式。很多大型的公司选择项目工具的时候都会避免一些开源的项目,特别是一些桌面程应用序都会最后选择Micr*soft的解决方案。为什么他们不选择开源的语言或者Framework进行项目开发呢?可能有以下几个原因:

  • 开发效率。大多开源的项目开发效率相比商业化的软件还是慢很多。对于用户来说,他们所看到的只有最后的结果,比如说他们需要一个创建历史纪录的功能,只要你们写的软件能做到这个功能,用户根本不会在乎开发人员是如何实现的。人力资源是很昂贵的,所以企业更愿意花大比的钱买license,节省开发时间。另一个问题是IDE, 大部份开源的程序缺少效率高的IDE, 企业级别的IDE支持。
  • 技术支持。商业的产品大多有比较好的技术支持,如果他们提供的产品有一个严重的bug要修理,购买的license会带有高级用户的支持联系方式,一般第三方公司会在很快的时间内给你解决办法(这样项目就会承担很小的Risk)。特别是做一个大项目,用很多第三方的软件节省开发周期,那他们之间会有很多不兼容的问题,这个时候更需要技术支持。相反,开源的更需要community的支持,要看这个社区的规模,要看项目的Status(active?)。如果开源项目完全停止,那企业无法很快找到解决办法,或者根本没有办法追究责任。
  • 开发人员缺乏。懂得开源程工具和framework的人比较占少数,在欧洲,高等教育选择教开源工具比较多,但是真正的工作的时候大多公司还是选择商业的解决方案。所以毕业的学生到了这些公司,开发商业化的库,end up with these skill sets. 即使有开发人员,可能真正成为expert的人也是个别的。
  • 安全问题。开源的代码公开,所有的安全问题是公开的。企业当然需要隐私并且牢牢把握主安全这个窗口。

那这样,open source还有存在的意义么?或者创造开源就是那些passionate的人们的产物?如果这样想,我觉得完全是错的。相反,开源其实是非常重要的。大部分的商业产品是从开源发展出来,拿了开源的主意。拿一些最近的例子,iPhone的interaction设计是从一个大学Touch Technology衍生而来的,他们有相同的操作方法(多触点操作),有相同的, 相同的产物还有MS的Surface产品; 苹果的Mac操作系统是从开源的Linux衍生而来的; 我们现在用的Internet Address System(internet protocols-HTTP, FTP等等) 都是开源的; 挑战IE的Firefox也是开源的产物。

Open给我们带来了什么?

  • Freedom。虽然没有商业支持,但是开发起来更加的自由。其实商业软件有他们的局限性。如果想做出一些新颖的东西其实是比较困难的,商业化的程序都有自己的模式,如果违反他们设计的模式开发,只会给项目带来很多麻烦。
  • Standard。每商业产品都会为了版权设计自己的规范。其实这样给用户和开发人员带来很多麻烦,对技术或者任何产品的发展都是不力的。最典型的就是MS最早发布自己的HTML规范,直到现在他对公认的W3C规范负面影响很大。
  • Interaction。交流是非常重要的,人们可以任意发表自己的建议,所以最后的解决方案都是用户最想要的结果,或者说是Best solution。在社区会有不同技术类型的开发人员,他们提出的建议可以让人们考虑每一个问题角度。然而商业化的,永远都是局限在一些开发人员的解决方案,他们的经验和知识都是很有局限性的。

说到这里就想起Steve Jobs在第一次被Apple开除之前的一个采访,印象很深,他说:”The only thing about ********* is, they just have no taste.” 我感觉到他说的那家公司也正在市场转型。现在的趋势,对于用户来说,单有技术是不够的,他们需要的不是技术,而是技术在现实生活种的应用。什么是应用? 应用就是User friendly。所以现在真正缺乏的是前端的工程师,他们懂得用户真正的需求。如果用商业软件,是很少有机会做出一些另人惊人的产品的。说说为什么?那我们看看一些有名的网络产品,Google(大多的内部系统都是开源的), Facebook(开源程序语言开发,并且把platform设为开源), Twitter(开源RoR的产物), Yahoo!(运用很多的开源项目开发出来的). Linux(最稳定,最受欢迎的host平台之一), Wiki(最强大的社区字典), 等等。(太多了,如果大家熟悉还有例子,可以留言)。

也许,再过不久封闭模式的开发会跟不上社区模式的进度。也许,社区模式的开发能做出更加有创意的产品。

可以退休的IE6

Posted by jay on June 20, 2008

如果一个用户用非Grade-A浏览器浏览网页的时候, 大多会看到一些广告说”本网站只支持, IE7″, 或者”请升级您的浏览器”。 作为开发人员, 我们是不是要告诉用户”There is a better browser for you.” 当然,一个浏览者用的是IE6, 我们也需要告诉他们IE7已经发布了,”快点更新吧”。 当然还有其他的选择, 比如Firefox 3, Opera 9.5, Safari 3.1.

作为一个网络开发人员, 我们用很多的经历只是要确保IE6能够运行我们设计的网络程序。 而且还要写一些CSS hacks保证页面的结构和其他的浏览器保持一致。 这样就好像我们在开发一个现在的网络应用程序, 又要考虑到8年前的祖先级别的机器也能运行。

记得前一阵子看了MS下一个IE小组项目经理的留言,不得不让我大笑。他们说到了向后支持的功能,他们要保证IE的backward capability。 如果是一个优秀的老产品, 作为开发人员应当保证向后兼容性, 但是如果一个完全错误百出,开发问题严重的产品, 难道我们还要去支持?

如果开发一个简单页面的网络程序, 我们并不用担心会有兼容问题。 特别是这几年, 新颖的Web2.0/3.0程序日益见涨, 比如 MobileMe, 280 Slides, Yahoo! Mail,等等, 可以说要考虑到IE6, 就好像要一个486运行Vista, 所以干脆就让用户更新计算机吧。 这样问题都解决了。

苹果最近在WWDC上更新了.Mac的服务, 升级到MobileME. 有趣的是作为一个这样大型的网站, MobileMe不兼容IE6. 不过我也怀疑, 如果是苹果的用户,又有多少人会用IE的产品(也不是没有可能). 也许他们会用Sarfari/Firefox在Maxoxs上, 到Windows上使用IE7或者Sarfari for Windows.

MobileMe是用SproutCore写的. SproutCore是一个Ajax famework, 很多人都把IE6兼容性抱怨在SproutCore上. 但是事实SproutCore确实是兼容IE6的. 那到头来还是苹果开发那头下的决定放弃IE6?

如果苹果是第一个开始放弃IE6的, 接下来的会是谁?

15 Years Later, It’s Time for Wine?

Posted by jay on June 19, 2008

After 15 years’ development of Wine, we’ve been through many test and beta versions. Finally, a stable Wine is available to all the users.

Wine is an open source implementation of the Windows application programming interface (API) on top of X, OpenGL and Unix that allows Windows applications to run on other operating systems, including Linux and Mac OS, without the need to run Windows as well.

Of course, open source is free for any users. So they can be build and compiled on your operating system. I used previous Wine beta build on a Linux(Ubuntu 6.*), I had a few troubles:

  • Fonts was an issue, MS holds the license for all the Windows fonts. If we want to display the same font as windows shows, we have to copy them from a windows pc to the font folder in Wine file structure.
  • Performance. If you run a basic application should encounter no problem, the one trouble is playing games that requires better graphics. You would expect the performance of the graphic card was reduced. (I played Need for Speed, it was pretty slow while on Windows I can set to higher resolution).
  • Security. Wine seems to use some crucial .dll(s) in its file structure, you might get some virus that lives on windows, but this should not affect your linux or mac operating system.

My experience was that commercial version(Crossover, developed by CodeWeavers) was decent, however it still had font issue. I was able to run lower versions MS Offic* (i.e. 97, 2000). I encountered a few software crash problem, but the office recover feature worked. (Be careful when you use wine for important tasks, the suggestion is to save your work frequently.) They offered easy setup, however, it lacks of flexibilities comparing to wine.

Well, don’t like Wine? but still want to run windows apps on linux or mac? You may try virtual machines. the most well knwon distributor is Vmware as they ship several versions of Vmwares on varies type of operating system. If you are linux users, they ship the Vmware for free( suppose what we call it open source culture). Vmware Fusion provides free 30 trials. It’s better than Parallel Desktop, a virtual machine solution for Mac, because the new version offers DirectX 9.0(or higher) support.

If you have time and tried things out, I would like to hear about your experience.. :)

采访280 Slides的开发人员

Posted by jay on June 08, 2008

最近看到280 Slides的release, 第一感觉让人觉得惊讶。界面很像Mac的设计,有很多人叫它”Keynote on the web”. Boucher, Tom Robinson和Francisco Tolmasky在采访中还介绍了一些设计思路和未来的计划。相比Google Doc看重在互动和共享, 280 Slides更注重用户的体验。

访谈里面谈到Objective-J,Obj-J运用JavaScript并把它变成面向对象的语言(就好像把C转成Obj-C). 和Obj-C相近, 写代码的时候会看到很多方括号([]). 浏览器读到.j文件的时候会处理这些文件,这样就以为着开发人员可以做任何的标准的JavaScript的效果。提到Obj-J是不是很难学的问题,如果做过是一个JavaScript或者Obj-C的开发人员很快就能学会使用新的语言,但是了解frameworks需要一些时间。

Obj-J的framework被命名为Cappuccino. 开发者用Cappuccino的时候不用担心DOM的object, 不用担心CSS, HTML只要主意界面的开发。同时给开发人员一种开发平台的感受,而不是只是写一些代码。说道这个framework的起源是从3人大学开始的,之后为了开发一个网络程序,需要一个强大的javascript支持,所以设计了自己的framework。

更另人惊讶的是,Objective J将会是开源的,所有的代码都将可以在objective-j.org下载的到(现在可能还不存在)。这样还有很多经常遇见的问题,比如open source license, source control system, 还有documentation等等。(not an easy job :P )