一篇文章演示如何监测项目的性能问题，一步一步来解决发现的web性能问题。使用工具Lighthouse和performance

前言 大家好 我是鲨鱼哥~ 这是鲨鱼哥 2022 年的第一篇文章 为啥第一篇文章就要写前端性能定位相关呢 其实老粉都知道 性能优化文章我早在去年六月就说要完成的 各种事情一耽误 就过了大半年了

web性能说白了就是网站打开速度快不快，页面中的动画够不够流畅，表单提交的速度是否快，列表滚动页面切换是否卡顿。性能优化就是让网站变得快。 在MDN上对web性能的定义是网站或应用程序的客观度量和可感

我们都知道网站性能的重要性。重要是重要，但是具体如何衡量和识别永远是个非常发散、不容易说清的事情。本文就将以业内重要会议上的分享为中心，分类详细介绍主流语境下所有重要的数据指标定义。 历史上，yslow 曾经作为互联网开发的核心指标唯一评价工具，它的指标代表了核心指标。之后逐步…

最近在做性能监控相关的工作，将准备工作中涉及的资料进行一次整理。 合成监控（Synthetic Monitoring，SYN），就是在一个模拟场景里，去提交一个需要做性能审计的页面，通过一系列的工具、规则去运行你的页面，提取一些性能指标，得出一个审计报告。 真实用户监控（Rea…

CSP 的实质就是白名单策略，预先设定好哪些资源能被加载执行而哪些不能，为了防止跨域脚本攻击而制定。 两种方法可以启用 CSP。一种是通过 HTTP 头信息的 Content-Security-Policy 的字段。 另一种是通过网页的标签。 因为不符合style-src te…

经典面试题：说一说从输入URL到页面加载完成之间的过程。 你会发现，这题不论大厂小厂，都会问，为什么？

手上负责的vue项目最近出现一个这样的问题，用户用着用着就出现：”喔唷，崩溃啦！“的提示。 vue-cropper.js，组件实例不会主动销毁，需要主动调用destroy方法销毁。 createjs/easeljs，maker.stage._eventListeners = n…

前端开发者往往不太关注页面所占用的内存，因为前端内存的分配与回收基本是依靠系统自动完成的，这个过程对于开发者是无感的 但内存优化的作用也同样重要，一个好的网站，内存的优化也是极致的