趁着周末会武汉参加同学会的机会, 在火车上终于把《高性能建站指南》看完了.哎, 收藏了那么多优质的电子书, 要么没时间看, 有时间的时候又不记得看, 现在唯一看书的机会就是火车上了.(上次回武汉考驾照在火车上把蝴蝶书给看了, 对js一些奇奇怪怪的感觉瞬间就明了了)

这篇文章就作为一个总结吧(好吧, 其实就是书的目录).

减少HTTP的请求

这个很好理解, 本身http就是很耗时的, 最简单直接的做法当然就是尽可能少的发出HTTP的请求.

• Image Maps

  将多个图片合并到一张, 通过map标签声明各个图片的位置, 然后用img的usemap属性指明图片所以来的map标签

• CSS Sprites

  雪碧图也是把多个icon放到一张图片中, 然后通过css的background属性引入进来, 并且通过background-position来指明图片在大图中的位置.

• Inline Images

  通过data: URL的模式在web页面中包含图片而且不需要http请求.

• Combined Scripts and Stylesheets

  合并js和css这个不必多少, 特别是用require.js, 既能保证模块化的思想也能压缩js.

使用内容发布网络

用CDN托管静态资源, 大家都是这么干的.

添加Expires头

通过设置Expires, Cache-Control: max-age=xxx来让浏览器做一些必要的缓存, 从而减少HTTP请求

压缩组件

通过设置头Accept-Encoding: gzip, deflate表示浏览器支持的压缩格式, 服务器返回的头中通过Content-Encoding: gzip来表示服务器返回的数据压缩格式

将样式表放在顶部

如果不放在顶部会有白屏或是无样式内容的闪烁现象, 这是因为如果样式不先加载进来, 那么浏览器先渲染好dom元素之后又要有结构样式上的改变, 就会造成白屏或是闪烁现象.

实际上在HTML的规范中, link只能出现在head之中, 而之所以浏览器支持把link放到head外面纯粹是为了解决历史遗留问题.所以遵守规范总是好的.

将脚本放到底部

脚本不影响页面渲染的情况下把他放到最下面, 先让用户看到页面.

在HTTP 1.1规范中建议浏览器从每个主机名并行的下载2个组件(也可以自己配置), 但是如果有脚本在下载, 那么就不能并行下载其他的组件.因为脚本可能会使用类似document.write等方式对页面渲染产生影响, 所以浏览器会等待脚本的下载来确保正确的布局, 并且不让并行下载可以保证脚本的执行顺序.

避免css表达式

这东西不太熟, 说是有些时候会影响页面的加载速度, 比较危险, 所以建议不要使用(非常了解除外).

使用外部的css和js

内联的js和css会使文档过大, 并且不利于代码重用, 影响页面加载速度, 但是却会减少HTTP请求.但实际上, 由于CDN和浏览器缓存的存在, 使得内联js和css让文档过大的缺点变得非常明显, 所以要尽量使用外部的css和js.

减少DNS查找

通过使用Keep-Alive和较少的域名来减少DNS查找

精简js

压缩和精简js代码能够减少网络传输的时间开销

避免重定向

使用了重定向, 当最终的html请求到之前, 不会有任何的组件的下载和页面渲染.虽然使用重定向能很方便自然的解决问题, 但是性能上带来的损害是无法弥补的.所以尽量使用一些替代方案

移除重复脚本

自己注点意

配置Etag

ETag是If-Modified-Since的增强(If-Modified-Since只能精确到秒), 会在http头中增加If-None-Match信息. 但是, 当在集群环境下ETag会导致缓存失效, 因此需要根据实际情况开始或关闭ETag.

使Ajax可缓存

确保Ajax请求遵循性能指导, 尤其应具有长久的Expires头.