前言

随着前端项目的扩大，浏览器渲染的压力会越来越严重。对于不同性能的计算机，为了能够让计算机渲染页面能够更加顺利，因此需要有性能优化是作为前端的必备知识。

平时使用的具体的性能优化方法如下：

一、减少http请求次数

1、HTTP请求建立和释放都要时间
HTTP请求从建立到关闭一共会经历一下几个步骤，这些步骤都是需要花费时间的，在网络情况差的时候，花费的时间更长。如果页面的资源非常碎片化，每个HTTP请求只带回来几K甚至不到1K的数据（比如各种小图标），那请求的性能是会非常浪费的。
步骤：
1.客户端连接到Web服务器
2.发送HTTP请求
3.服务器去接受请求并返回HTTP响应
4.释放连接TCP链接

2、浏览器对同一个域名的并发数量是有限制
浏览器对同一个域名下的资源请求是有限制的，如果页面的并发资源非常多，那后续的资源请求只能等到前面的资源下载后才开始，这也是我们为什么能在chrome network的Timing看到Queueing时间（原因之一，另外还有资源优先级什么的）。

3、解决方案
①控制CSS Sprite(雪碧图）
②合并脚本和样式表（JavaScript和CSS源码）
一般H5页面会用到很多的js和css代码，尤其是对于一些模块化的网站来说，文件会非常多，也会非常碎片化，因此初次启动页面的时候，可能一下子几十个请求出去了，导致首屏时间特别地慢，因此对于资源特别碎片化的网站，建议合并一些通用的代码，减少http请求。

二、打包压缩上线代码

1、代码方面
①体积更小，加载更快（tree-shaking，压缩合并）
②编译高级语言和语法（ts、es6、模块化）
③兼容性和错误提示（polyfill、postcss、eslint）
2、研发流程
①统一、高校地开发环境
②统一的构建流程和产出标准
③集成公司构建规范（提测、上线）

三、使用懒加载 （Lazy Loading）

1、什么是懒加载
懒加载也叫做“延迟价值”，它的核心思想是把对象的实例化延迟到真正调用该对象的时候，这样做的好处是可以减轻大量对象在实例化时对资源的使用，而不是在页面初始化的时候就预先将对象实例化。另外，懒加载可以将对象的实例化代码从初始化方法中独立出来，从而提高代码的可读性，以便于代码更好地组织。
2、如何应用
<img class="coupon-bg" v-lazy="couponSrc"></img>
couponSrc可以设置何时使用的时候进行赋值

四、使用雪碧图

雪碧图即为CSS Sprites技术，可以将多张图片合成一张，用background-position来定位具体图片的技术，，非常适合用于一整套小图标的应用场景。

五、动态渲染组件

六、CDN加载包

1、CDN是什么
CDN的全称是 Content Delivery Network，即内容分发网络。
CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
2、好处是什么
解决Internet网络拥挤的状况，提高用户访问网站的响应速度，提高加载速度。