对@font-face的作用，也是今晚在看这篇博文《@font-face and performance》的时候，才知道使用它可以自定义显示字体。我想在浏览器中加入@font-face的功能是处于一定的情况的，比如使用特殊的字体来显示页面某部分的字体，从而避免采用图片的方式来显示特定字体。出发点是很好的，但是…… 解析@font-face的机制在不同的浏览器下是不同的。 对于@font-face更多的叙述，在上面提到的那篇博文中有了详细的描述。但是对于它提出的说“IE doesn’t render anything in the page until the font file is done downloading if there … 了解更多
昨晚在浏览Delicious网站的时候，又看到了这种样式的导航样式： 之前一直很想做这样的一个导航，可是苦思都不知道良方，还一直认为这需要几个背景图片，着实复杂；还有hover效果，更是会难些，而且有兼容性问题。之后在FF和IE6下测试了下Delicious的兼容性效果，它在ie6下的样式，使用了普通的背景样式，没有上面所看到的折角效果。 之后看了下它的背景图片，一下子豁然开朗了，关键在于使用负margin来实现即可。下面是我实现的样式截图： 而且在兼容性和代码方面都有所改善。在IE6下也可以实现折角的效果，但是没有hover效果。而在Delicious里是在超链接a标签下嵌套了span标签，在a:hover伪类下来处理span的背景变换。而我直接在li标签中使用:hover来处理鼠标hover的背景切换，代码更加简洁了点，并且通过hack来解决ie6下兼容性问题（Updates：因为把:hover写在了li标签上，所以可以直接去掉hack来兼容ie6的css样式，也能做到稳步退化的效果）。 具体的CSS样式和背景图片可以浏览《折角导航栏效果》页面，使用firebug等工具查看页面源码。
2010-6-12 Updates:既然我们通常说道Gzip压缩的效果如何的好（确实很好），那我们就来说一下Gzip压缩的原理吧：当服务器开启了Gzip压缩后，当从服务器加载一个文件的时候，就会将这个文件里相似的字符串临时地替换为规定形式的标记，之后在支持Gzip压缩的浏览器中替换回来并显示到页面上。如果文件里相似或者相同的字符串越多，压缩效果就越好。所以这个对HTML、JS、CSS文件压缩效果非常明显，因为它们的代码中有非常多相似的字符串可以压缩。为了证实这个说法，写了两个测试页面：《Gzip file1》，《Gzip file2》，第一个文件的原始大小为4K左右，第二个为10K左右，而压缩效果明显是第二个压缩的更尽致。 因此，利用Gzip的压缩原理，可以对文件的内容适当的做些手脚来使得压缩效果更加的尽致。 Updates:外联js文件的时候，给script标签带上async和defer属性 浏览器正常加载js文件的方式在性能上是比较糟糕的，阻塞了后续资源的加载和渲染，直到js文件加载并执行完毕。而async属性就顾名思义了，它使得js文件的加载和执行是异步的，不会阻塞后续资源的加载：《async加载Javascript测试》。当然了，要支持async的浏览器才行。 defer首先在IE下支持，最新版的FF等浏览器也相继支持了。它的主要作用是让js延迟加载，而不阻塞后续资源的加载和页面的渲染。这对于支持它的浏览器得到了一定程度的优化，而不支持的会忽略掉这个属性。 因此，建议同时加上async和defer属性，对大部分的浏览器都得到了优化，而不支持的浏览器也会按照默认的方式加载，何乐而不为呢。 昨天分享了些关于Web性能优化的几个方面《WEB性能优化系列一》，接下来分享下另外的一些优化方面的心得体会，算是续上一篇博文，欢迎指正~ 因为本文的篇幅较小，就不提供链接目录了，提供PDF格式的文档下载：《WEB性能优化系列二》 1. Use efficient CSS selectors：使用高效的CSS选择符 关于高效的CSS选择符的叙述，很多书籍和网站很多博客都有相关的说明，尤其《Writing Efficient CSS for … 了解更多
对于在css中声明元素的背景(background-image)的时候，或许下面三个问题大家没有多大关注到的，不如下面的一条规则： [html] .bgimage { background-image: url("/images/button1.gif"); } [/html] 想象一下，当页面中没有元素使用了这个class的时候，背景图片是否会被下载？ 当页面中有元素使用了它，但是该元素又设置了display:none和visibility:hidden的时候，图片是否会被下载？ 当规则出现覆盖的时候，比如在接下来一个外联的css文件中重新定义了bgimage类，并且使用了不同的背景图片的时候，前面那张背景图片是否会被下载？比如： [html] .bgimage { background-image: url("/images/button2.gif"); } [/html] 对于上面的三个问题，Steve Souders已经在他的博文《5e … 了解更多
在surfing过程中，在淘宝UED的《Reset CSS研究（八卦篇）》中得知了如何查阅给予gecko内核的浏览器的HTML默认样式的清单的方式（只需要在gecko内核的浏览器中的地址栏中输入：resource://gre/res/html.css即可），下面提供了我在Firefox3.6.4版本中获得的HTML.css清单。将它代码高亮，有助于阅读，同时由于篇幅问题，对于webkit内核的浏览器、IE6的HTML默认样式，仅提供一个url链接：《webkit内核的HTML.css(Chrome,Safari)》，《gecko内核的HTML.css(Firefox)》，《ie6的默认样式》，《HTML4默认样式》，《CSS1默认样式》，《IE6、7、8默认样式对比列表》，《CSS2.1 User Agent Style Sheet Defaults》，《Mozilla quirk.css》，《Symbian default CSS》。 各种浏览器之间对HTML元素默认的样式的不统一性，正是YUI reset css、HTML5 Reset Stylesheet以及Eric Meyer’s CSS reset被提出来的必要性。 更多参考：《踏上寻找webkit内核渲染HTML的默认样式之路》，《HTML默认样式和浏览器默认样式》，《Reset CSS研究（八卦篇）》，《Really … 了解更多
期待已久的《高性能网站建设进阶指南》终于出来了。作为口碑前端的一员，都感觉灰常Happy。 相信大家都熟悉那本《高性能网站建设指南》，而作为姊妹篇的《高性能网站建设进阶指南》也绝不会逊色于前者。通过校验该书的机会，也学习到了非常多关于web前端优化的具体的最佳实践，包括图片优化、Load Javascript without block，编写高效的Javascript、css代码，后加载（Initial Payload），拆分window.onload代码等等最佳实践，还介绍了众多的前端开发工具。可以总的来说：《高性能网站建设指南》是一本理论的书，而《高性能网站建设进阶指南》则是实践篇。 它确实是一本值得去反复阅读的好书！！