想要性能优化实现一个闭环，这将会是一个较长的过程，包含了性能监控的设计、性能分析、性能优化等步骤。本篇文章为了解篇，主要介绍性能的重要性、前端页面的加载过程和了解性能指标。

本篇文章将主要讲了常用的前端监控方案，以及前端性能性能优化实践总结，在[Web前端性能优化——了解篇]也可以了解一些前端性能的知识

前言下面是看了大神的笔记做的思维导图，纯为整理参考网站https://juejin.im/post/6844903655330562062#heading-12https://www.cnblogs.

Chrome Devtools 的 Performance 工具是性能分析和优化的利器，因为它可以记录每一段代码的耗时，进而分析出性能瓶颈，然后做针对性的优化。 这么强大的工具肯定是要好好掌握的，今天

所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里，笔者通过本文整理出关于前端性能优化的九大策略和六大指标

网站性能优化贯穿在开发的各个阶段，涉及的知识点也是比较分散的，怎样把这些分散的知识整理、连贯起来，在脑海中有一个图谱，在实战的时候，根据图谱上的优化点各个击破，这就需要构建自己的知识体系。

注意区分 configureWebpack和 chainWebpack。参考官方文档。 常用 CDN：jsdelivr，unpkg。生产环境，建议使用指定版本的CDN文件。 webpack 外部扩展 externals，参考 v4中文文档、最新版本文档。 （1）Cannot r…

cdn是一套内容分发服务，其本质是将一些公共资源缓存到离用户最近的服务器上，减少直接从数据源服务器获取资源的响应时间。 我们使用公共的cnd资源，可以极大的减轻对服务器的压力，实质是减少了对我们自己服务器的http请求 .... 等 我们要将 vue、 vue-router、 …

Vue首屏优化全解析 打开GZIP 直接打包称为xxx.gz文件 在前端打包过程中即生成gz文件可以减少部署服务器的打包过程，可以减少服务器的性能压力，提高响应时间。