前端监控分为性能监控和错误监控。其中监控又分为两个环节：数据采集和数据上报。本文主要讲的就是如何进行数据采集和数据上报。 性能数据采集需要使用 window.performance API。 从 MDN 的文档可以看出，window.performance.timing 包含了…

前端早早聊大会，前端成长的新起点，与掘金联合举办。 加微信 codingdreamer 进大会专属内推群，赢在新的起跑线。 我是阿里巴巴 CBU 体验技术部的前端工程师魏凯伟，今天我和我的美女同桌霸天小姐姐一起和大家聊聊关于 前端组件度量监控 和 场景度量监控 的话题，首先由我…

Web 页面性能优化，解决了图片相关，问题就解决了大半。本文从 Web 常见的图片格式入手，引出与图片优化相关的有效方案，期望对大家能有一点帮助。 有损压缩：借由将次要的信息数据舍弃，牺牲一些质量来减少数据量、提高压缩比。这个过程是不可逆的。图片常见的有损压缩手段是合并相近的像…

前段时间，我将精力专注在Web性能领域；在这个领域下有个重要的课题是如何让网页更丝滑（流畅）。 想让网页变得丝滑，首先，我们需要一个标准来判断什么样的网页是丝滑的；其次，我们要准确的测量出网页的性能数据；最后，使用有效的方法让网页变得丝滑。 本篇文章将针对这三个方面进行详细的介…

开始之前，代码在这里。欢迎各位大神指导。 在 Web Worker 之前，解析 CSS，生成布局，绘制界面以及运行 javascript 脚本都运行在浏览器的一个线程里。如果一个 Web App 运行的 js 脚本一次运行时间过长，就会出现界面卡顿。这样的用户体验是没法用及格来…

由于前端环境的复杂性， 很多时候，我们不只是需要关注用户报出的错误， 还想知道是什么情况下发送，如何复现，这时候用户轨迹就很重要了。 1. 常见实现方案 a. 业界牛选： Sentry， sentry是一款很强大的前端错误监控软件， 并且可以通过安装plugins来实现其他很多…

前端面试常问第二大问题是http缓存相关内容。说真的，http缓存相关的细节比较多，并且 http 常用协议版本有1.0、1.1，（本文暂不讨论http2.0）。 我们先罗列一下和缓存相关的请求响应头。 今天着重介绍一下浏览器缓存机制，我们知道，浏览器缓存一般都是针对静态资源，…

大家都知道万维网的应用层使用了HTTP协议，并且用浏览器作为入口访问网络上的资源。用户在使用浏览器访问一个网站时需要先通过HTTP协议向服务器发送请求，之后服务器返回HTML文件与响应信息。这时，浏览器会根据HTML文件来进行解析与渲染（该阶段还包括向服务器请求非内联的CSS文…

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…