[转] Web前端优化之 内容篇
原文网址: http://lunax.info/archives/3090.html
Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献。广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条–真是与时俱进啊。最新的 34 条也针对不同的角度做了分类。
面向内容的优化规则目前有 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://lunax.info/arch 与 http://lunax.info/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 错误因为定位稍稍”难”一点而往往容易被忽略。
这是内容篇的 10 条。应该说具体引导性的内容还不够详细。逐渐会根据自己的理解补充上来。
[转] Web前端优化之 内容篇的更多相关文章
- [转] Web前端优化之 Javascript篇
原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...
- [转] Web前端优化之 Cookie篇
原文链接: http://lunax.info/archives/3095.html Web 前端优化最佳实践第三部分面向 Cookie .目前只有 2 条实践规则. 1. 缩小 Cookie (Re ...
- [转] Web前端优化之 Server篇
原文链接: http://lunax.info/archives/3093.html Web 前端优化最佳实践第二部分面向 Server .目前共计有 6 条实践规则.[注,这最多算技术笔记,查看最原 ...
- [转] Web前端优化之 图片篇
原文链接: http://lunax.info/archives/3101.html Web 前端优化最佳实践第六部分面向 图片(Image),这部分目前有 4 条规则.在最近的 Velocity 2 ...
- [转] Web前端优化之 CSS篇
原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...
- YUI前端优化之内容篇
Excetional Performance团队总结出了一系列可以提高网站速度的方法.可以分为7大类34条.包括内容.服务器.cookie.CSS.JavaScript.图片.移动应用等七部分.一.内 ...
- web前端优化之内容优化
前端内容优化主要有以下几条: 1.尽量减少http请求 (1)合并文件,把多个css文件合并在一起: (2)css Sprites,把css相关的background元素进行背景图绝对定位: (3)图 ...
- 关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)
网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属 ...
- 网站静态化处理—web前端优化—上
网站静态化处理—web前端优化—上(11) 网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是 ...
随机推荐
- 如何获取多核、多cpu系统中指定cpu的序列号
如何获取多核.多cpu系统中指定cpu的序列号作者:SkyJacker(转贴请保持完整并注明作者和出处)http://www.cnpack.orgCnPack IV QQ Group: 130970 ...
- Map集合案例
1.获取字符串中每一个字母出现的次数. 比如"aababcabcdabcde",结果为:a(5)b(4)c(3)d(2)e(1) 分析如下: package mapexercise ...
- java学习笔记[2015-1-19]
想到哪儿说到哪儿: 1.关于import,全限定名导入和按需导入(即只使用*),影响的只是编译速度,编译过后生成的是全限定名,全限定名还一个好处是不容易产生冲突 2.每个java文件只能有一个publ ...
- UML与数据流图
Ref: <数据库设计理论及应用(3)——需求分析及数据>http://wenku.baidu.com/link?url=hbhJFytMKT8A ...
- PHP优化杂烩
讲 PHP 优化的文章往往都是教大家如何编写高效的代码,本文打算从另一个角度来讨论问题,教大家如何配置高效的环境,如此同样能够达到优化的目的. pool 一个让人沮丧的消息是绝大多数 PHP 程序员都 ...
- Junit使用教程(四)
一.会用Spring测试套件的好处 在开发基于Spring的应用时,如果你还直接使用Junit进行单元测试,那你就错过了Spring为我们所提供的饕餮大餐了.使用Junit直接进行单元测试有以下四大不 ...
- 如何屏蔽LOGD\LOGI等打印输出
今天被打印信息的去除困扰了,想了想,如果靠一个一个的改动未免太繁琐.因此就仔细的看了下这部分的打印原理.当然下面只是简单的进行了知识罗列不过有需要的朋友可以随便看看.说不准会有些收获呢. Includ ...
- /usr/lib/libstdc++.so.6: version `GLIBCXX_3.4.15' not found错误的解决
升级cmake时,提示"Error when bootstrapping CMake:Problem while running initial CMake",第二次运行./boo ...
- uva1637Double Patience
状态压缩,记忆化搜索. 用一个5进制数来表示每堆排到了哪一个位置.和2进制是一样的,不过不能用位运算. #include<cstdio> #include<algorithm> ...
- Ajax、Comet与Websocket
从 http 协议说起 1996年IETF HTTP工作组发布了HTTP协议的1.0版本 ,到现在普遍使用的版本1.1,HTTP协议经历了17 年的发展.这种分布式.无状态.基于TCP的请求/响应式 ...