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

摘自：http://www.cnblogs.com/chenxizhang/archive/2013/05/20/3088196.html

 

概述

其实想写这方面的文章由来已久，这个系列文章的想法是参照雅虎团队提供的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

 

最后，但愿这个系列文章对你们有些帮助！