其实吧 网络上已经对前端如何优化性能做了很多很好的总结 我下面要说的只是对他们的一些提炼和自己的总结
首先，大家可能有个误区 觉得应该把所有的性能方法都用上才是最棒的，但是有没有想到 万物都是有利有弊的。
比如：http请求数，网上都讲到要减少请求数，但一味的追求数量上的减少其实并不明智，我们更应该看到减少请求数是不是会增加单个请求的请求体量呢？要知道，如果一个文件体量过大也是会影响加载资源速度的。再比如，一个电商网站，你让他减少图片的使用，反而用css3来替代，这显然是不现实的。再比如，一个充满了动态交互的网站要它使用cdn（内容分发网络）也是不实际的
借用一位国外大牛的原话：
程序员们浪费了大量时间来思考，或者说是担忧，他们的程序中非关键部分的运行速度。并且他们对于性能的这些尝试，实际上却对代码的调试和维护有着非常消极的影响。我们应当忘记那些不重要的性能影响，在 97% 的时间里都可以这么说：过早优化乃万恶之源。当然我们也不应当在那关键的 3% 上放弃我们的机会。—— Donald Knuth
因此我们在考虑使用哪些优化性能手段的时候请务必结合各自公司需求以及项目特点来决定，好了肺话说得有点多了，下面来点干货吧
先帮大家copy了一份《雅虎军规》
1. 尽可能的减少 HTTP 的请求数
2. 使用 CDN（Content Delivery Network）
3. 添加 Expires 头(或者 Cache-control ) 比如：<script type="text/javascript" src="a.js?v=1.0.0"></script>
这里的v=1.0.0表示该js文件修改后的版本，之所以要这样命名是因为当我们使用了缓存时，缓存是否更新是通过文件名是否相同来判定的，因此我们需要更新js文件名。
4. Gzip 组件
5. 将 CSS 样式放在页面的上方
6. 将脚本移动到底部（包括内联的）
7. 避免使用 CSS 中的 Expressions
8. 将 JavaScript 和 CSS 独立成外部文件
9. 减少 DNS 查询
10. 压缩 JavaScript 和 CSS (包括内联的)
11. 避免重定向
12. 移除重复的脚本
13. 配置实体标签（ETags）
14. 使 AJAX 缓存：比如
异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存
$.ajax({
url : 'url',
dataType : "json",
cache: true,
success : function(son, status){ }
}）
当然以上性能方法我们可以通过一些插件测得 比如火狐的yslow插件 以及netTest pagespeed等
其实在现实开发中我们可以利用一些打包工具就可以替我们完成1和10的工作，但是我们在开发中也要有意识的去减少请求数
比如：是否可以使用一个API就可以获取多个列表的数据？是否可以用css3替换加载图片？是否可以使用css雪碧图？是否增加了数据非空验证？是否增加了数据相同验证功能？
再来扯扯CDN吧 CDN是英文content Delivery Network 即内容分发网络
咱们看看度娘是怎么解释它的吧
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
说得通俗点就是帮你减少界面延迟时间的。打个比方，京东目前在做的分布式自主仓库建设跟cdn很类似，在每一个大城市都自建一个自己的仓库，根据下单用户所在城市就近在本城市仓库中取货，从而实现用户当天下单当天到货的需求。但是正如前面所说并不是所有项目都适合使用它 只有那些静态资源比较多的，几天甚至几个月都不变化的那种。
那么我们前端该如何去利用cdn呢？
答案就是放手让别人去做吧 选个好的CDN服务商 买个服务 将你的项目域名和IP给她就OK了
再来说说减少DNS查询
等等，大家应该晓得何为DNS吧？
我们都知道网络通讯大部分是基于TCP/IP的，而TCP/IP是基于IP地址的，所以计算机在网络上进行通讯时只能识别如“202.96.134.133”之类的IP地址，而不能认识域名。我们无法记住10个以上IP地址的网站，所以我们访问网站时，更多的是在浏览器地址栏中输入域名，就能看到所需要的页面，这是因为有一个叫“DNS服务器”的计算机自动把我们的域名“翻译”成了相应的IP地址，然后调出IP地址所对应的网页。具体什么是DNS？ DNS( Domain Name System)是“域名系统”的英文缩写，是一种组织成域层次结构的计算机和网络服务命名系统，它用于TCP/IP网络，它所提供的服务是用来将主机名和域名转换为IP地址的工作。DNS就是这样的一位“翻译官”，它的基本工作原理可用域名：www.qq.com 通过DNS解析成IP地址 然后浏览器再根据返回的IP地址通过TCP/IP协议进行数据请求
关于DNS的获取流程：DNS是应用层协议，事实上他是为其他应用层协议工作的，包括不限于HTTP和SMTP以及FTP，用于将用户提供的主机名解析为ip地址。具体过程如下：
①用户主机上运行着DNS的客户端，就是我们的PC机或者手机客户端运行着DNS客户端了
②浏览器将接收到的url中抽取出域名字段，就是访问的主机名，比如http://www.baidu.com/
, 并将这个主机名传送给DNS应用的客户端，客户端会先从本地缓存查看是否有DNS缓存或是否过期，如果有就使用缓存的，没有就发起递归查询，这个时间是不可控的。
③DNS客户机端向DNS服务器端发送一份查询报文，报文中包含着要访问的主机名字段（中间包括一些列缓存查询以及分布式DNS集群的工作）
④该DNS客户机最终会收到一份回答报文，其中包含有该主机名对应的IP地址
⑤一旦该浏览器收到来自DNS的IP地址，就可以向该IP地址定位的HTTP服务器发起TCP连接
可见 如果我们的域名解析花费的时间过长的话也会直接影响资源的请求速度
那么我们该如何优化这方面的东西呢？
借用美图团队的做法就是：对于过期的记录我们采用懒更新的策略，当查到过期的缓存记录时，先返回过期记录给用户，同时再异步重新发起 DNS 查询更新缓存记录。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。
本人自己在项目中总结出有关性能优化的经验
一：尽可能少的去重排 因为牵一发动全身 骨架千万少动
二：遵循w3c规范 同时多看大牛以及类库源码
三：合理的使用代码分割 比如reduire.ensure()
按需请求等
四：在新技术不成熟时别去用
其他更详细的优化就交给其他大牛吧：
https://www.cnblogs.com/111testing/p/8978359.html
https://blog.csdn.net/u012545279/article/details/17679061
https://zhuanlan.zhihu.com/p/31689703
https://zhuanlan.zhihu.com/p/29442193
https://www.zhihu.com/question/40505685/answer/318258333
一般性能评测的维度有：白屏时间（就是页面资源请求完毕到页面出现第一个元素的时间）
首屏时间（就是第一屏渲染完成的时间）
整页时间（所以资源加载完成时间）
连接时间（与后台建立连接所用时间）
DNS时间（DNS域名解析时间）
js文件 加载时间（一般是请求个数/总时间 ）
下面推荐几个性能测试工具 http://www.mmtrix.com/
压力测试JMETER 不过要先安装JAVE JDK
首先，大家可能有个误区 觉得应该把所有的性能方法都用上才是最棒的，但是有没有想到 万物都是有利有弊的。
比如：http请求数，网上都讲到要减少请求数，但一味的追求数量上的减少其实并不明智，我们更应该看到减少请求数是不是会增加单个请求的请求体量呢？要知道，如果一个文件体量过大也是会影响加载资源速度的。再比如，一个电商网站，你让他减少图片的使用，反而用css3来替代，这显然是不现实的。再比如，一个充满了动态交互的网站要它使用cdn（内容分发网络）也是不实际的
借用一位国外大牛的原话：
程序员们浪费了大量时间来思考，或者说是担忧，他们的程序中非关键部分的运行速度。并且他们对于性能的这些尝试，实际上却对代码的调试和维护有着非常消极的影响。我们应当忘记那些不重要的性能影响，在 97% 的时间里都可以这么说：过早优化乃万恶之源。当然我们也不应当在那关键的 3% 上放弃我们的机会。—— Donald Knuth
因此我们在考虑使用哪些优化性能手段的时候请务必结合各自公司需求以及项目特点来决定，好了肺话说得有点多了，下面来点干货吧
先帮大家copy了一份《雅虎军规》
1. 尽可能的减少 HTTP 的请求数
2. 使用 CDN（Content Delivery Network）
3. 添加 Expires 头(或者 Cache-control ) 比如：<script type="text/javascript" src="a.js?v=1.0.0"></script>
这里的v=1.0.0表示该js文件修改后的版本，之所以要这样命名是因为当我们使用了缓存时，缓存是否更新是通过文件名是否相同来判定的，因此我们需要更新js文件名。
4. Gzip 组件
5. 将 CSS 样式放在页面的上方
6. 将脚本移动到底部（包括内联的）
7. 避免使用 CSS 中的 Expressions
8. 将 JavaScript 和 CSS 独立成外部文件
9. 减少 DNS 查询
10. 压缩 JavaScript 和 CSS (包括内联的)
11. 避免重定向
12. 移除重复的脚本
13. 配置实体标签（ETags）
14. 使 AJAX 缓存：比如
异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存
$.ajax({
url : 'url',
dataType : "json",
cache: true,
success : function(son, status){ }
}）
当然以上性能方法我们可以通过一些插件测得 比如火狐的yslow插件 以及netTest pagespeed等
其实在现实开发中我们可以利用一些打包工具就可以替我们完成1和10的工作，但是我们在开发中也要有意识的去减少请求数
比如：是否可以使用一个API就可以获取多个列表的数据？是否可以用css3替换加载图片？是否可以使用css雪碧图？是否增加了数据非空验证？是否增加了数据相同验证功能？
再来扯扯CDN吧 CDN是英文content Delivery Network 即内容分发网络
咱们看看度娘是怎么解释它的吧
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
说得通俗点就是帮你减少界面延迟时间的。打个比方，京东目前在做的分布式自主仓库建设跟cdn很类似，在每一个大城市都自建一个自己的仓库，根据下单用户所在城市就近在本城市仓库中取货，从而实现用户当天下单当天到货的需求。但是正如前面所说并不是所有项目都适合使用它 只有那些静态资源比较多的，几天甚至几个月都不变化的那种。
那么我们前端该如何去利用cdn呢？
答案就是放手让别人去做吧 选个好的CDN服务商 买个服务 将你的项目域名和IP给她就OK了
再来说说减少DNS查询
等等，大家应该晓得何为DNS吧？
我们都知道网络通讯大部分是基于TCP/IP的，而TCP/IP是基于IP地址的，所以计算机在网络上进行通讯时只能识别如“202.96.134.133”之类的IP地址，而不能认识域名。我们无法记住10个以上IP地址的网站，所以我们访问网站时，更多的是在浏览器地址栏中输入域名，就能看到所需要的页面，这是因为有一个叫“DNS服务器”的计算机自动把我们的域名“翻译”成了相应的IP地址，然后调出IP地址所对应的网页。具体什么是DNS？ DNS( Domain Name System)是“域名系统”的英文缩写，是一种组织成域层次结构的计算机和网络服务命名系统，它用于TCP/IP网络，它所提供的服务是用来将主机名和域名转换为IP地址的工作。DNS就是这样的一位“翻译官”，它的基本工作原理可用域名：www.qq.com 通过DNS解析成IP地址 然后浏览器再根据返回的IP地址通过TCP/IP协议进行数据请求
关于DNS的获取流程：DNS是应用层协议，事实上他是为其他应用层协议工作的，包括不限于HTTP和SMTP以及FTP，用于将用户提供的主机名解析为ip地址。具体过程如下：
①用户主机上运行着DNS的客户端，就是我们的PC机或者手机客户端运行着DNS客户端了
②浏览器将接收到的url中抽取出域名字段，就是访问的主机名，比如http://www.baidu.com/
, 并将这个主机名传送给DNS应用的客户端，客户端会先从本地缓存查看是否有DNS缓存或是否过期，如果有就使用缓存的，没有就发起递归查询，这个时间是不可控的。
③DNS客户机端向DNS服务器端发送一份查询报文，报文中包含着要访问的主机名字段（中间包括一些列缓存查询以及分布式DNS集群的工作）
④该DNS客户机最终会收到一份回答报文，其中包含有该主机名对应的IP地址
⑤一旦该浏览器收到来自DNS的IP地址，就可以向该IP地址定位的HTTP服务器发起TCP连接
可见 如果我们的域名解析花费的时间过长的话也会直接影响资源的请求速度
那么我们该如何优化这方面的东西呢？
借用美图团队的做法就是：对于过期的记录我们采用懒更新的策略，当查到过期的缓存记录时，先返回过期记录给用户，同时再异步重新发起 DNS 查询更新缓存记录。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。下面是新浪微博的图片域名，我们可以看到他有多个域名，这样可以保证这些不同域名能够同时去下载图片，而不用排队。不过如果当使用的域名过多时，响应时间就会慢，因为不用响应域名时间不一致。
本人自己在项目中总结出有关性能优化的经验
一：尽可能少的去重排 因为牵一发动全身 骨架千万少动
二：遵循w3c规范 同时多看大牛以及类库源码
三：合理的使用代码分割 比如reduire.ensure()
按需请求等
四：在新技术不成熟时别去用
其他更详细的优化就交给其他大牛吧：
https://www.cnblogs.com/111testing/p/8978359.html
https://blog.csdn.net/u012545279/article/details/17679061
https://zhuanlan.zhihu.com/p/31689703
https://zhuanlan.zhihu.com/p/29442193
https://www.zhihu.com/question/40505685/answer/318258333
http://tool.chinaz.com/
http://m.ip138.com/
首屏时间（就是第一屏渲染完成的时间）
整页时间（所以资源加载完成时间）
连接时间（与后台建立连接所用时间）
DNS时间（DNS域名解析时间）
js文件 加载时间（一般是请求个数/总时间 ）
下面推荐几个性能测试工具 http://www.mmtrix.com/
压力测试JMETER 不过要先安装JAVE JDK