Dead Horse's Blog

高性能网站的14条前端规则

2012-01-24

一、减少HTTP请求

  • 图片地图
  • CSS Sprites
  • 内联图片(可以放在CSS中,跨页面时可以缓存)
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA..." alt="内联图片">
  • 合并CSS和JS文件

二、使用CND

三、添加Expires头

  • Expires头: Expires: THu, 15 Apr 2010 20:00:00 GMT
  • Max-Age:Cache-Control: max-age-315360000
  • Max-Age不需要每次计算时间。为不会经常变化的图片、JS、CSS等添加缓存。
  • 通过修改文件名强制刷新缓存(版本号)

四、压缩组件

  • gzip压缩
  • HTML,脚本,XML,JSON等任何文本响应
  • 图片和PDF不需要压缩,已经是压缩格式了
  • 压缩成本在于服务器端需要耗费CPU时间进行压缩
  • 代理缓存问题:需要让代理缓存多份(未压缩和压缩)。Vary: Accept-Encoding,为Accept-Encoding的每个值缓存一份
  • 考虑边缘情况,浏览器对gzip的支持
  • 可以通过Cache-Control: Private来禁用代理缓存,避免代理+浏览器边缘情形缺陷

五、CSS放在顶部

  • CSS放在底部,浏览器会阻塞内容逐步呈现
  • CSS放在顶部通过@import引入的时候,可能会出现和放在底部一样的效果

六、JS放在底部

  • 脚本下载会阻塞后面内容的呈现
  • 焦痕下载会阻塞对其后面组件的下载

七、避免CSS表达式

  • 更新表达式的频率会非常高
  • 通过JS事件来处理
  • CSS表达式内一次计算后重新赋值语句

八、使用外部Javascript和CSS

  • 纯粹而言,内联更快
  • 外部脚本利于组件重用
  • 大量缓存情况下,外部脚本表现好
  • 加载后下载:在首页中内联样式,延迟下载以后需要用到的文件并缓存
  • 动态内联:通过cookie指示,如果有缓存(cookie),则引用外部,反之则内联加载

九、减少DNS查找

  • 查找返回的DNS附带一个TTL值,告诉客户端缓存多久
  • 减少下载对象主机名的数量

十、精简Javascript

  • 精简:压缩JS
  • 混淆:压缩JS同时缩短变量名

十一、避免重定向

十二、移除重复副本

  • 通过模版系统中实现脚本版本控制模块

十三、配置Etag

  • ETag会在返回结果生成一串唯一标识字符串,格式:ETag: "10c24bc-4ab-457e1c1f",必须有引号
  • 在集群服务器和代理的情况下可能带来问题
  • 对ETag进行重新配置,或者移除

十四、使Ajax可缓存

  • 按照之前的规则优化Ajax(压缩、精简...)
  • 缓存Ajax
blog comments powered by Disqus