前端性能优化

前端性能优化

 2.1、概要

在保证功能的前提下，性能也非常关键。从上图可以看出如果性能太差，响应速度慢将带非常差的用户体验，会失去大量用户。好的性能要依托如下几个方面：

1)、服务器端

2)、网络速度，客户端与服务器之间的每个网络环节

3)、客户端软件与硬件配置

4)、前端的性能，资源的数量，大小，javascript的时间与空间复杂度等

要提高前端的性能可以从如下几个方面入手：

1)、尽量减少HTTP请求数量

2)、压缩

3)、缓存

4)、使用内容发布网络（CDN的使用）

5)、DNS Prefetch

6)、将CSS样式表放在顶部

7)、将javascript脚本放在底部

8)、使用外部javascript和CSS

9)、避免重定向

2.2、减少HTTP请求数量

前端优化的黄金准则指导着前端页面的优化策略：只有10%-20%的最终用户响应时间花在接受请求的HTML文档上，剩下的80%-90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表等）进行的HTTP请求上。

1、图片地图

2、CSS Sprite

3、Data URI Scheme（内联资源）

4、样式表的合并

5、使用Web Font字体图标

2.2.1、图片地图

图片地图与称热点图片，不算新技术，早在HTML4.0中就存在了，就是在图片的指定区域指定超链接。这样做的目的是将原本需要物理拆分的图片合并在一起，通过热点单独指定链接，间接的减少了客户端请求服务器图片的数量。

 

2.3、缓存

2.4.1、http头部缓存

<meta http-equiv="Expires" content="Tue, 01 Dec 2015 13:30:26 GMT" />

Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求新内容，可以使用客户端缓存的内容，但是请求还是会发生，状态为304。浏览器会默认开启缓存功能。

 

2.4、内容分发网络 （CDN）

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定，它是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。

比如我们在项目中使用jQuery ,加载本地服务器的jQuery可能不如资源公共库中做过CDN优化的资源快。

包括我以往的项目的静态资源，和公共库到时放在cdn

http://cdn.code.baidu.com/ 百度静态资源公共库

 

1)、通过 link 标签

< link rel="dns-prefetch" href="http://api.twitter.com" />

2)、通过 meta 标签

< meta http-equiv="x-dns-prefetch-control" content="on" />

3)、设置 Http header 的 x-dns-prefetch-control 属性为 on 进行控制。

Firefox: 3.5+ Chrome: Supported

Safari 5+ IE: 9

2.5、小节

优化是没有止境的，只有更快没有最快，下面两篇文章只介绍了更多关于前端优化的方法。

英文原文：https://developer.yahoo.com/performance/rules.html

中文翻译：http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html

《高性能网站建设指南》这本书中提出了一些规则：

规则1——减少HTTP请求

规则2——使用内容发布网络

规则3——添加Expires头

规则4——压缩组件

规则5——将样式表放在顶部

规则6——将脚本放在底部

规则7——避免CSS表达式

规则8——使用外部JavaScript和CSS

规则9——减少DNS查找

规则10——精简JavaScript

规则11——避免重定向

规则12——移除重复脚本

规则13——配置ETag

规则14——使AjaX可缓存