网站性能提升最佳实践三

发表于 更新于 本文字数： 608 阅读时长 ≈ 2 分钟

https://developer.yahoo.com/performance/rules.html?guccounter=1#csslink

  • Content
  • Server
  • Cookie
  • CSS
  • JavaScript
  • Images
  • Mobile

原文从七个方面总结网站性能提升。

本篇总结Cookie、CSS、Mobile方面。

使用HTTP cookie的原因有多种，例如身份验证和个性化

服务器和浏览器通过HTTP headers交换有关cookie的信息

尽可能减小cookie的大小，有助于减少对用户响应时间的影响

确保使用无Cookie的请求来请求静态组件

创建一个子域并在其中托管所有静态组件

一些代理可能拒绝缓存带cookie的请求得到的组件

CSS

Put Stylesheets at Top 样式文件放到顶部

将样式表放到HEAD可以让页面逐步呈现

Avoid CSS Expressions 避免使用CSS表达式

css表达式可以动态的设置css属性

但是其调用次数过多，例如鼠标在页面上移动、放大缩小了窗口、页面滚动等

可以使用event handlers作为替代

Choose <link> Over @import 使用link而不是@import

In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.

Avoid Filters 避免使用Filters

IE专有的AlphaImageLoader过滤器旨在解决IE版本<7的半透明真彩色PNG的问题。该过滤器的问题是，当图像被下载时，它会阻止渲染并冻结浏览器。它还会增加内存消耗，而且是按每个元素应用，而不是按每张图片应用，所以问题会成倍增加。

最好的办法是完全避免使用AlphaImageLoader，而使用优雅降级的PNG8代替，这些在IE中都是可以的。如果你实在需要AlphaImageLoader，请使用_filter，以免影响IE7以上用户。

Mobile

Keep Components Under 25 KB 组件不超过25KB

此限制与以下事实有关：iPhone不会缓存大于25K的组件。

请注意，这是未压缩的大小。

缩小在这里非常重要，因为仅使用gzip可能还不够。

Pack Components Into a Multipart Document 打包组件

将组件打包到一个多部分的文档中，就像一封带有附件的电子邮件，它可以帮助你用一个HTTP请求获取多个组件

HTTP requests are expensive！

使用这项技术时，首先检查用户代理是否支持（iphone就不支持