优化网站设计系列文章总结和导读

概述

其实想写这方面的文章由来已久，这个系列文章的想法是参照雅虎团队提供的35条性能优化的最佳实践（其实最早的时候是14条），再结合我自己多年的实际工作经验，结合具体的开发平台（ASP.NET），为读者提供既有理论知识、又有实践指导的参考资料，对于优化而言，本身是一个长期细致的工作（没有所谓的银弹），并且重在权衡利弊，选择最适合自己项目情况的解决方案。而要达到这样的目标，就需要对网站设计优化有较为系统的认识，知其然、也知其所以然，然后才可以熟练地运用它们。

我从4月30日开始写这个系列，到今天（5月20日）已经全部写完，主要利用了假日、周末以及晚上的时间），虽然比较辛苦，但自认为这个系列写的质量算是我迄今为止最好的，并且毫无疑问，我有理由借此机会对我的家人的支持表示感谢。

在这个过程中，我也对有关的知识温故而知新，所以说个人收获已经很大了，如果能对阅读者也能有所帮助，那是再好不过的了。

导读

这个系列的内容组织保持了雅虎团队当年所提出的35条原则的结构，以便大家对照起来进行学习。值得一说的是，这些文档虽然参照了原文，但不是对原文的翻译，更多的是加入了我的一些见解以及演绎，有些地方可能还与原文有不太一样的说明。

1. 优化网站设计（一）：减少请求数

2. 优化网站设计（二）：使用CDN

3. 优化网站设计（三）：对资源添加缓存控制

4. 优化网站设计（四）：对资源启用压缩

5. 优化网站设计（五）：在顶部放置样式定义

6. 优化网站设计（六）：在文档底部放置脚本定义或引用

7. 优化网站设计（七）：避免在CSS中使用表达式

8. 优化网站设计（八）：将脚本文件和样式表作为外部文件引用

9. 优化网站设计（九）：减少DNS查找的次数

10. 优化网站设计（十）：最小化JAVASCRIPT和CSS

11. 优化网站设计（十一）：避免重定向

12. 优化网站设计（十二）：删除重复脚本

13. 优化网站设计（十三）：配置ETags

14. 优化网站设计（十四）：使AJAX调用尽可能利用缓存特性

15. 优化网站设计（十五）：尽可能早地发送缓冲区内容

16. 优化网站设计（十六）：为AJAX请求使用GET方法

17. 优化网站设计（十七）：延迟或按需加载内容

18. 优化网站设计（十八）：预加载内容

19. 优化网站设计（十九）：减少DOM元素的数量

20. 优化网站设计（二十）：使用多个主机来平衡负载

21. 优化网站设计（二十一）：尽量少用iframe

22. 优化网站设计（二十二）：避免404错误

23. 优化网站设计（二十三）：减小Cookie的体积

24. 优化网站设计（二十四）：通过使用不同的主机减少对cookie的使用

25. 优化网站设计（二十五）：避免对DOM元素进行过多操作

26. 优化网站设计（二十六）：设计“智能”的事件处理程序

27. 优化网站设计（二十七）：使用link而不是@import导入样式表

28. 优化网站设计（二十八）：避免使用Filters(滤镜)

29. 优化网站设计（二十九）：优化图片

30. 优化网站设计（三十）：优化CSS sprites

31. 优化网站设计（三十一）：不要在页面中缩放图片

32. 优化网站设计（三十二）：使favicon.ico文件尽可能小并且可以缓存

33. 优化网站设计（三十三）：尽量使单个内容体积小于25KB

34. 优化网站设计（三十四）：将组件直接打包到页面

35. 优化网站设计（三十五）：避免将img的src属性设置为空白

 

权衡

我多次提到权衡这个词，就好比一个架构师被问到“什么才是最好的架构？”这样的问题的时候，最合理的回答可能真的是“这个得看情况”（虽然这样的回答可能显得有点像外交辞令），因为技术是很多的，架构也很多，没有哪个架构对所有业务场景都是合适的。

同理，我们提到了很多原则，这些原则各自有它的侧重点。很显然，他们可能还互相有冲突。那么，这能说明什么呢？这难道说明这些原则不合理吗？当然不是，正好相反，这才是合理的。

为了帮助大家更好地了解这些原则之间的关系，抑或是互斥的、抑或是互补的，我整理了一个表格如下，给大家参考。

 

图中红色标识出来的原则就是或多或少会有互斥的。遇到这些原则，你需要兼顾到其他的原则，两害相权取其轻，做出最适合于你的实际情况的选择。

没有标识颜色的，标识这些原则是有互补性的，或者至少不冲突。

 

工具

我在编写本系列文章的时候，用到如下的工具

1. 开发工具：Visual Studio 2012。我用的是2012，但如果想要跟着做练习，有2010也就可以了。
   • http://www.microsoft.com/visualstudio/chs/downloads
2. 调试工具：
   1. Fiddler: ：http://fiddler2.com/home 这是一个独立的网络测试和调试工具。
   2. IE 自带的开发工具（通过F12调出）：我用的是IE 10，最好你至少有 IE 9. http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx
   3. Chrome自带的开发工具（通过F12调出）：使用最新版本即可。https://developers.google.com/chrome-developer-tools/
   4. Chrome中安装的Yslow插件：https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
      • 关于Yslow的详细信息（包括计分规则等）请参考：http://yslow.org/ruleset-matrix/
      • Google自己也开发了一个类似的插件(功能很像)：Page speed insights https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli

 

最后，希望这个系列文章对大家有些帮助！