在谈论到前端性能优化时，我们可能会想到很多方向，但虚拟列表一定算是一个值得谈谈的话题，我发现了一个比较宝藏的文章，做记录学习

前言

什么是虚拟列表

虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。

虚拟列表原理【固定子项高度】

首先，我们先从最简单的一种场景入手，也就是列表子项高度固定的场景。

我们知道，普通列表是由可视区（滚动容器，以下统称为可视区）与内容区组成的。

要说面试的时候问到最多的问题，那性能优化绝对是躲不开的话题，基本每个公司面试我都遇到了相关问题，其中，首页加载速度优化又是其中最常问的问题，网上的文章比较零零散散，没有一个总结到十分满意的，于是自己便来总结一下

这张图是我发现的比较宝藏，比较全面的一张首页加载优化图，便以此图来进行相关总结

目录

一. 资源加载优化

1. 压缩资源
2. 启用Gzip压缩
3. 使用缓存
4. 使用内容分发网络 (CDN)
5. 使用HTTP/2
6. 优化DNS解析
7. 减少HTTP请求数
8. 预加载和预获取
9. 使用更高效的图片格式
10. 图片懒加载和路由懒加载

1. 压缩图片

要尽可能的压缩，看用户的忍受程度。jpg 可以用很多方法压缩，png 推荐使用 工具（不过正文图片，显然要选择 jpg 格式的）
创天无忧图片压缩缩放处理工具
本程序是一款绿色小巧的压缩图片文件占用空间大小，缩放图片尺寸的实用小工具。尽心的界面设计使操作更简单，不用学习，直接使用，本程序为绿色程序，可以任意复制，不用安装，可直接运行。
创天无忧图片压缩缩放处理工具功能描述：
1.　图片压缩
图片压缩是通过压缩减少图片的占用空间，如果您有大量的数码照，或是上传图片的网站有文件大小的限制，您就可以通过此软件来压缩图片大小，压缩图片文件大小，以达到减少大量图片占用磁盘空间，上传照片等效果
2.　图片缩放
图片缩放功能可放大或是缩小图片的尺寸，可按图片的原始比例或是指定的图片尺寸大小进行放大或缩小
3.　程序可批量或是对单个文件进行压缩缩放处理，可对选中的文件列表进行单独的删除操作等
4.　本程序有第一次运行自动创建桌面快捷方式，打开输出文件目录等贴心小功能

一、什么是懒加载？

懒加载就是延迟加载。针对多图片的页面，只有当该图片出现在页面视区中，再加载该图片。可以防止页面一次性加载完所有的图片，用户等待时间长，影响用户体验。