前言
这个问题无论是实际项目还是面试都是经常碰到的，所以非常有必要总结一下。
下面分别从几个大的方面去分析一下前端性能优化，有些优化其实效果并不一定非常明显，但还是有必要知道。
减少HTTP请求
尽可能减少加载一个页面需要引用的资源个数，因为每一次HTTP请求都是客户端与服务端的一次重连，都是一笔不小的开销，可以采取的措施包括：
使用精灵图
CSS Sprites，又叫雪碧图，将页面中多个小图合并一张大图，然后采用background-position来定位不同的图片。
使用字体图标
对于一些简单的图标都可以采用字体图标来实现，一个几十kb的字体文件可以包含很多个图标，且可以随意设置颜色，无损放大。
如果你需要的只是少数几个图标，而字体文件比较大，还可以采用一些工具提取你所需要的那几个图标，然后重新导出一个更小的字体文件。
合并JS和CSS
开发时可能引入了很多个单独的css和js文件，上线后可以利用前端构建工具将其合并成一个文件，这样能大大减少请求次数。
合理使用域名
由于浏览器对于单个域名下的并发有最大连接限制（据说一般浏览器是6个），所以将静态资源分别放到不同的子域名下可以突破浏览器的并发限制，最大限度的利用带宽和资源。
但是，同一个网站使用的子域名也不是越多越好。域名既是个好东西，也是个坏东西。说它是个坏东西，是指当你没有恰当的使用它的时候。
当你在浏览器地址栏输入一个域名之后，浏览器首先需要将其解析成IP，然后再向服务器发起访问请求，这个解析的过程一般叫DNS解析。DNS解析是非常耗时的，特别是当你使用的是一些公共DNS解析服务的时候，有时候解析一个域名需要2-3s时间，甚至偶尔解析错误，导致你的网站根本访问不了！当你辛辛苦苦在其它方面优化提高了0.1s的访问速度时，一个DNS解析就让你的速度降低了数秒！
DNS解析拖慢网站访问速度主要体验在第一次访问的时候，当你第二次访问就很快了，因为浏览器会对DNS缓存。
综上，优化域名可以从以下几个方面出发：
- 减少域名个数，同一个网页不要使用太多的子域名，一般建议不超过3个，每增加一个子域名都会大大拖慢你网站的初次访问速度；
- 更换更好的DNS服务商，免费的不好用就用收费的，舍不得孩子套不着狼；
- 如果网站域名映射已经稳定了，不会经常改动了，将TTL值设置为最大，它可以让你的DNS缓存更久；
- 如果网站不需要暴露网址给用户（比如内嵌APP形式），可以干脆不用域名，直接使用IP，当然这个要看个人喜好，用域名还是有一些好处的；
DNS预解析
使用CDN和负载均衡
将原本放在一台服务器上的静态资源放到自建或者第三方CDN上，客户端请求时就近选择服务器，这样可以大大加快静态资源的访问速度，也可以缓解因为使用一台服务器造成的压力。
使用缓存
前端缓存
- 通过诸如
Cache-Control： max-age=12345600等meta信息主动控制网页的缓存时间； - 利用GET请求可以缓存、POST不能缓存的特点，适当地将一些POST请求变成GET请求，可以减少请求次数；
- 采用HTML5应用程序缓存Aplication Cache；
后端缓存
一些短时间内不会变化的数据，以及和用户无关数据都可以放入后端缓存，譬如Redis或者Memcached，避免每次都重新查询数据库。还可以直接缓存网页，客户端每次请求都是请求这个临时缓存的网页。
压缩
对大文件启用gzip
压缩JS和CSS
JS在开发时可能有大量的注释以及空格缩进等，压缩可以很好的减小文件体积，如果可以的话还可以混淆。
JS和CSS优化
JS和CSS尽量写在单独的文件中，这样可以增加被缓存的机会，如果写在HTML中的话，只要地址不同浏览器就会认为是不同的网址，所以每次都需要重新加载这些JS和CSS。
JS优化
- 减少DOM操作次数；
- JS文件放置在文件底部；
- 上线后屏蔽一切日志代码，console.log对性能的影响还是比较大的；
CSS优化
- 减少内联样式的使用（style）；
- css文件放在head中；
- 尽可能多的合并类似样式，比如如果2个class里面分别定义了10个CSS属性，其中只有1个不一样，那么就可以把这9个一样的拿出来写一个样式；
- 合并一些分开写的样式，比如border-width、border-style、border-color合并成border；
- 根据实际环境删除一些不必要的兼容性代码，比如如果你的项目只运行在移动端，那么诸如IE系列所有适配代码、-moz、-o等等这些玩意儿就不需要写了。
- CSS选择器优化；
图片优化
- 减少图片的使用，能用CSS实现的效果优先使用CSS实现；
- 图片格式的选择，一般建议使用jpg，有透明需求再用png；
- 图片质量的控制，web上的图片质量不需要太高，上线时注意检查项目中是否有体积过大的图片；
cookie优化
减小cookie体积；因为每次http请求都会携带当前path下所有的cookie发送到服务端，cookie太多无形中会造成一定的带宽浪费，如下图：
