摘要： 自己团队所提出的需求是指性能优化、技术栈升级、架构调整等需求，偏向于技术范畴。 要推动这类需求，除了自己团队的努力之外，还需要一些外在的辅助因素。 一、时机 对于我们自己团队内部就能消化的需求，主要的问题就是人员，只要人员充足，那么就能慢慢推进。 而对于那些需要跨团队协作的需要，那么就需要在合适的时 阅读全文

摘要： 前端构建是指通过工具自动化地处理那些繁琐、重复而有意义的任务。 这些任务包括语言编译、文件压缩、模块打包、图像优化、单元测试等一切需要对源码进行处理的工作。 在将这类任务交给工具后，开发人员被解放了生产力，得以集中精力去编写代码业务，提高工作效率。 构建工具从早期基于流的 gulp，再到静态模块打包 阅读全文

摘要： 网络也是前端性能优化的重要一环，网页上的资源都要经过网络来传输。 优化网络性能除了缓存和压缩之外，还有就是协议和 CDN。 HTTP 协议已经历了多个版本，每个版本的出现其实就是为了解决已知的性能问题。 目前市面上，有许多成熟的商业 CDN 服务，采用这些服务的网页，在性能提升上也很可观。 2023 阅读全文

摘要： JavaScript 是一种通过解释执行的高级编程语言，同时也是一门动态、弱类型的直译脚本语言，适合面向对象（基于原型）和函数式的编程风格。 直译语言可以直接在解释器中运行，而与直译语言相对应的编译语言（例如 C++），要先将代码编译为机器码，然后才能运行。 不过直译语言有一个弱点，就是如果有一条不 阅读全文

摘要： 现如今，在呈现一个页面时，在浏览器中会打开众多进程，包括浏览器、渲染、插件、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 是一个工具库。 在 阅读全文