开篇 本次优化主要做的是 Webpack 打包资源体积大小的优化，目的是为了解决单页面应用首页加载白屏时间过长问题。 下面会根据分析优化的步骤一一记录分享。 分析 package.json 依赖 清除

网页的性能优化我们会分为两部分来看：资源加载的性能优化、代码运行的性能优化。 代码运行的性能优化需要用 Performance 工具记录某段时间的代码运行情况，分析出 long task，定位到耗时高

window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作 该图中的两个帧，在每一帧内部，TASK和redering只花费了一部分时间，并没有占据整个帧，那么这个时候，如图中idle pe…

由于 vue3.2 版本的发布，`<script setup>` 的实验性标志已经去掉，已经陆陆续续有不少公司开始使用 `vue3.2`开发项目了。这篇文章就来帮助大家如何快速使用 `vue3.x`

媒体查询 在需要根据设备的类型或某些特征来对css样式做特殊处理时，媒体查询是我们必须了解和学会使用的。接下来，我们就一起来学习媒体查询这一特性。

背景 在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？ 本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 C

让 2019 来得更迅速吧~你正在阅读的是 2019 年前端性能优化年度总结，始于 2016。 7. 100 毫秒响应时间，60 fps 为了使用户感觉交互流畅，界面的响应时间不得超过 100ms。如果超过了这个时间，那么用户将会认为该应用程序是卡顿的。RAIL，一个以用户为中…

这是一次记录对于虚拟DomDiff的自我学习。 虚拟Dom 和 Dom Diff算法 在日常工作中会经常听到，但是对其原理一直没有深入的探究。

前言 前端开发中，只要涉及到列表渲染，那么无论是 React 还是 Vue 框架，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道