摘要： 现如今，在呈现一个页面时，在浏览器中会打开众多进程，包括浏览器、渲染、插件、GPU、网络等进程。 浏览器进程负责存储、界面、下载等管理。在渲染进程中，运行着熟知的主线程、合成线程、JavaScript 解释器、排版引擎等。 而呈现一个页面大致可分为 4 个步骤： 浏览器进程处理用户在地址栏的输入，然 阅读全文

摘要： HTTP Archive 在 2022 年关于多媒体的报告中指出，目前大概有 99.9% 的网站或多或少都会包含点图像。 并且高达 70% 的移动页面和 80% 的桌面页面的 LCP 指标会受图像的影响。 2023-11-27 据统计，合理使用图像能减少 20% 的带宽。 通过这些数据可知，图像在网 阅读全文

摘要： 在上一节中曾提到过两种性能监控：SYN 和 RUM，那么对应的也有两种分析：数据分析和实验室分析。 数据分析会通过采集上来的性能信息来剖析和定位可能存在的各种问题。 实验室分析会通过某个线上或本地的测试工具对页面进行单点测试，得出性能分析报告。 本文会对前者介绍一些分析实践，后者会介绍一些比较有名的 阅读全文

摘要： 性能优化的重要性不言而喻，Google 的研究表明，当网站达到核心 Web 指标（Core Web Vitals）阈值时，用户放弃加载网页的可能性会降低 24%。 如何科学地定位到网页的性能瓶颈，就需要找到一个合理的方式来测量和监控页面的性能，确定优化的方向。 前端的性能监控分为 2 种： 第一种是 阅读全文

摘要： 在开头，我得先声明一句，学习英语没有捷径，但是有技巧。 在之前的几年，我陆续的也发过 2 篇英语学习的文章《程序员英语高效学习法》和《每次阅读外文技术资料都头疼，终于知道原因了》。 还特地搜集了上千个计算机相关的英语单词，但是很遗憾，最终还是没能坚持下来。 上个月又燃起了学习英语的斗志，所以特在此记 阅读全文

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

摘要： 一、日常问题 1）需求的讨价还价 做最大的努力，维护自己团队成员的开发利益。 产品和运营会根据他们的业务来提出需求，从他们的角度来说，这些需求无可厚非。 不过，他们提出的需求，在实现时有些改动会比较复杂。那么就需要与他们协商。 协商的目的不是砍需求，而是用一种更合适的方式实现，既能满足他们的需求，也 阅读全文

摘要： 原文地址：https://web.dev/top-cwv-2023，在正文开始前，推荐一款前端监控脚本：shin-monitor，它能监控前端的错误、通信、打印等行为，以及计算各类性能参数，包括 FMP、LCP、FP 等。 我们 Google 希望我们的性能建议侧重于： 对现实世界产生最大影响的建议 阅读全文

摘要： 原文地址：https://javascript.plainenglish.io/15-useful-javascript-tips-814eeba1f4fd 1）数字分隔符 为了提高数字的可读性，可以使用下划线作为分隔符。 const largeNumber = 1_000_000_000; con 阅读全文

摘要： 最近在研究 Web自动化测试，之前做了些实践，但效果并不理想。 对于 QA 来说，公司的网页交互并不多，用手点点也能满足。对于前端来说，如果要做成自动化，就得维护一堆的脚本。 当然，这些脚本也可以 QA 来维护，但前提是得让他们觉得做这件事的 ROI 很高，依目前的情况看，好像不高。 所以在想，做一 阅读全文