现在前端技术发展的速度有点刹不住车的感觉，各种框架就跟雨后春笋一样冒出来，对于技术人员来讲去不断的学习这些新框架新工具是一方面，另一方面我们精力有限不可能学习市面上的每一项技术做到全能。
其实新技术不断冒出的背后逻辑还是因为能够去解决现有技术的一些缺陷，例如现有的更新迭代速度不能跟上发版的节奏，那么就可以借助一些效率管理工具去进行改进。
但其实不管我们工作中面临到什么问题，其实还有一种更加靠谱办法，通过我们对现有技术的持续优化去解决，也就是我们经常都在说的性能优化，这种方式对于现有的技术栈影响是最小的。
前端的性能优化包括很多的方方面面，从大的几个方面来讲主要可以分为：网络层面、渲染层面、性能检测几个大的方面。
再往下，又能从大层面进行细分，拆分出各个小的节点，所以我们在性能优化上可以做的事情非常多。
这篇文章就主要从前端性能的优化进行系统的梳理，看看我们还能在哪些地方进行优化。
一、网络层面
网络层面可以分为「请求过程的优化」和「网络请求的优化」。
请求过程的优化我们还能继续向下细分为 DNS 解析、TCP 连接、HTTP请求的优化，其中 DNS 解析和 TCP 连接两个步骤，我们前端可以做的努力非常有限。相比之下，HTTP 连接这一层面的优化才是我们网络优化的核心，HTTP 能分别在构建工具调优、gzip压缩优化、图片优化等流程中去做优化。
网络请求的优化主要可以在本地存储上面下功夫，例如最为典型的是我们可以通过浏览器的缓存机制和离线储存技术进行性能的优化。
另外想多说一句，在网络层面，我们需要学习和了解一些必需的理论基础作为前置知识。因为这部分并不需要大家写特别多的代码，但需要大家对每一个知识点理解透彻，进而应用到自己日常优化的决策中去。
二、渲染层面
其实渲染的优化在两年在前端已经比较火热了，如果我们还不了解这一块，我认为有三个步骤是需要大家进行了解的：服务端渲染的运行机制是什么、服务端渲染解决了什么性能问题 、服务端渲染的应用怎么做。
在渲染层我们可以做的事情比较多，包括客户端渲染、服务端渲染、浏览器渲染、DOM优化、加载页渲染提速等。
这里说说我们最常去做的浏览器渲染，但在研究浏览器微观的运行机制之前，我们首先要对浏览器内核有一个宏观的把握，其后我们可以提出CSS性能方案和JS性能方案去对浏览器的性能做一些提升工作。
其次还有DOM优化，在这个上面我们可以先在原理上面进行深入的理解，再从事件循环、异步更新、回流重绘等环节寻找好的办法。
三、性能监测
在性能检测上面我们可以用到一些工具进行辅助，例如可视化工具 performance、lighthouse 等都可以对我们的监测上面有很大的帮助，另外W3C性能API也是我们可以进行思考的方向。
这么系统的一整理其实大家发现在前端技术上我们可以深入学习的内容还非常多，如果我们真的能够做到深入的持续学习，相信对于我们的技术提升帮助还是非常大的。在进阶的学习上并不是学的越多越好，而是在一定的角度做到更加专业我认为更加有价值。