背景我们经常使用ChromeDevTools来开发调试，但是很少知道怎么利用它来分析页面性能，这篇文章，我将详细说明怎样利用ChromeDevTools进行页面性能分析及性能报告数据如何解读。如果你认

性能优化相关的文章其实网上挺多，但是大部分都是在讲如何优化性能，也就是讲方法论。但是在实际工作中，如何量化性能优化也是相当重要的一环。今天本文会介绍谷歌提倡的七个用户体验指标（也可以认为是性能指标），每个指标分别根据以下几点讲解： 首次绘制，FP（First Paint），这个…

从底层计算机网络协议到应用层各个方面去理解Web性能。目前项目处于刚开始阶段，欢迎对性能优化感兴趣的同学共同参与总结！ 此项目会引用许多其他文章书籍的图片或部分内容，我会尽量都加以注明，如果有部分遗漏以致于侵犯到您的版权，烦请联系我修改！此项目旨在整理零碎的知识和实践方案，方便…

几周前，我们开始了一系列旨在深入挖掘 JavaScript 及其工作原理的研究。我们的初衷是：通过了解 JavaScript 代码块的构建以及它们之间协调工作的原理，我们将能够编写更好的代码和应用程序。 本系列的第一篇文章着重于提供引擎概览, 运行时, 以及堆栈调用。第二篇文章…

前端性能优化可以分为三个level：静态资源优化、接口访问优化、页面渲染速度优化，在操控门槛上依次递增，优化效果上越发没有这么明显，所以很多小团队只会做到了第一个level追求极致的前端性能体验，提升自己的level，come on ~ 目录 一、静态资源优化 二、接口访问优化…

前端优化有很多，图像优化也是其中的一部分。无论是渐进增强还是优雅降级，图像优化成为了开发上不可忽视的一部分。 图像优化的前提是需要了解图像的基本原理。常规的图像格式分为矢量图和位图。 原理： 矢量图形使用线、点和多边形来表示图像。 光栅图形，也可以成为位图，通过对矩形格栅内的每…

项目上线后，通常都是都会做埋点，做数据监控、异常监控以及性能监控，本文主要聊聊前端性能监控。重点讲performance怎么做性能监控。 页面加载的方式有两种，一种是加载完资源文件后通过javascript动态获取接口数据，然后数据返回渲染内容，这就是前后端分离的项目页面加载方…

随着公司业务的发展，前端项目也越来越多。有的时候客户反馈的一个问题，需要耗费大量的时间去查。错误信息不能第一时间获取，多少会给公司带来损失。这个时候我们就需要一套错误收集机制，去提前发现代码中存在的问题，在客户反馈之前把问题提前处理掉。或者在收到客户反馈的时候可以查到对应的错误…