追求前端性能优化是每个前端工程师必须要做的，只能说没有最好只有更好，所以性能这块的讨论永无止境，很多初学者想要了解的今天我就从实际开发角度来讲一下常见的前端优化问题和解决方式，主要针对初学者，喜欢记得点赞收藏哦！对文章有更好的补充烦请私聊我，谢啦！(*^▽^*)

减少HTTP请求次数

尽量合并图片、CSS、JS

​        加载网页中有大半的响应时间是花在图片、样式、脚本等资源下载上，需要尽可能减少HTTP请求次数来缩短响应时间。以图片举例，在网站开发中很多地方都需要使用到小图标，像下面某网站的区块内的小图标就是用的img标签引入6张图片实现的。

​        而网站在加载一次外部资源文件时都会发起一次http请求，有6张图片也就要发起6次http请求，等请求结束后还要等待服务器返回图片数据才能将图片加载出来显示在网页当中，共6个来回，当图片很多时会因为大量的资源请求导致网页打开速度下降，消耗更多性能。从性能提升角度来考虑，尽量合并图片，使用“雪碧图”（也叫“精灵图”，下图所示）会更好。雪碧图指的是将多个图片拼接为一张图片，通过background-image（背景图片）引入。因为浏览器对同一张图片资源只会发起一次请求，这样即便网页内多个地方使用了该张图片，http资源请求也只会有一个来回，大大减少了等待时间和http资源的消耗，从而提升性能。

雪碧图/精灵图

​        另外现在市面上很多都是使用svg和字体图标来做，这些点你还是应该知道，毕竟还是有人没有注意这些细节，如果你也是这样做的尽早修正哦！

css和js同上，多个文件尽量合并为一个文件达到提升性能的目的，可以使用服务器端来自动合并或者使用文件合并工具。需要注意的是，像css和js我说的能合并就尽量合并，不是所有的css文件等都合并，比如出于维护性等考虑会单独分离组件css，这种就不能合并了，看场景决定用什么方式能更好提升性能。

对于初学者而言，非必要场合不要使用iframe标签

​        虽然使用iframe比较方便，可以在HTML页面中嵌入HTML页面，但缺点也很明显，如下：

• iframe内嵌的网页中的外链需要额外处理，会增加http请求
• iframe不利于搜索引擎抓取信息，影响网页的自然排名
• 页面中使用多个iframe会分散用户的注意力，对用户体验相当不好
• iframe还会阻塞页面加载，延迟window的onload事件加载，造成网页巨慢的错觉这个仅仅针
  

这个仅仅针对初学者，因为这类标签通常只在学习类网站(比如：w3c)里用来实现实践练习的功能，大部分都是使用的ajax来替代iframe实现效果。

w3c上使用iframe的区块script标签要紧挨着body结束标签

js本身是单线程，加载js时其中复杂运算多时容易造成长时间阻塞，建议将script标签放后面。并且初学者经常遇到的问题是写的js操作标签没有效果，大部分是因为js代码放在标签上面的缘故，这点要注意一下。

压缩CSS和JS

比如大家都知道的jquery，引入jquery.js文件时常看见有几个不同名字的js文件。

我们下载来看看：

jquery.js是完整版，但体积也是最庞大的，因为其中的代码注释、换行及空格都保留了，而jquery.min.js是精简版，通过压缩工具删除换行、空格、注释，把变量名等精简，明显能看到体积就要小很多了。对于开发中，文件越小消耗的资源也就越少，所以上线项目前都需要将css和js等压缩一遍。

减少Cookie的大小

现在有了h5的本地存储api，但还是会有不少地方需要用到cookie用来存储一些数据。切记一定不要在cookie里存放太多数据，因为每次与后端通信时浏览器会跟着发送一次cookie，负重太大很累。

追求前端性能优化是每个前端工程师必须要做的，只能说没有最好只有更好，所以性能这块的讨论永无止境，很多初学者想要了解的今天我就从实际开发角度来讲一下常见的前端优化问题和解决方式，主要针对初学者，喜欢记得点赞收藏哦！对文章有更好的补充烦请私聊我，谢啦！(*^▽^*)

减少HTTP请求次数

尽量合并图片、CSS、JS

​        加载网页中有大半的响应时间是花在图片、样式、脚本等资源下载上，需要尽可能减少HTTP请求次数来缩短响应时间。以图片举例，在网站开发中很多地方都需要使用到小图标，像下面某网站的区块内的小图标就是用的img标签引入6张图片实现的。

​        而网站在加载一次外部资源文件时都会发起一次http请求，有6张图片也就要发起6次http请求，等请求结束后还要等待服务器返回图片数据才能将图片加载出来显示在网页当中，共6个来回，当图片很多时会因为大量的资源请求导致网页打开速度下降，消耗更多性能。从性能提升角度来考虑，尽量合并图片，使用“雪碧图”（也叫“精灵图”，下图所示）会更好。雪碧图指的是将多个图片拼接为一张图片，通过background-image（背景图片）引入。因为浏览器对同一张图片资源只会发起一次请求，这样即便网页内多个地方使用了该张图片，http资源请求也只会有一个来回，大大减少了等待时间和http资源的消耗，从而提升性能。

雪碧图/精灵图

​        另外现在市面上很多都是使用svg和字体图标来做，这些点你还是应该知道，毕竟还是有人没有注意这些细节，如果你也是这样做的尽早修正哦！

css和js同上，多个文件尽量合并为一个文件达到提升性能的目的，可以使用服务器端来自动合并或者使用文件合并工具。需要注意的是，像css和js我说的能合并就尽量合并，不是所有的css文件等都合并，比如出于维护性等考虑会单独分离组件css，这种就不能合并了，看场景决定用什么方式能更好提升性能。

对于初学者而言，非必要场合不要使用iframe标签

​        虽然使用iframe比较方便，可以在HTML页面中嵌入HTML页面，但缺点也很明显，如下：

• iframe内嵌的网页中的外链需要额外处理，会增加http请求
• iframe不利于搜索引擎抓取信息，影响网页的自然排名
• 页面中使用多个iframe会分散用户的注意力，对用户体验相当不好
• iframe还会阻塞页面加载，延迟window的onload事件加载，造成网页巨慢的错觉这个仅仅针
  

这个仅仅针对初学者，因为这类标签通常只在学习类网站(比如：w3c)里用来实现实践练习的功能，大部分都是使用的ajax来替代iframe实现效果。

w3c上使用iframe的区块script标签要紧挨着body结束标签

js本身是单线程，加载js时其中复杂运算多时容易造成长时间阻塞，建议将script标签放后面。并且初学者经常遇到的问题是写的js操作标签没有效果，大部分是因为js代码放在标签上面的缘故，这点要注意一下。

压缩CSS和JS

比如大家都知道的jquery，引入jquery.js文件时常看见有几个不同名字的js文件。

我们下载来看看：

jquery.js是完整版，但体积也是最庞大的，因为其中的代码注释、换行及空格都保留了，而jquery.min.js是精简版，通过压缩工具删除换行、空格、注释，把变量名等精简，明显能看到体积就要小很多了。对于开发中，文件越小消耗的资源也就越少，所以上线项目前都需要将css和js等压缩一遍。

减少Cookie的大小

现在有了h5的本地存储api，但还是会有不少地方需要用到cookie用来存储一些数据。切记一定不要在cookie里存放太多数据，因为每次与后端通信时浏览器会跟着发送一次cookie，负重太大很累。