从零开始搞系列 - 随笔分类 - 咖啡机（K.F.J）

两款监控系统调研

摘要：New Relic 1）数据总览 Dashboard，评估用户体验，定位浏览器性能问题，检查由其他原因引起的问题。可添加自定义告警。 2）会话重放录像，JavaScript 错误疑难解答，改善用户体验，识别关键用户旅程中的问题 3）核心指标 Google 衡量整体用户体验的指标，通过会话跟踪获取阅读全文

posted @ 2024-04-09 11:46 咖啡机（K.F.J）阅读(77) 评论(0) 推荐(0) 编辑

活动上线前后的优化清单

摘要：一、上线前的准备 1）图像 1. 页面中所有图像是否都已压缩 2. 是否有条件将图像修改成性能更优的 webp 等格式 3. 页面中的图像数量是否可减少，例如活动中的规则等文案用文字替换 4. 页面中的图像是否支持懒加载或预加载，避免降低页面加载时间 5. 是否需要让客户端缓存本地图像 2）首屏 1 阅读全文

posted @ 2023-11-24 11:55 咖啡机（K.F.J）阅读(63) 评论(0) 推荐(0) 编辑

从零开始搞基建（5）——代码质量

摘要：一、AppWorks AppWorks 是一款基于 VS Code 插件的前端研发工具集。 1）AppWorks Doctor 我试用了其中的代码质量检测插件，这款插件会依赖 package.json 文件。所以当前项目的根目录中需要包含此文件，否则无法运行命令。在 Mac 环境中，Ctrl+S 阅读全文

posted @ 2023-05-15 09:14 咖啡机（K.F.J）阅读(437) 评论(0) 推荐(3) 编辑

shin-monitor源码分析

摘要：在经过两年多的线上沉淀后，将监控代码重新用 TypeScript 编写，删除冗余逻辑，正式开源。根据 shin-monitor 的目录结构可知，源码集中在 src 目录中。关于监控系统的迭代过程，可以参考专栏。一、入口入口文件是 index.ts，旁边的 utils.ts 是一个工具库。在阅读全文

posted @ 2023-02-13 08:30 咖啡机（K.F.J）阅读(164) 评论(0) 推荐(0) 编辑

前端稳定性建设

摘要：稳定性是数学或工程上的用语，判别一系统在有界的输入是否也产生有界的输出。若是，称系统为稳定；若否，则称系统为不稳定。前端的稳定性大致也可以如此概括，简单地说就是在外界影响下表现出的某种稳定状态，例如无报错、响应快、内容呈现正确等。要想达到稳定状态，需要做些有效的防范措施和机制，而这些也正是我们组阅读全文

posted @ 2022-09-19 08:10 咖啡机（K.F.J）阅读(658) 评论(0) 推荐(1) 编辑

量化日常工作指标

摘要：你工作很高效，如何证明？你做了很多优化，是否有效？为了回答这些问题，最有力的就是用数据来支持，所以需要将自己的工作量化。量化的工作总共分为两层：业务需求和代码质量。一、需求统计需求统计包括完成率和用户满意度评分。 1）完成率公司每双月会开一次需求讨论会，罗列本双月的需求。我会以这份列表为阅读全文

posted @ 2022-08-01 08:19 咖啡机（K.F.J）阅读(932) 评论(0) 推荐(2) 编辑

从零开始搞基建（4）——单元测试

摘要：单元测试有助于避免尴尬、耗时的错误，将测试作为安全网只是一部分，更大部分是将测试表达为代码的思考过程。接下来的内容提炼自《单元测试的艺术（第2版）》和《有效的单元测试》两本书。一、质疑和回答在组内推广时，进度并不理想，遇到的阻碍大致可归纳为以下这几种情况：首先就是团队成员会质疑单元测试的价值阅读全文

posted @ 2021-10-29 09:53 咖啡机（K.F.J）阅读(423) 评论(0) 推荐(0) 编辑

从零开始搞基建（3）——设计方案

摘要：最近看了一篇文章，文章中提到在开发流程中包含一个设计方案的阶段，位于需求评审之后，用于描述自己对于该需求的实现思路、模块划分等相关考虑的点，可供今后自己或他人查阅。目的就是在编码前理清思路，整体架构，查缺补漏，作为他人或自己的技术参考文档。自己在项目开发的过程中，也曽有过这样类似的想法，但没有作阅读全文

posted @ 2021-09-05 21:49 咖啡机（K.F.J）阅读(705) 评论(0) 推荐(0) 编辑

从零开始搞监控系统（7）——监控页面奔溃

摘要：页面奔溃包含两种场景，第一种是浏览器在加载网页时遇到问题导致的奔溃，另一种是因为脚本渲染出错导致页面空白无内容的奔溃。前段时间运营抱怨有张活动页出现了空白（第二种奔溃场景），导致用户无法访问，希望我们能主动监控到这种情况，而不是通过用户的上报。后面和运维沟通，他那边目前只能监控接口的访问情况，无阅读全文

posted @ 2021-07-19 08:45 咖啡机（K.F.J）阅读(1156) 评论(1) 推荐(1) 编辑

从零开始搞监控系统（6）——较长的白屏时间

摘要：一、加载慢在直播间有一个小时榜的Web页面，经常有用户反映点击小时榜，弹出的页面会有蛮长的一段（3秒上下）时间白屏。查看性能监控中的白屏时间，发现最多1.6秒，最少0.4秒平均每小时的白屏在1秒左右（有待优化），那么大概还有2秒的时间可能是其他原因造成的。在页面中会包含很多主播头像，有可能是图阅读全文

posted @ 2021-07-12 07:26 咖啡机（K.F.J）阅读(988) 评论(1) 推荐(0) 编辑

从零开始搞监控系统（5）——小程序监控

摘要：公司目前在线上运行着一款小程序，为了能监控小程序的运行情况，自行开发了一个参数搜集的SDK，名称为 shin.js，放置在 utils 目录中。目前只搜集了打印、通信和错误，其中打印不是 console.log() 而是 shin.log()。在小程序的管理后台，开发管理中，目前也有一个错误日志阅读全文

posted @ 2021-06-15 08:23 咖啡机（K.F.J）阅读(1573) 评论(0) 推荐(0) 编辑

从零开始搞监控系统（4）——内存泄漏

摘要：在将监控日志的服务独立部署后，还是发现CPU会在不特定时间段（例如21~22、23~02等）飙到70%，内存也是一路飙升不会下降，明显是出现了内存泄漏。需要进一步做优化，于是开通了阿里云的 Node.js 性能平台。一、Node.js性能平台要使用此工具需要在自己的服务器中安装些组件的，具体步阅读全文

posted @ 2021-06-07 10:11 咖啡机（K.F.J）阅读(827) 评论(0) 推荐(1) 编辑

从零开始搞监控系统（3）——性能监控

摘要：前端性能监控是个老话题了，各个团队都会对其有所关注，因为关注性能是工程师的本分。页面性能对用户体验而言十分关键，每次重构或优化，仅靠手中的几个设备或模拟的测试，缺少说服力，需要有大量的真实数据来做验证。在2016年，我就写过一篇《前端页面性能参数搜集》的文章，当时采用的还是W3C性能参数的第一版阅读全文

posted @ 2021-05-24 08:34 咖啡机（K.F.J）阅读(2379) 评论(0) 推荐(5) 编辑

从零开始搞监控系统（2）——存储和分析

摘要：2023-01-16 经过 TypeScript 整理重写后，正式将监控系统的脚本开源，命名为 shin-monitor。一、存储在将数据传送到后台之前，已经做了一轮清洗工作，如果有需要还可以再做一次清洗。日志表如下所示，自增的 id 直接偷懒使用了 bigint，没有采用分表等其他技术。 C 阅读全文

posted @ 2021-05-18 08:23 咖啡机（K.F.J）阅读(966) 评论(0) 推荐(1) 编辑

从零开始搞监控系统（1）——SDK

摘要：目前市面上有许多成熟的前端监控系统，但我们没有选择成品，而是自己动手研发。这里面包括多个原因：填补H5日志的空白节约公司费用支出可灵活地根据业务自定义监控回溯时间能更长久反哺运营和产品，从而优化产品质量一次难得的练兵机会前端监控地基本目的：了解当前项目实际使用的情况，有哪些异常，在追踪阅读全文

posted @ 2021-05-11 07:54 咖啡机（K.F.J）阅读(2191) 评论(2) 推荐(4) 编辑

从零开始搞基建（2）——团队协作规范

摘要：前端会与公司的所有部门有协作，若在某一环出现问题，就会发生不必要的时间开销，降低开发效率。所以有必要制订一套完善的协作流程。有个核心要素，那就是积极主动性。如果需要涉及多端的，务必画出流程图，以免产生歧义。在推进业务开发时，遇到任何卡住流程的问题，都需要反馈给我，我会在第一时间进行协调。一、与阅读全文

posted @ 2021-04-12 10:01 咖啡机（K.F.J）阅读(1975) 评论(0) 推荐(2) 编辑

从零开始搞基建（1）——前端代码规范

摘要：一、JavaScript 1）语言对所有引用都使用 const，不要使用 var。原因：这样做可以确保你无法重新分配引用，以避免出现错误和难以理解的代码。如果引用是可变动的，使用 let 代替 var。原因：let 是块级作用域的，而不像 var 属于函数级作用域。坚持使用全等摒弃相等 == 阅读全文

posted @ 2021-04-06 08:16 咖啡机（K.F.J）阅读(888) 评论(0) 推荐(1) 编辑

从零开始搞后台管理系统（2）——shin-server

摘要：shin 的读音是[ʃɪn]，谐音就是行，寓意可行的后端系统服务，shin-server 的特点是：站在巨人的肩膀上，依托KOA2、bunyan、Sequelize等优秀的框架和库所搭建的定制化后端系统服务。一套完整的 Node.js 后端服务解决方案。调试便捷，实时打印出各类请求、日志和所有阅读全文

posted @ 2021-03-01 04:35 咖啡机（K.F.J）阅读(660) 评论(1) 推荐(0) 编辑

从零开始搞后台管理系统（1）——shin-admin

摘要：shin 的读音是[ʃɪn]，谐音就是行，寓意可行的后台管理系统，shin-admin 的特点是：站在巨人的肩膀上，依托Umi 2、Dva 2、Ant Design 3和React 16.8搭建的定制化后台。介于半成品和成品之间，有很强的可塑性，短期内你就能把控全局。借助模板组件可快速交付90 阅读全文

posted @ 2021-02-22 08:05 咖啡机（K.F.J）阅读(2249) 评论(2) 推荐(5) 编辑

随笔分类 - 从零开始搞系列

公告