为了测量页面的加载性能，Google Developers 和社区一起搞了一套渐进式网页指标（Progressive Web Metrics，简称 PWM’s），这些指标到底是些什么鬼？快来了解一下吧！

前端数据监控一般分为性能数据监控和线上异常监控。本文对这两块数据的监控原理和方法进行整理说明。 将监控代码注入到页面中，手动计算时间差或者使用浏览器API进行数据统计。 不将统计代码注入到页面中，一般借助虚拟机对页面进行性能数据分析。 在进行性能数据监控之前，先要明确页面从用户…

本文是《PWA学习与实践》系列的第十篇文章。也许你还没有听说过或不了解Resource Hint，但是通过本文，你会快速学习到这一件页面加载性能利器。本系列相关demo的代码都可以在github repo中找到。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能…

最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时间、每个页面所有资源的加载时间以及每一个页面中所以请求的响应时间等等。 本文的介绍的是如何设计一个通用的jssdk,可以以较小的侵入…

通常用户打开网页时,整个网页的内容将被下载并且呈现在一个页面中，虽然允许浏览器缓存页面，但是不能保证用户查看所有下载的的内容,例如一个照片墙应用,可能用户仅仅查看第一个图片之后离开，结果就是白白浪费了内存和带宽。因此我们需要当用户需要访问页面的一部分时才去加载内容，而不是一看是…

这是MDN上给的官方概念，不用去管它，我粘出来只是为了显得专业点嘛... 重点看这里监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一个元素是否在视窗可见。 可以看到，交叉了就是说明当前元素在视窗里，当前就是可见的了。 其实就是一个简单的构造函数。 以上代码会返回一个In…

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

HI!，你好，我是zane，zanePerfor是一款最近我开发的一个前端性能监控平台，现在支持web浏览器端和微信小程序段。 我定义为一款完整，高性能，高可用的前端性能监控系统，这是未来会达到的目的，现今的架构也基本支持了高可用，高性能的部署。实际上还不够，在很多地方还有优化…

原文地址：Preload, Prefetch And Priorities in Chrome 原文作者：Addy Osmani 译文出自：掘金翻译计划 译者：gy134340 校对者：IridescentMia,vuuihc 今天我们来深入研究一下 Chrome 的网络协议栈…