7000字前端性能优化总结

为什么要做性能优化？性能优化到底有多重要？ 网站的性能优化对于用户的留存率、转化率有很大的影响，所以对于前端开发来说性能优化能力也是重要的考察点。

性能优化的点非常的多，有的小伙伴觉得记起来非常的麻烦，所以这里主要梳理出一条线来帮助记忆。

可以将性能优化分为两个大的分类：

• 加载时优化
• 运行时优化

加载时性能

顾名思义加载时优化 主要解决的就是让一个网站加载过程更快，比如压缩文件大小、使用CDN加速等方式可以优化加载性能。检查加载性能的指标一般看：白屏时间和首屏时间：

• 白屏时间：指的是从输入网址， 到页面开始显示内容的时间。
• 首屏时间：指从输入网址， 到首屏页面内容渲染完毕的时间。

白屏时间计算
将代码脚本放在 </head> 前面就能获取白屏时间：

<script>
    new Date().getTime() - performance.timing.navigationStart
</script>

首屏时间计算
在window.onload事件中执行以下代码，可以获取首屏时间：

new Date().getTime() - performance.timing.navigationStart

运行时性能

运行时性能是指页面运行时的性能表现，而不是页面加载时的性能。可以通过chrome开发者工具中的 Performance 面板来分析页面的运行时性能。关于chrome开发者工具具体如何操作以及如何查看性能，可以看这篇文章性能优化篇——运行时性能分析

接下来就从加载时性能和运行时性能两个方面来讨论网站优化具体应该怎么做。

加载时性能优化
我们知道浏览器如果输入的是一个网址，首先要交给DNS域名解析 -> 找到对应的IP地址 -> 然后进行TCP连接 -> 浏览器发送HTTP请求 -> 服务器接收请求 -> 服务器处理请求并返回HTTP报文 -> 以及浏览器接收并解析渲染页面。从这一过程中，其实就可以挖出优化点，缩短请求的时间，从而去加快网站的访问速度，提升性能。

这个过程中可以提升性能的优化的点：

1. DNS解析优化，浏览器访问DNS的时间就可以缩短
2. 使用HTTP2
3. 减少HTTP请求数量
4. 减少http请求大小
5. 服务器端渲染
6. 静态资源使用CDN
7. 资源缓存，不重复加载相同的资源

从上面几个优化点出发，有以下几种实现性能优化的方式。

持续更新。。。。。。