四、优化及调试--网站优化--Yahoo军规下

时间:2022-04-28 16:47:20

21、根据域名划分页面内容

  很显然, 是最大限度地实现平行下载

22、尽量减少iframe的个数

  考虑即使内容为空,加载也需要时间,会阻止页面加载,没有语意,注意iframe相对于其他DOM元素高出1-2个数量级的开销,它会在典型方式下阻塞onload事件,IE和Firefox中主页面样式表会阻塞它的下载。

23、避免404

  HTTP请求时间消耗是很大的,有些站点把404错误响应页面改为“你是不是要找***”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。

24、减少Cookie的大小

  去除不必要的coockie
  使coockie体积尽量小以减少对用户响应的影响
  注意在适应级别的域名上设置coockie以便使子域名不受影响
  设置合理的过期时间。较早地Expire时间和不要过早去清除coockie,都会改善用户的响应时间。

25、使用无cookie的域

  确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容。

26、减少DOM访问

  缓存已经访问过的有关元素
  线下更新完节点之后再将它们添加到文档树中
  避免使用JavaScript来修改页面布局

27、开发智能事件处理程序

  有时候我们会感觉到页面反应迟钝,这是因为DOM树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用event
delegation(事件代理)是一种好方法了。如果你在一个div中有10个按钮,你只需要在div上附加一次事件句柄就可以了,而不用去为每一个按
钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。
  你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。
  你可能会希望用DOMContentLoaded事件来代替 事件应用程序中的onAvailable方法。

28、用<link>代替@import

  在IE中,页面底部@import和使用<link>作用是一样的,因此最好不要使用它。

29、避免使用滤镜

  完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用 AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。

30、优化图像

  尝试把GIF格式转换成PNG格式,看看是否节省空间。在所有的PNG图片上运行pngcrush(或者其它PNG优化工具)

31、优化CSS Spirite

  在Spirite中水平排列你的图片,垂直排列会稍稍增加文件大小;
  Spirite中把颜色较近的组合在一起可以降低颜色数,理想状况是低于256色以便适用PNG8格式;
  便于移动,不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。 100×100的图片为1万像素,而1000×1000就是100万像素。

32、不要在HTML中缩放图像——须权衡

  不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要:

  <img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />

  那么你的图片(mycat.jpg)就应该是100×100像素而不是把一个500×500像素的图片缩小使用。这里在下文有更有趣的分析。

33、favicon.ico要小而且可缓存

  favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要
返回一 个404 Not
Found的响应。由于是在同一台服务器上,它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序,例如在IE中当你在
onload中请求额外的文件时,favicon会在这些额外内容被加载前下载。

  因此,为了减少favicon.ico带来的弊端,要做到:
  文件尽量地小,最好小于1K
  在适当的时候(也就是你不要打算再换favicon.ico的时候,因为更换新文件时不能对它进行重命名)为它设置Expires文件头。你可以很安
全地 把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。
  Imagemagick可以帮你创建小巧的favicon。

34、保持单个内容小于25K

  因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求,因此精简文件就显得十分重 要。

35、打包组件成复合文本

  页面内容打包成复合文本就如同带有多附件的Email,它能够使你在一个HTTP请求中取得多个组件(切记:HTTP请求是很奢侈的)。当你使用这条规 则时,首先要确定用户代理是否支持(iPhone就不支持)。