前端性能优化方法

时间 2019-11-10

原文原文链接

1. 减小http请求数css

经常使用的减小http请求数有如下几种：html

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

2）合并压缩css样式表和js脚本，他们的共同目的都是为了减小http链接数。web

3）去掉没必要要的请求。开发写代码或者系统升级以后残留的无效请求链接。浏览器

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

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

2. 图片优化cookie

优化方法：网络

1）尽量的使用PNG格式的图片，它相对来讲体积较小。ide

2）对于不一样格式的图片，在上线以前最好进行必定的优化。

3）图片的延迟加载，也叫作赖加载。

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. 前端代码结构的优化