这是前端性能优化系列的文章，讲述一下市面上常见的前端长列表滚动性能优化的方案，并提供各个框架的实现策略，供大家参考！

大家好，我是小杜杜，有关高性能，大数据量的列表渲染的示例已经非常常见，可以说是前端必须要了解的功能点，今天我们一起手写一下，看看如何去更好的实现～

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…

我们这里定义的首屏是指页面无滚动的情况下，从开始加载到视窗第一屏内容渲染完成的过程，我们可以称它为 last contentful paint，亦或first screen paint更贴切一些。

在前端工作中免不了接触到虚拟列表，本文通过简单易懂的图和代码手把手教大家实现三种虚拟列表。看完本文，相信各位随手就能撸出一个虚拟列表！

什么是懒加载？ 懒加载的优点是什么？懒加载的原理是什么？懒加载有哪些实现方式？本文将一一为你解答这些问题，带你通关图片懒加载。

由一次前端面试引发的关于「雪碧图」的问题，经过一番分析，结论是：在现代前端工程中，淘汰雪碧图才是最优选择，搞快点！

“这是我参与8月更文挑战的第18天，活动详情查看： 8月更文挑战” 1. 资源加载优先级 在浏览器发起网络请求时，并非每个字节都具有相同的优先级，所以，浏览器通常会对所要加载的内容进行推测，将相对重要

图片在各大网站随处可见，因为图片的表述比文字更加直观，所以图片是网站最重要的要素之一。图片相对其他文件又很大，页面的加载速度很大程度上取决于图片的加载速度，所以我们要对图片进行优化，以此加快页面加载速