每一天，为明天

最近遇到一个问题，无法为span元素设置width属性。查看CSS文档得知，浏览器会忽略行内元素（inline，或称：内联元素）的width属性。
网上给出的一种解决方法：

span { background-color:#f00; display:block; width:200px;}

但是这样会使 span 和它前后的元素分属两行，也就是说 span 其实是变成类似 div 的块级 （block）元素。
另一种解决方案（在上面的基础上增加左浮动）：

span { background-color:#f00;display:block; float:left; width:200px;}

但是这时，span后的文字就需要增加清理，否则span前后的文字就会连在一行内。
Continue reading ‘span元素的width问题’ »

本文作者Fenng，转载自其博客。版权声明

根据 Yahoo 开发中心的 “Best Practices for Speeding Up Your Web Site” 翻译整理。

面向内容的优化规则目前有 10 条。

1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests)

作为第一条，可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析，有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少 HTTP 请求：

• 1) 合并文件，比如把多个 CSS 文件合成一个；
• 2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；参见：CSS Sprites: Image Slicing’s Kiss of Death
• 3) 图像地图
• 4) 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.

2. 减少 DNS 查找 (Reduce DNS Lookups)

必须明确的一点，DNS 查找的开销是很大的。另外，我倒是觉得这是 Yahoo! 所有站点的通病，Yahoo！主站点可能还不够明显，一些分站点，存在明显的类似问题。对于国内站点来说，如果过多的使用了站外的 Widget ，也很容易引起过多的 DNS 查找问题。

3. 避免重定向 (Avoid Redirects)

不是绝对的避免，尽量减少。另外，应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ，就能有效避免一次重定向。http://www.dbanotes.net/arch 与 http://www.dbanotes.net/arch/ 二者之间是有差异的。如果是 Apache 服务器，通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。

4. 使得 Ajax 可缓存 (Make Ajax Cacheable)

响应时间对 Ajax 来说至关重要，否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。

5. 延迟载入组件 (Post-load Components)

6. 预载入组件 (Preload Components)

上面两条严格说来，都是属于异步这个思想灵活运用的事儿。

7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)

8. 切分组件到多个域 (Split Components Across Domains)

主要的目的是提高页面组件并行下载能力。但不要跨太多域名，否则就和第二条有些冲突了。

9. 最小化 iframe 的数量 (Minimize the Number of iframes)

熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处，也有其弊端，一分为二看问题吧。

10. 杜绝 http 404 错误 (No 404s)

对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误，亦能提升用户体验。值得一提的是，CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。

Continue reading ‘Web 前端优化最佳实践’ »

1、基本选择器

如p（段落）、h2（二级标题）等预定义的HTML标签。

2、ID选择器、

每个ID在一个页面中只能使用一次，作为某个元素的唯一标识符。一般情况下，ID只适用于页面中的唯一元素，如页眉、导航栏等。

应用方法：id=”idname”。

定义方法：#idname{……}

Continue reading ‘CSS样式选择器’ »

CSS Sprites 是一种网页图片应用处理方式，它可以将页面中用到的所有小图片整合到一张较大的图片中去。这样，访问页面时，载入的图片就不会想以前那样一张张的显示出来，这样可以有效的减少客户端与服务器的HTTP请求次数，进而减少延迟（因为客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。）。这就使用户（浏览者）获得较好的用户体验，即页面中所有的图片是一起出现的，而不是一张张地跳出来，状态栏显示着“剩余XX项”……

图片加载后，就可以使用CSS方法通过设置背景图片的方式实现对所需图片的精确调用。

Continue reading ‘CSS Sprite’ »

以前注意到在雨林木风论坛，有一个很简单但是很人性化的细节：在用户没有填写评论时，文本域（textarea）显示一幅背景图片，提示用户一些注意事项，而当用户准备填写评论，将鼠标焦点移入文本域时，背景图片消失，显示纯白色的背景，防止干扰用户的视线。

在Wordpress中，可以这样实现： Continue reading ‘改善评论时的用户体验’ »