BYR Achieve · 镜像论坛

Hi all: 最近由于项目需求，需要对网站进行一些性能优化。准备从前端和后端两个方向着手。网站的架构是典型的LN?P(?包括mysql,redis,mola等等)，小女刚刚开始学习www技术，希望能向版上的各位大大多多请教~ 这里抛砖引玉，转一篇yahoo!的developers写的一篇有关提升网站加载速度的一些优化技巧的文章，大部分在前端层面。原文比较长，直接贴地址了：http://developer.yahoo.com/performance/rules.html 不知道是多久以前写的，看起来有些已经过时了。对于以下这些case，yahoo!的developers实际上做了一个浏览器插件——yslow（有chrome/firefox/opera版）——来检测这些问题。插件的使用非常简单直观，这里就不多说了。 ==== 以下是简单的翻译和解析，也不知道对不对，请各位多多指教。 1. 减小http请求次数多次的http header传输和解析将影响网络io和解包效率。技巧包括： (1)合并文件，将多个js/css合并到一个文件； (2)使用css合并小图标； (3)合并多张位置连续图（感觉不常用）； (4)内联图片(inline images)，这样可以使用浏览器的css缓存加速，可惜有些浏览器不支持。核心思想就是make use of browser cache as possible as you can 2. 使用CDN(Content Delivery Network) 八成以上终端的响应时间消耗在下载图片/css/js/flash等静态富媒体内容上。资金上富裕的网站应该使用cdn服务来节约网络消耗。有钱的就自己架cdn。 3. 为http header设置合适的cache失效时间 (1)静态内容永不失效；（升级时注意修改URI） (2)动态内容设置合适的失效时间。 4. gzip压缩传输 Request: Accept-Encoding: gzip, deflate Response: Content-Encoding: gzip deflate这个东西我自己写过，即使实现很烂，在数据为自然语言文本的情况下，压缩率还是很高的（至少压到1/3）以下。应该压缩的不仅仅是html，还有ajax的json和xml。不过这个貌似绝大部分浏览器和webserver都默认支持了。 5. 将css放在html文档的head部分 yahoo!工程师发现把stylesheets放在html头部会使得页面看上去加载得更快，因为这样会使得页面依序加载。很多浏览器在获取到css之前会阻塞页面的渲染。如果你是看w3schools学写网页的化那么一定已经养成了这个习惯。 6. 将js放在html文档的尾部 HTTP/1.1 specification建议浏览器不要同时下载同一个host下的两个以上的文件。因此，js的下载可能会阻塞网页的加载。有些场景下不适用，例如使用document.write插入内容时。 7. 避免使用css expression IE specific behavior reason, and deprecated on IE8. 8. 将css和javascript放在外部文件中好处很多，可以让浏览器使用cache，方便管理开发等等。作者说有个例外就是首页可以使用inline的css和js。 9. 减少dns查找这个比较奇怪，通常浏览器、OS和ISP都会做cache的。个人感觉效果不大。 10. 压缩js和css文件的体积两个常用工具：JSMin和YUI Compressor。同样是减少网络IO。 11. 尽量避免重定向如果要重定向，尽量使用http 3xx，而不是js。一个常见的case是由于url尾部斜杠的缺少导致的重定向（不过似乎大部分的webserver会自动handle这种case）。对于可以预见的重定向，尽量使用webserver的rewrite功能来返回正确的结果。 12. 去除重复脚本通常，在网站开发团队庞大、脚本数量众多的时候容易出现这种问题。比如加载了一堆jquery.js。这个不仅可能增加网络io，还会加重浏览器js引擎的负担。（我猜对于chrome这种奇葩浏览器，消耗的资源还是很可观的）一个比较好的解决方式是在网页框架的模板系统种加入对js的管理插件。 13. 仔细地配置实体标签 Entity Tags（下简称etags）是服务器和浏览器端判断所请求内容是否在浏览器的缓存中的依据。对于静态内容的请求，server返回的response通常类似： HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195 浏览器想验证内容时，它会发个If-None-Match请求（带上ETags）给服务器。如果服务器发现传过来的etag和服务器上资源的etag一致，就会返回这样一个response，而不是具体内容。 GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Not Modified 问题在于etags的一致性hash策略通常是和服务器关联的，对于使用服务器集群的大型网站，经常会有两次相同的URL请求落到不同服务器上，这时etags就无法发挥作用。例如apache默认的etags策略就和文件的inode有关…… 所以，要么仔细地配置etags策略，或者服务器分流策略，要么关掉它以避免etags所带来的计算上和网络IO上的开销。 14. 让ajax的response可以被缓存使用上述的3、4、9、11、13。这个里面用的例子感觉就是在说gmail…… [/b]15. 尽早刷新缓冲区(server端)[/b] 通常在前端业务简单而后端（存储etc）压力比较大的情况下适用。这时网络IO不会阻塞在耗时的后端上。当然，node.js这种异步编程的模式…… 16. 在ajax中尽量使用get 仅仅是读数据的请求尽量用get。如果有什么需要加密的参数可以在两个端的程序来实现。 17. 延迟加载内容例如，展开折叠后才展示的图片、拖拽动画的js等等。不过这个设计时要小心，因为可能影响用户体验。 18. 预加载内容和上面那个不同，预测用户将来可能访问的内容，并在浏览器空闲时加载它们。 19. 减少DOM元素的数量太多的DOM元素会增加浏览器js引擎的负担。增加一个事件处理的回调函数时，遍历500个和5000个DOM节点有不小的效率差别。一个很典型的例子就是，去掉那些仅仅为了layout而添加的无用的<div>元素…… 多少算太多？作者给的参考数据：Yahoo!的主页是700个。 20. 将内容拆分到不同的域见6，http对于同一个hostname内容的建议。当然粒度也不能太细，否则会处处遇到跨域的限制。 21. 尽量减少iframe的个数技术细节参见原文。 22. No 404s 单纯的404是毫无意义的http开销。 23. 减小cookie的大小参见这篇。(需爬梯）去掉无用的cookie；让cookie的大小尽量小；仔细地设定cookie的域；仔细地设定cookie的失效时间。过长的cookie还容易导致后端程序逻辑出现问题。 24. 建立一个静态域来handle不使用cookie的请求见20。 25. 减少对DOM树的访问 javascript引擎是比较慢的。所以不要滥用jquery…… 26. 开发智能的事件处理器 event delegation，这个不好翻译，还是看原文。 27. 用link而不是@import加载css 又是一个IE specific behavior reason 28. 避免使用png滤镜还是一个IE specific behavior reason 29. 优化图片将gif转为png，等等，目的就是为了减小图片大小。 30. 优化css合并的小图标 31. 不要用html缩放图片这会增大网络io。在服务器端做。 32. 让favicon(那个小logo)足够小且可以被缓存 33. 对于移动端，让组件大小小于25k iphone不会缓存25k以上的组件。 34. 将组件打包到一个multipart的文档中这个比较奇怪，请看原文。 35. 避免空的image src 这种情况下，浏览器事实上会发向服务器发出另一个请求。这个问题实际上是rfc3986所规定的URI解析方式所造成的。

[转载]Best Practices for Speeding Up Your Web Site