前端性能优化的方法

前端性能优化的方法：
1、减少http请求数；2、图片优化；3、使用CDN；4、开启GZIP；5、样式表和JS文件的优化；6、使用无cookie域名；7、前端代码结构的优化；等等

1. 减少http请求数

常用的减少http请求数有以下几种：

• 合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。

• 合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。

• 去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。

• 充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要依据，格式类似于Expires:sun ,20 Dec 2017 23:00:00 GMT。 如果当前时间小于Expires指定的时间，浏览器就会从缓存中直接获取相关的数据信息或html文件，如果当前时间大于Expires指定的时间，浏览器会向服务器发送请求来获取相关数据信息。

以Apache为例，可在Apache的配置文件httpd.conf中设置Expires。

2. 图片优化

优化方法：

• 尽可能的使用PNG格式的图片，它相对来说体积较小。

• 对于不同格式的图片，在上线之前最好进行一定的优化。

• 图片的延迟加载，也叫做赖加载。

3. 使用CDN

CDN即内容分发网络，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

4. 开启GZIP

GZIP 即数据压缩，用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单，到对应的web服务配置文件中设置一下即可。

以Apache为例，在配置文件httpd.conf中添加。

5. 样式表和JS文件的优化

一般我们会把css样式表文件放到文件的头部。比如，放到head标签中，这样可以让CSS样式表尽早地完成下载。对应js脚本文件，一般我们把他放到页面的尾部。

6. 使用无cookie域名

无cookie域名的概念：当发送一个请求时，同时还要请求一张静态的图片和发送cookie时，服务器对于这些cookie不会做任何使用，也就是说这些cookie没什么用，没不要随请求一同发送。

7. 前端代码结构的优化

拓展：页面加载的性能数据有哪些？
在dom出现之前能收集到的技术性能指标数据：

网络层的：页面域名解析时间、tcp时间、ttfb时间、download时间
浏览器渲染：页面开始的时间、domready的时间、Pageload 时间
页面加载详细数据：css、js、image、fonts等消耗的时间

一些性能优化的方式和手段总结：

更多→少用iframe，iframe优缺点