前端性能优化

1、减少HTTP请求（一个完整的http请求需要经过DNS查找，TCP握手，浏览器发出请求，服务端处理并响应请求，浏览器接收响应请求等过程）
2、使用HTTP2
3、使用服务端渲染
4、静态资源使用CDN
5、将CSS放在头部，Javascript放在底部或者延迟加载（设置defer或者async）
6、使用字体图标代替图片图标
7、善用缓存，不重复加载相同资源
8、压缩文件（我们可以使用webpack进行文件压缩）
Javascript：UglifyPlugin
CSS：MinCssExtractPlugin
HTML：HtmlWebpackPlugin
还可以使用更好的方式gzip进行压缩，可通过向http请求头中的Accept-Encoding添加Gzip标识开启压缩；webpack配置方法：

npm install compression-webpack-plugin
npm install compression

const CompressionPlugin = require(compression-webpack-plugin)
module.exports = {
	plugins: [new CompressionPlugin()]
} 

9、图片优化
（1）延迟加载

<img data-src="https://avatars0.githubusercontent.com/u/22117876?s=460&u=7bd8f32788df6988833da6bd155c3cfbebc68006&v=4">
// 页面可见时：
const img = document.querySelector('img')
img.src = img.dataset.src

（2）响应式图片（媒体查询加载不同图片）
（3）调整图片大小（默认展示缩略图，需要时再加载大图； 大图延迟加载）
（4）降低图片质量（可以在线压缩，也可以webpack压缩）

npm i -D image-webpack-loader

{
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }

（5）尽可能使用css3效果代替图片
（6）使用webp格式的图片

10、webpack按需加载代码，提取第三方库的代码，减少ES6转换为ES5的代码
11、减少重排重绘
12、使用事件委托
13、注意程序的局部性
14、if else对比switch
15、查找表

const results = [result0,result1,result2,result3,result4,result5,result6]
return results[index]

// 如果条件语句不是数值，而是字符串，可以用对象来建立查找表
const map = {
  red: result0,
  green: result1,
}
return map[color]

16、避免页面卡顿（切分）
17、使用 requestAnimationFrame 来实现视觉变化
18、使用web workers
19、使用位操作
20、不要覆盖原生方法
21、降低CSS选择器复杂性
22、使用flex布局而不是较早的布局方式
23、使用transform和opacity属性来实现动画
24、合理使用规则，避免过度优化
优化分为加载时和运行时优化，前10条属于加载时优化，后13条是运行时优化。依据项目判断需要哪些优化条件

检查加载性能：
主要看白屏时间和首屏时间

• 白屏时间：从输入网址到页面开始显示内容的时间
• 首屏时间：从输入网址到首屏完全渲染完成的时间

获取白屏时间：

<script>
	// 在window.onLoad里面执行这个方法，就可以获取白屏时间
    new Date() - performance.timing.navigationStart
</script>

参考文章：https://segmentfault.com/a/1190000022205291