IntersectionObserver 提供了一种高效的方法来观察元素是否进入或离开视窗，而无需依赖滚动事件或定时器。

对于几百M或上G的大图而言，不管对图片进行怎么优化或加速处理，要实现秒开也是不太可能的事情。而“图像分割切片”是最佳解决方案。图像切片是指将一张大图分割成若干个小图的过程，以便于存储和处理。

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

网页加载后，浏览器会解析 html、执行 js、渲染 css，这些工作都是在 Event Loop 里完成的，理解了 Event Loop 就能理解网页的运行流程。 但很多人对 Event Loop

通过 Main 指标完整地分析了一个页面从加载到显示的过程，了解这个流程，自然就会去分析页面的性能瓶颈，比如你可以通过 Main 指标来分析 JavaScript 是否执行时间过久等等

所有人都知道 Webpack 很复杂，但 Webpack 的源码却很优雅，是一个典型的可插拔架构，不仅逻辑清晰，而且灵活好扩展。近几年出来的一些构建工具，大多也都参考了 Webpack 的这种架构方式

作为一个web项目build之后12M还是比较笨重的，作为一个有追求的前端攻城狮是很难接受的。于是开启了我的优化之路 这一套打下去，基本把我这个项目的大肥肉从build包里面拿出去了。 这个操作build包瘦身超级大绝杀,压缩后通常能帮我们减少响应 70% 左右的大小。但是不建…

优化目标：降低播放页 FP 耗时，减少静态资源请求数量，提升开发体验，提升构建产物质量。（文章基于 webpack@4.46.0）

最近在学习前端性能优化方面的知识，看了很多大佬的文章，感觉文章多了比较零散，学习效率不高，所以就整合了一下大佬们写的性能优化的东西，从页面的渲染过程来建立自己的一个前端性能优化的体系。