Web前端优化最佳实践之内容篇

WebWeb 前端优化最佳实践之内容篇前端优化最佳实践之内容篇1. 尽量减少尽量减少 HTTP 请请求求 (Make Fewer HTTP Requests)作为第一条，可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析，有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少 HTTP 请求：1、合并文件，比如把多个 CSS 文件合成一个；2、 CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；参见：CSS Sprites: Image Slicings Kiss of Death3、 图像地图4、 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.2. 减少减少 DNS 查查找找 (Reduce DNS Lookups)必须明确的一点，DNS 查找的开销是很大的。另外，我倒是觉得这是 Yahoo! 所有站点的通病，Yahoo！主站点可能还不够明显，一些分站点，存在明显的类似问题。对于国内站点来说，如果过多的使用了站外的 Widget ，也很容易引起过多的 DNS 查找问题。3. 避免重定向避免重定向 (Avoid Redirects)不是绝对的避免，尽量减少。另外，应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ，就能有效避免一次重定向。http:/www.482223.com/arch 与 http:/www.482223.com/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 错误因为定位稍稍”难”一点而往往容易被忽略。