H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题

众所周知的原因，前端作为一种特殊的 GUI 软件，做自动化测试困难重重。在快速迭代，UI 变动大的业务中，自动化测试想要落地更是男上加男 🐶。 近期的学习过程中，翻阅了众多前端自动化测试相关的文章，大多数都在讲如何使用自动化测试框架对前端代码进行测试，很少讲解为什么要引入自动…

⁣React 的工作流程是什么？我们可以在哪些阶段进行性能优化呢？ 如果 React 项目中出现了卡顿，我们可以采用哪些性能优化技巧？ 如何通过 React Profiler 定位性能问题？

本文其实应该叫，Web 用户体验设计提升指南。 ... 所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。 良好的用户体验设计…

1.前端监控体系概况一个完整的前端监控体系包括了采集、日志存储、日志切分&计算、数据分析、告警等流程，对于一名前端开发工程师来说，也就意味着工作不再局限于前端业务的开发工作，需要有Nginx服务运维能

这里是 Ohbug 开源计划第二弹。第一弹的 Ohbug SDK 我们已经可以收集到数据，这一弹聊一聊数据的处理。 为了方便存储，Transfer 需要对不确定数据类型的字段预处理为字符串，这里转化 detail actions metaData 三个字段。 具体转化的细节可见…

比较有名的网页性能速度分析网站 pagespeed 其实也是借助 `Lighthouse CI 实现的。 window.performance 是 W3C 引进新的 API 用于展示 页面的具体的渲染时间。一个完整的 performance结构如下所示 首先，对 timing …

一般情况下都是通过重写js原生事件然后拿到错误信息，比如ajax请求，通过重写xhr、fetch事件来截取接口信息，所以我们需要优先编写一个易于重写事件的函数来复用。 所有的请求第三方库都是基于xhr、fetch二次封装的，所以只需要重写这两个事件就可以拿到所有的接口请求的信息…

我们可以编写一些漂亮，且吸引人的网站，但如果该网站无法快速加载到浏览器中，人们往往会跳过它。 尽管有许多性能规则，但归根结底，这全都取决于加载时间。 一秒钟大概是用户思路不被打断的极限。用户会感觉到延迟，但还可以接受 10秒左右是用户注意力的极限。 大多数用户会在10秒后离开你…