最近，Chrome DevTools在 102 版本发布了新的Performance insights，让我们来了解一下这个新的面板。

在前端开发的过程中，经常会看到浏览器在做一个Recalculate Style的任务。https://codepen.io/TGuoW/pen/GRNzeZv 在这个页面内点击按钮，录制profile，便会发现，仅仅给main元素增加了一个完全不影响样式的class，竟然会影响…

3行代码，首屏秒开：preload插队字体、prefetch预偷下一页、dns-prefetch秒解CDN域名，FCP直降30%，0成本性能黑科技，附实测数据与踩坑大全，复制即用！

在数据驱动决策的时代，数据可视化大屏已成为企业标准配置。作为前端工程师，我们常常面临这样的困境：设计阶段流畅运行的Echarts图表，在接入真实海量数据时却出现严重卡顿、内存飙升、交互延迟等问题。

话说，我在面试的时候，80%的情况下，都会被问到首屏优化问题，烦，恨~ 所以，看到这里的前端佬就有福了，如题，藏着个小小的知识点，大家如果遇到同样情况，说不定有作用哦！ TCP Slow Start

image 标签的 width 和 height 有大作用!!! 我们将在这里探讨一个问题, 如果在加载图片之后不影响图片下边文字的移动. 在给出答案之前, 要知道 width 在 2019 年之后

公司最近有个需求，网页中需要特殊字，用图片吧（会失真）显示不清楚。所以决定还是用字体。下载下来一看，好家伙，文件挺大的（1.4MB），所以就想把文件压缩优化下。

近来遇项目打包之事，撰文记之。以期分享，皆有所获。 基于这个两个前提，我们再进行下一步。 其中 analyzerMode 的设置比较重要。 得出如上图的分包并不难，vue-element-admin 自带这些配置。 如果你暂时还看不懂这些配置项，先别急，后面会一一陈述。 你只用…

前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…