一、写在前面 我发现即便工作很久了，我还是不会用performance性能分析工具，可能很多小伙伴跟我有一样的问题！ 于是我怒学了一通performance性能工具的使用，想写一篇如何使用perfor

前端性能分析是一名前端必须掌握的技能，本文对字节剪映web为例，介绍如何使用PageSpeed Insights和Chrome Performance工具分析页面性能

GC的目的是为了实现内存空间的良性循环，良性循环的基石是对内存空间合理使用。因为HTML中没有提供内存操作的API，所以时刻关注内存变化才能确定是否合理，我们可以通过Performance这个工具定位问题所在，Performance工具提供多种监控方式，可以时刻监控内存。 内存…

这次 Google 开发者大会请来了 Lighthouse 的工程师 - Eric Bidelman ，分享如何简单地使用 Lighthouse, Puppeteer 来自动化我们日常的流程。它是一个开源的自动化工具，用于改进网络应用质量。您只需要提供网址，它就测试该页面，並生…

项目经理让你对项目进行性能的评估 你一头雾水。稳住，不慌，其实chrome偷偷帮你做了这件事。 打开谷歌浏览器控制台，点击Performance tab 可以看到下图的两种操作。 第一个点击可以开始记录页面交互的操作再次点击结束记录。 第二个点击可以记录页面重新载入的记录。我们…

前端性能测试工具 Lighthouse(灯塔)使用 目录 前言 正文 一、Lighthouse 介绍 二、Lighthouse 使用过程 三、指标详解 总结 参考文档 前言  最近做性能检测，使用的是

在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。缓存技术一直一来在WEB技术体系中扮演非常重要角色，是快速且有效地提升性能的手段。 一个优秀的缓存策略可以缩短网页请求资源的距离，减少延…

上周阿里的面试官问了个面试题 “ 能不能说下 304 的过程，以及影响缓存的头部属性有哪些？”OMG.......因为之前只是大概了解 304 状态码是表示缓存，且因为平时项目开发过程中也没有在缓存这块踩过坑，所以这一块也没有去做特别深入的研究。所以当被问这个问题时，有被当头一…

Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue …