雅虎34条

TOC
  1. 1. 1.尽量减少HTTP请求次数
  2. 2. 2.减少DNS查找次数
  3. 3. 3.避免跳转
  4. 4. 4.使用Ajax缓存
  5. 5. 5.推迟加载内容
  6. 6. 6.预加载
  7. 7. 7.减少DOM元素
  8. 8. 8.划分子域
  9. 9. 9.减少iframe数量
  10. 10. 10.避免重定向
  11. 11. 11.使用CDN
  12. 12. 12.为文件头指定Expires或Cache-Control
  13. 13. 13.开启Gzip压缩
  14. 14. 14.配置Etag(实体标签)
  15. 15. 15.尽早刷新输出缓冲
  16. 16. 16.使用GET来完成AJAX请求
  17. 17. 17.把样式表置于顶部
  18. 18. 18.避免使用CSS表达式(Expression)
  19. 19. 19.使用外部JavaScript和CSS
  20. 20. 20.压缩合并JavaScript和CSS
  21. 21. 21.用代替@import
  22. 22. 22.避免使用滤镜
  23. 23. 23.把脚本置于页面底部
  24. 24. 24.剔除重复脚本
  25. 25. 25.减少DOM访问
  26. 26. 26.开发智能事件处理程序
  27. 27. 27.减小Cookie体积
  28. 28. 28.对于页面内容使用无coockie域名
  29. 29. 29.优化图像
  30. 30. 30.优化CSS Spirite
  31. 31. 31.不要在HTML中缩放图像
  32. 32. 32.favicon.ico要小而且可缓存
  33. 33. 33.保持单个内容小于25K
  34. 34. 34.打包组件成复合文本

参考1:官方传送门在此,请肆意点击.
参考2:中文原文传送门在此,请肆意点击.
参考3:中文原文传送门在此,请肆意点击.

1.尽量减少HTTP请求次数

什么是HTTP请求?每一次网页内容的获取,就是HTTP请求的具体展现.
不同浏览器的请求并发数是有限的,知乎已经有大神解释这个问题了,拿去.
常见的优化有:

  • 合并文件(典型案例:雪碧图)
  • 图片Base64编码

2.减少DNS查找次数

访问域名的时候,DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样也是需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。

缓存DNS查找可以改善页面性能。这种缓存需要一个特定的缓存服务器,这种服务器一般属于用户的ISP提供商或者本地局域网控制,但是它同样会在用户使用的计算机上产生缓存。DNS信息会保留在操作系统的DNS缓存中(微软Windows系统中DNS Client Service)。大多数浏览器有独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录,因此在一次请求中它不会受到操作系统的影响。

  • 问题来了: 子域的数量和DNS查询效率?

3.避免跳转

  • 对搜索引擎影响大
  • 请求数变多
  • 用户体验变差

4.使用Ajax缓存

  • Get和Post请求,Get是可以被缓存的,没有被修改就返回304.
  • 不是所有的Ajax请求都需要缓存,否则和静态资源没区别

5.推迟加载内容

  • 按需加载/懒加载

6.预加载

  • 提升用户体验

7.减少DOM元素

  • DOM越多,查询越慢

8.划分子域

  • 每个域的并发请求数量限制

9.减少iframe数量

  • 这货是阻塞加载

10.避免重定向

  • 301 永久重定向, 即: 假如我要请求a.com,但是却跳到了b.com,a.com会发请求到b.com,浪费时间. 但是搜索引擎可以智能跳过.
  • 302 临时重定向, 即:页面找到,但是不在原始位置,重新查找.搜索引擎依然机械这一过程.
  • 这两个状态码对搜索引擎差别非常大,这两个行为增加了服务器的访问次数.

11.使用CDN

内容分发网络.

12.为文件头指定Expires或Cache-Control

  • 如过Apache开启了expire模块,浏览器发送资源请求的时候,服务器返回资源的同时,返回一个expire的http头,这是一个时间值,表示资源在本地的过期时间.这个值会存在本地,如果再返回来的值不超过规定时间,那么就一直使用这个资源不再发送HTTP请求
  • Cache-Control,HTTP协议中常用头部之一,负责页面缓存机制.有更多的选项,处理方式也更多.

13.开启Gzip压缩

14.配置Etag(实体标签)

  • Entity Tag,属于HTTP协议,受Web服务支持,它使用特殊的字符串来标识某个请求的版本.如果浏览器和服务器的Etag一致,那么该资源就没有改变,服务器便会发送回一个极短的响应,包含HTTP “304 未修改”的状态,前端使用本地缓存.生成ETag常用的方法包括对资源内容使用抗碰撞散列函数,使用最近修改的时间戳的哈希值,甚至只是一个版本号。为了避免使用过时的缓存数据,用于生成ETag的方法应保证(同时尽可能的实用)每一个ETag都是唯一的。
  • 这里有一个浏览器缓存详解:expires,cache-control,last-modified,etag详细说明

15.尽早刷新输出缓冲

  • 待补充

16.使用GET来完成AJAX请求

  • 因为可缓存

17.把样式表置于顶部

  • 避免页面闪烁和重绘

18.避免使用CSS表达式(Expression)

  • 吃性能

19.使用外部JavaScript和CSS

  • 可缓存
  • 重用率价值大
  • 外部压缩价值大

20.压缩合并JavaScript和CSS

21.用代替@import

先来看看这两个的区别:
link:

  • link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
  • link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
  • link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
  • link支持使用Javascript控制DOM去改变样式.

@import:

  • 语法:@import url(style.css)
  • 增加请求
  • 不支持DOM操作

22.避免使用滤镜

  • IE的东西, 略

23.把脚本置于页面底部

24.剔除重复脚本

25.减少DOM访问

  • DOM的操作很慢

26.开发智能事件处理程序

  • 合理使用冒泡/捕获

27.减小Cookie体积

  • 去除没有必要的cookie,如果网页不需要cookie就完全禁掉
  • 将cookie的大小减到最小
  • 注意cookie设置的domain级别,没有必要情况下不要影响到sub-domain
  • 设置合适的过期时间,比较长的过期时间可以提高响应速度

28.对于页面内容使用无coockie域名

  • 待补充

29.优化图像

  • 这个不用说了吧…

30.优化CSS Spirite

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

31.不要在HTML中缩放图像

我们来看看W3school给出的解释:
您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样,是因为浏览器为了能够显示每一个加载的图像,而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小,然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局,以便把图像插入到显示当中。这同时也告诉我们,图像是独立的文件,它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法,因为浏览器在显示相邻的以及后面的文档内容之前,必须要检查每一个图像文件,并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟,从而打断用户的阅读。

对于创作者来说,一种更为有效的方法是通过 标签的 height 和 width 属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了位置,从而可以加速文档的显示,还可以避免文档内容的移动。这两个属性都要求是整数值,并以像素为单位来表示图像尺寸。这两个属性在 标签中出现的次序并不重要。

说了那么多,其实就是避免重绘.

32.favicon.ico要小而且可缓存

  • 网站图标文件favicon.ico,不管你服务器有还是没有,浏览器都会去尝试请求这个图标。所以必须存在,以避免404
  • 文件尽量小,最好小于1k
  • 设置一个长的过期时间

33.保持单个内容小于25K

  • 这限制是因为iphone,他只能缓存小于25K,注意这是解压后的大小。所以单纯gzip不一定够用,精简文件工具要用上了。

34.打包组件成复合文本

访客评论