背景 性能优化、减少页面加载时间、提升用户体验，是前端领域的一个永恒话题。在前后端分离、异步渲染在页面中被普遍应用的背景下，大量页面在用户访问时不可避免的会出现一段短时间白屏。目前的解决方案一般为以下

面试过程中面试官问到前端性能优化有哪些，当我咔咔一顿输出之后面试官追问：前端可以做的性能优化有哪些呢？ 前端优化大概可以有以下几个方向： 网络优化 页面渲染优化 JS优化 图片优化 webpack打包

我相信绝大部分的同学面试的时候都碰到过面试官问的一个问题，那就是前端项目优化。这是一个非常发散的问题，涉及到的面很广。因此我也总结了一篇5000字的文章总结了从分析到实施阶段能做的一些事情。

提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 `常规且有效` 的首屏优化建议 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理

在开始正文之前，我们先想想为什么需要埋点&监控？ 当我们在分析复盘一个产品是否成功的时候，不同的角色考虑的方向是不同的。

一、背景移动端网页的加载速度对用户体验极为重要，是影响页面转化率的关键因素，H5活动页往往使用大量的图片素材来丰富活动效果，素材加载的快慢会对用户感知造成重要的影响。在《悟空活动中台-H5活动加载优化

WebP介绍 WebP 是 Google 推出的一种同时提供了有损和无损两种压缩方式的图片格式，优势体现在其优秀的图像压缩算法，能够带来更小的图片体积，同时拥有更高的的图像质量。根据官方说明，WebP

WebP 是什么？ WebP 是一种同时提供了有损压缩与无损压缩的图片文件格式。可以大大压缩图片的大小，并且图片的质量和 png、jpeg 等相同。

以前听到“虚拟列表”感觉非常的高大上，直到我弄清楚它的原理，发现它是如此的简单！虚拟列表是指对列表的“可视区域”进行渲染，对“非可见区域”不渲染或部分渲染，从而极大提高渲染性能的一种技术。