这是MDN上给的官方概念，不用去管它，我粘出来只是为了显得专业点嘛... 重点看这里监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一个元素是否在视窗可见。 可以看到，交叉了就是说明当前元素在视窗里，当前就是可见的了。 其实就是一个简单的构造函数。 以上代码会返回一个In…

这是个还在草案中的API，不过大部分浏览器均已实现（除了IE）。先看下MDN中的介绍： 当页面滚动时，懒加载图片或其他内容。 实现“可无限滚动”网站，也就是当用户滚动网页时直接加载更多内容，无需翻页。 滚动到相应区域来执行相应动画或其他任务。 一直以来，检测元素的可视状态或者两…

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

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

身为一个程序员 🧑‍💻 ，不会还有人手动一张张上传图片压缩吧 🌝 ？通过封装好的工具，就能实现自动压缩项目内的图片，彻底释放双手 🤲 ！

使用预取和预加载是网站性能和用户体验提升的一个很好的途径，本文介绍了使用prefetch和prefetch进行预取和预加载的方法，并使用webpack进行实现Link的链接类型<link>标签的rel

这个优化方案到底行不行？由你们来说。这是一个有趣的首屏优化思路！性能优化本来就是一个登峰造极，追求极致的过程！一个有梦想的前端，当然是要折腾的，因此就有了本文，看看能否再提升首屏速度亿点点！

在了解这些概念之前，我们要先了解一个熟知的概念，那就是 SPA(Single Page Application)，没错，就是大家熟知的单页应用，其实 CSR、SSR、Prerender 都是基于 SPA，关于 SPA 的概念我就不多阐述了。 即，渲染过程全部交给浏览器进行处理，…

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