优化网站设计

雅虎的工程师团队曾经给出过35个最佳实践

测试工具Yslow http://developer.yahoo.com/yslow/，Chrome 或者firefox ，上有 Yslow这个扩展组件

YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。

YSlow可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意见。

我用的是firefox，但是安装上插件后并不能用，查找了下原因，原来Yslow暂时不支持firefox 36，

使用它的书签版本。
访问这里 http://yslow.org/mobile/

把页面最后的那个 Desktop Bookmarklet Installation Instructions 里的 Yslow 按钮拖拽到火狐的书签工具栏即可。
使用的时候在需要的页面点击 yslow的书签即可

1.应该尽可能加减少请求数

除了页面本身这个请求之外，总是需要加载其他一些资源的

过多的外部请求，会很直接地降低页面加载的速度

如何减少请求次数：

  1. 合并外部资源文件(如javascript,css,图片文件）
    1. 图片的合并,是将多个图片合并为一个图片,然后采用css的一些设置（background-image,background-position) 来使用它们
    2. javascript和css文件的合并
  2. 使用Inline images 这种方式. 这个方式可能依赖于浏览器的实现，目前并不是所有的浏览器都支持

手工合并js、css的缺点

  1. 破坏了原有文件的结构
  2. 不同页面需要的文件组合可能是不一样的，这种情况下会需要产生多个不同的文件，而且需要比较小心地维护它们
  3. 如果文件的内容发生变化，就需要重新再来一次

2.使用CDN

CDN的全称是Content Delivery Network，内容交付网络

内容通常指的是内容文件（例如javascript，css，图片等等）

因为浏览器是根据域(Domain)来缓存内容资源的，只要域不一样，那么它就需要重复下载这些资源，而且使用同样的方式将它们缓存起来。

因为重复地下载，缓存这些同样的脚本文件是需要占用带宽和本地缓存文件空间的。

可以做了一个公用的子站点，里面存放了使用的jquery、css等公共文件

使用CDN，尤其是使用第三方的CDN，需要考虑网络的可到达性

 3.对资源添加缓存控制

　　静态资源的缓存

  1. HTM,HTML文件
  2. JAVASCRIPT文件
  3. CSS文件
  4. 图片文件

　　服务器端不做任何的设置，缓存时间取决于

  1. 浏览器缓存中的这个文件是否被清理
  2. 服务器对应的文件是否有更新

　　动态资源的缓存　

  1. 页面缓存
  2. 片段缓存
  3. 数据缓存

4.对资源启用压缩

浏览器在发起请求的时候，可以通过下面这个Request Header来表明自己支持的压缩算法　　

使用最多的是Gzip

　　哪些资源适合做压缩

  1. 静态网页（HTML,HTM）
  2. 文本文件（TEXT,XML等）
  3. 脚本文件（JAVASCRIPT)
  4. 样式文件（CSS)

　　哪些资源不适合做压缩

  1. 图片（JPG,GIF,PNG)
  2. 特殊组件（FLASH, XAP）

5.在顶部放置样式定义

6.在文档底部放置脚本定义或引用

将脚本定义或引用放在文档底部有助于提高页面加载时的并行度，从而实现提速的目的。

作为妥协的一种方案，现在允许在添加脚本的时候，设置一个DEFER属性，标识这个脚本可以延迟加载。
　　
<script src="default.js" defer="defer"></script>

只要脚本是在document.ready之后才应该执行的，那么就都可以移动到文档底部

7.避免在CSS中使用表达式

8.将脚本文件和样式表作为外部文件引用

好处：

  1. 提高了脚本文件和样式表的复用性
  2. 减小了页面体积，可以提高页面加载速度
  3. 提高了脚本和样式的可维护性

缺点：

　　可能会增加额外的请求

在页面中定义脚本和样式的情况

  1. 这些脚本和样式是专用于某个页面的
  2. 这些页面并不经常访问
  3. 这些脚本和样式很少

9.减少DNS查找的次数

 

  1. 由于DNS查找是需要时间的，应该尽可能地减少DNS查找的次数。
  2. 减少DNS查找次数，最理想的方法就是将所有的内容资源都放在同一个域(Domain)下面，这样访问整个网站就只需要进行一次DNS查找，这样可以提高性能。
  3. 但由于这些资源都在同一个域，而HTTP /1.1 中推荐客户端针对每个域只有一定数量的并行度（它的建议是2），那么就会出现下载资源时的排队现象，这样就会降低性能。
  4. 所以，最好在一个网站里面使用至少2个域，但不多于4个域来提供资源

10.最小化JAVASCRIPT和CSS

 

尽可能地减少这两种文件的体积，以便加快下载速度

  1. 去除不必要的格式符、空白符、注释符
  2. 模糊（Obfuscation）处理JAVASCRIP脚本源代码

 工具JSMin，在线工具

 

11.避免重定向

重定向是，用户的原始请求被重定向到其他的请求

　　301表示永久重定向

　　302表示临时重定向

重定向是无法完全避免的，适当地使用重定向能为网站提供更好的功能

  • 在定义链接地址的href属性的时候，尽量使用最完整的、直接的地址
  • 在使用Response.Redirect的时候，设置第二个参数为false
  • 通过DNS中的CNAME的机制来定义别名

12.删除重复脚本

 

posted @ 2016-07-18 09:17  慕尘  阅读(144)  评论(0)  编辑  收藏  举报