性能指标和优化目标 Web 前端性能指标与优化目标 一、核心性能指标（Lighthouse 标准） 加载性能 LCP (Largest Contentful Paint) ：最大内容渲染时间 目标：≤

前面我们聊了首屏优化之 script 的加载方式以及 import 动态导入，今天我们来聊一下首屏优化之 SSR-服务端渲染（Server-Side Rendering）。 可能很多朋友并不了解

前段时间，我们前端组做了一些系统优化。集中表现在代码执行速度，系统安全等方面，故新建一篇文章来记录这次优化的经历。如果本文对您有帮助，烦请大家一键三连哦, 蟹蟹大家~

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

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

组件懒加载 使用场景 该页面的 JS 文件体积大，导致页面打开慢，可以通过组件懒加载进行资源拆分，利用浏览器并行下载资源，提升下载速度（比如首页） 该组件复用性高，很多页面都有引入，利用组件懒加载抽离

CDN的定义 CDN：即内容分发网络，构建在现有网络基础上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络堵塞，提高用户访

需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。(使用 Vue 的 vue-lazyload 插件) 直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体…

事件委托 事件委托利用了事件冒泡原理，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件都适合采用事件委托，可以节省内存。 减少HTTP请求 将多个小文件合并为一个大文件，从而减