Skip to content

Latest commit

 

History

History
74 lines (51 loc) · 3.95 KB

performance.md

File metadata and controls

74 lines (51 loc) · 3.95 KB

性能优化部分

参考:

网页性能管理详解-阮一峰

Web前端性能优化——如何提高页面加载速度

1.减少HTTP请求

  • 图片地图
  • CSS sprites
  • 字体图标
  • 合并脚本和样式表

2.使用CDN

  • CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。在优化性能时,向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器。
  • CDN还可以进行数据备份、扩展存储能力,进行缓存,同时有助于缓和Web流量峰值压力。
  • CDN的缺点:
  1. 响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。
  2. 如果CDN服务质量下降了,那么你的工作质量也将下降
  3. 无法直接控制组件服务器

3.为文件头指定Expires或Cache-Control,使内容具有缓存性。

  • 区分静态内容和动态内容,避免以后页面访问中不必要的HTTP请求。

4. 避免空的src和href

  • 留意具有这两个属性的标签如link,script,img,iframe等;

5. 使用gzip压缩内容

6. 把CSS放到顶部

  • 将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素,浏览器会阻塞内容逐步呈现,造成“白屏”。

7. 把JS放到底部

  • js的下载和执行会阻塞Dom树的构建(严谨地说是中断了Dom树的更新),所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。

8. 避免使用CSS表达式

9. 将CSS和JS放到外部文件中

10.减少DNS查找

11.精简CSS和JS

  • 目的就是减少下载的文件体积,可考虑压缩工具JSMin和YUICompressor。

12.避免跳转

13.剔除重复的JS和CSS

  1. 形成良好的脚本组织。重复脚本有可能出现在不同的脚本包含同一段脚本的情况,有些是必要的,但有些却不是必要的,所以需要对脚本进行一个良好的组织。
  2. 实现脚本管理器模块。

14.配置ETags

ETag主要是为了解决Last-Modified无法解决的一些问题:

  1. 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;
  2. 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);
  3. 某些服务器不能精确的得到文件的最后修改时间。

15.使AJAX可缓存,使用GET来完成AJAX请求

  • Ajax的一个明显的优点就是向用户提供了即时反馈,因为它异步的从后端web服务器请求信息。
  • 用户是否需要等待的关键因素在于Ajax请求是被动的还是主动的。被动请求是为了将来来使用而预先发起的,主动请求是基于用户当前的操作而发起的
  • 什么样的AJAX请求可以被缓存?
  1. POST的请求,是不可以在客户端缓存的,每次请求都需要发送给服务器进行处理,每次都会返回状态码200。(可以在服务器端对数据进行缓存,以便提高处理速度)
  2. GET的请求,是可以(而且默认)在客户端进行缓存的,除非指定了不同的地址,否则同一个地址的AJAX请求,不会重复在服务器执行,而是返回304。
  3. 在进行Ajax请求的时候,可以选择尽量使用get方法,这样可以使用客户端的缓存,提高请求速度。

16.延迟加载,预加载

17.减少DOM元素个数

18.尽量减少iframe的个数

19.减少Cookie的大小

20.用代替@import