这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战 什么是生命周期 Vue 是组件化编程，从一个组件诞生到消亡，会经历很多过程，这些过程就叫做生命周期。 你理解了什么是生命周期，你还了解一个

早上上班摸鱼时刻 看到一篇 利用"交叉观察者"这个小宝贝儿，轻松实现懒加载、吸顶、触底 。 回想我之前写监听滚动 用到的是监听滚动top距离出来计算的。 所监听对象的具体祖先元素。如果未传入值或值为null，则默认使用顶级文档的视窗。 rootMargin设置root区域的扩展…

前端开发中经常会遇到大数据量列表展示的性能问题，即大数据量一次性展示时前端渲染大量 Dom，触发渲染性能问题，造成初始加载白屏，交互卡顿等。解决这类问题的方案也有很多，使用虚拟列表展示是一个比较

浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点…

Frames部分，主要用于查看特定帧的fps，可以查看特定的帧情况。 此代码的问题在于，在每个动画帧中，它会更改每个方块的样式，然后查询页面上每个方块的位置。由于样式发生了变化，浏览器不知道每个方块的位置是否发生了变化，因此必须重新布局方块以计算其位置。

压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些常规且有效的性能优化建议

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

前端的一整套东西覆盖也非常广泛，从开发、规范、测试、lint、构建部署、监控、集成、微服务、等等链路都隶属于前端工程化，我们需要尽量将其简化，来逐个击破。逐渐完善我们对工程化的认知。

本文作者是来自360导航的前端开发工程师 Berwin，W3C 性能工作组成员，同时也是《深入浅出Vue.js》（待出版）的作者。 本文转载自奇舞周刊。