前端性能精进(七)——构建
前端构建是指通过工具自动化地处理那些繁琐、重复而有意义的任务。这些任务包括语言编译、文件压缩、模块打包、图像优化、单元测试等一切需要对源码进行处理的工作。
PC GWP-ASan方案原理 | 堆破坏问题排查实践
字节APM-PC平台开发实现了堆破坏检测利器——GWP-ASan,帮助字节内部业务剪映在PC端快速定位解决了多个疑难堆破坏问题。本文详细介绍了PC GWP-ASan的原理与方案,并提供了多个实践案例。
插件化框架相关性能优化
插件化框架的发展经历了四个阶段:探索阶段、发展阶段、品质阶段、体验阶段。各个阶段有各个阶段需要完成的使命。。需要通过不断的熟读系统的代码和写的老代码,不断的挖掘瓶颈问题,见微知著,保持好奇,勇于尝试。
前端性能精进(六)——网络
网络也是前端性能优化的重要一环,网页上的资源都要经过网络来传输。优化网络性能除了缓存和压缩之外,还有就是协议和 CDN
iOS Monorepo 全源码解决方案
Monorepo 全源码方案为大型移动端开发提供了全面可行性验证以及宝贵经验。未来,我们会将现有的功能回馈到 bazel 社区,并且推出一系列文章来讲述 BitSky 套件的工作流程及原理。
前端性能精进之浏览器(五)——JavaScript
JavaScript 是一种通过解释执行的高级编程语言,同时也是一门动态、弱类型的直译脚本语言,适合面向对象(基于原型)和函数式的编程风格。
前端性能精进之浏览器(四)——呈现
本文第一章节详细描述了资源的优化,并在开篇指出资源都存在着优先级,浏览器会按优先级进行请求。预加载可提升资源的优先级,预提取可降低资源的优先级,预连接可提前进行 TCP 连接或 DNS 查询。
前端性能精进之浏览器(三)——图像
本文对图像的优化进行了系统性的梳理,首先是对请求做优化。为了更科学的对图像进行请求,列出了懒加载、预加载和 Data URI 三种优化方法。
前端性能精进之优化方法论(二)——分析
在上一节中曾提到过两种性能监控:SYN 和 RUM,那么对应的也有两种分析:数据分析和实验室分析。数据分析会通过采集上来的性能信息来剖析和定位可能存在的各种问题。
前端性能精进之优化方法论(一)——测量
本文的示例代码摘取自 shin-monitor,一款开源的前端监控脚本。为了便于记忆,特将此系列的所有重点内容浓缩成一张思维导图
火山引擎推出一站式小程序监控方案
火山引擎 APM 团队打造出一站式小程序监控平台,旨在为开发者提供可跨平台、监控能力完善、简单易用的小程序监控服务。
NAPI-RS 是怎么工作的: 从 NAPI 到 Build Script & FFI
NAPI-RS 是一个在 Rust 下编写高性能 Node.js 扩展的框架,底层使用 N-API 进行交互。本文从 Build Script 与 FFI 出发简单介绍了 NAPI-RS 的实现原理
辞旧岁立新年 | 展望前端工程师的2023
字节前端工程师黄健参与「InfoQ 2022年度技术盘点与展望」,展望前端研发工程师的 2023,从前端工程师与云原生;回顾过去,畅谈未来;职业发展,未来前景三个部分展开精彩分享。
Monorepo 下 Git 工作流的最佳实践
本文从适合小型 Monorepo 的 Feature branch 工作流开始分享,接着分享适用于中大型 Monorepo 的 Trunk-based 工作流,并给出一些选型标准供参考。
React Streaming SSR 原理解析
React 18 提供了一种新的 SSR 渲染模式: Streaming SSR,实现了Streaming HTML和Selective Hydration的特性,本文将从原理和源码两个方面,对Streaming SSR进行解析
从零开始搞监控系统(7)——监控页面奔溃
  页面奔溃包含两种场景,第一种是浏览器在加载网页时遇到问题导致的奔溃,另一种是因为脚本渲染出错导致页面空白无内容的奔溃。  前段时间运营抱怨有张活动页出现了空白(第二种奔溃场景),导致用户无法访问,希望我们能主动监控到这种情况,而不是通过用户的上报。  后面和运维沟通,他那边目前只能监控接口的
从零开始搞监控系统(6)——较长的白屏时间
一、加载慢  在直播间有一个小时榜的Web页面,经常有用户反映点击小时榜,弹出的页面会有蛮长的一段(3秒上下)时间白屏。    查看性能监控中的白屏时间,发现最多1.6秒,最少0.4秒平均每小时的白屏在1秒左右(有待优化),那么大概还有2秒的时间可能是其他原因造成的。    在页面中会包含
React Server Component: 混合式渲染
Server Component 顾名思义是在服务端渲染的组件,它是如何进行渲染的?和 SSR 又有什么区别?让我们来一起探索它究竟是个什么?
优先级反转那些事儿
文章主要阐述了优先级反转的一些概念和解决思路,并结合iOS平台的几种锁进行了详细的调研。通过深入的理解,可以去规避一些不必要的优先级反转,从而进一步避免卡死异常。
W3C规范成熟不同阶段的Web性能API参考
绩效是W3C网络性能工作组的一大重点。查看这些API,它们为Web性能和W3C标准提供了参考。
字节前端监控SDK体积与性能优化实践
本文以字节前端监控sdk为例,探讨作为三方sdk如何实现性能优化等思路和实操。
一次有趣的 DNS 导致 Node 服务故障问题分析实录
有一个部署 k3s 的边缘节点的机器,切到离线模式以后,有一个前端页面的部分请求接口异常了。node 部分的请求分为两类,一种是纯 node 的处理,一种是需要先 http 请求后端微服务的处理接口。现象是涉及 Node 请求后端 Java 服务的都 block 住了,纯 node 处理的请求都飞快
从零开始搞监控系统(5)——小程序监控
  公司目前在线上运行着一款小程序,为了能监控小程序的运行情况,自行开发了一个参数搜集的SDK,名称为 shin.js,放置在 utils 目录中。  目前只搜集了打印、通信和错误,其中打印不是 console.log() 而是 shin.log()。  在小程序的管理后台,开发管理中,目前也有
从零开始搞监控系统(4)——内存泄漏
  在将监控日志的服务独立部署后,还是发现CPU会在不特定时间段(例如21~22、23~02等)飙到70%,内存也是一路飙升不会下降,明显是出现了内存泄漏。      需要进一步做优化,于是开通了阿里云的 Node.js 性能平台。一、Node.js性能平台  要使用此工具需要
关于对前端稳定性建设的一些总结
稳定性是数学或工程上的用语,判别一系统在有界的输入是否也产生有界的输出。若是,称系统为稳定;若否,则称系统为不稳定。前端的稳定性大致也可以如此概括,简单地说就是在外界影响下表现出的某种稳定状态,例如无报错、响应快、内容呈现正确等。要想达到稳定状态,需要做些有效的防范措施和机制,而这些也正是我们组
字节跳动 DanceCC 工具链系列之Xcode LLDB耗时监控统计方案
DanceCC提出了一套专门的方案。方案原理基于LLDB Plugin,利用Fishhook,从LLDB的Script Bridge API层面拦截Xcode对LLDB调用,以此来进行耗时监控统计。
Svelte runtime 源码浅析
一、什么是 Svelte❝Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 需要在「浏览器」中做大量的工作,而 Svelte 将这些工作转移到构建应用程序的「编译阶段」来处理。不同于使用虚拟 DOM 进行差异对比,Svelte 编写的代码会在应用状态变更时像做外
深入解析Flutter下一代渲染引擎Impeller
Impeller是Flutter用以替换Skia的下一代渲染方案,Impeller解决了Skia的哪些问题?为什么官方会考虑重新实现Flutter的渲染器?带着这些疑问我们一起去探究矢量渲染器的原理和Impeller背后的技术。
前端监控系列3 | 如何衡量一个站点的性能好坏
高性能站点比低性能站点更能吸引和留住用户,而留住用户对于提高用户转化率至关重要。本文以此为背景,介绍字节内部是如何衡量站点性能的,如何依靠性能监控定位线上站点性能问题。
Bundle-less 的思考和实践分享
随着 Snowpack、Vite 等利用提倡 no-bundle 的构建工具逐渐兴起,同时现代浏览器对原生 ESM 的普遍支持,Bundle-less 的概念席卷前端圈,那么我们如何理解 Bundle-less?本文分享作者对于 Bundle-less 的理解以及在这个方向上做过的一些探索。
一次冗余配置传递引发的OOM
 介绍本章使用一个开发人员经常忽略的生产环境中的 OOM(内存不足)示例来展示如何发现和分析 Node.js 应用程序 OOM,定位有问题的代码并修复 OOM 问题。我希望本章可以帮助到你。本手册首发于GitHub https://github.c
前端监控系列1| 字节的前端监控SDK是怎样设计的
介绍监控SDK如何实现底层逻辑的复用、上层逻辑的解耦、如何做到灵活可扩展。接入方众多 ,SDK如何保证原有业务的正确性、保持自身的性能和稳定性?让我们一起来看看~
Web优化躬行记(6)——优化闭环实践
在遇到一个页面性能问题时,我理解的优化闭环是:分析、策略、验证和沉淀。分析需要有分析数据,因此得有一个性能监控管理。策略就是制订针对性的优化方案,解决当前遇到的问题。验证的对象上述策略,判断方案是否有效,同样需要数据支撑。沉淀就是将解决过程文档化、通用化,能够总结成一套实际方案、优化规则等
Web优化躬行记(5)——网站优化
最近阅读了很多优秀的网站性能优化的文章,所以自己也想总结一些最近优化的手段和方法。个人感觉性能优化的核心是:减少延迟,加速展现。本文主要从产品设计、前端、后端和网络四个方面来诉说优化过程。一、产品设计在网上看到一句话:好的性能是设计出来的,而不是优化出来的。感觉好有道理,如果将性能瓶颈扼杀
Web优化躬行记(4)——用户体验和工具
一、用户体验用户体验(UE/UX)是指一个人使用一个特定产品、系统或服务时的行为、情绪与态度,还包含用户对于系统的功能、易用和效率的感受,因此用户体验在本质上可以视为一个人对于系统的主观感受与主观想法。用户体验是动态的,由于不断变化的使用情况、不停变化的各个系统,以及变化发生背后的情境与脉络,因
Web优化躬行记(3)——图像和网络
一、图像1)响应式图像浏览器根据屏幕大小、设备像素比、横竖屏自动加载合适的图像。响应式的功能可以通过srcset和sizes两个新属性实现。前者可指定选择的图像以及其大小,后者会定义一组媒体条件并声明填充的宽度。在下面的示例中(在线查看效果),浏览器会先查看设备宽度,然后检查sizes列表
Web优化躬行记(2)——JavaScript
一、语言1)慎用全局变量当变量暴露在全局作用域中时,由于全局作用域比较复杂,因此查找会比较慢。并且还有可能污染window对象,覆盖之前所赋的值,发生意想不到的错误。0 == '' //true0 == '0' //true2)简写简写的方式很多,此处只会列举其中的几
Web优化躬行记(1)——CSS
Web优化的对象包括页面性能、用户体验、开发效率、代码优化、网络延迟等,本系列会列举出众多常用的优化技巧,每个技巧都可深入分析,在此只做抛砖引玉。本系列优化内容提炼于《前端面试宝典》、《高效前端》、《高性能JavaScript》、《CSS重构》等书籍,以及《2020前端性能优化清单》等网络资源。
使用 content-visibility 优化渲染性能
最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。这是一个比较新且有强大功能的属性。本文将带领大家深入理解一番。何为 content-visibility?content-visibility:属性控制一个元素是否渲染其内容,它允许用户代理(浏览器)潜在地省略
前端页面 PDF 导出与推送在大数据分析产品中的探索与实践
简述在大数据分析产品中,我们可以通过不同的分析模型和查询语句,生成各种可视化的图表和报表,并且通过看板的形式把相关的报表进行组合和排布,形成完整的分析结论和价值输出。为了让看板分析的价值最大化,我们通常会把它们分享给同样关注和需要的人,分享一般有两种形式:系统内分享:把原始看板数据授权给具有系
前端构建效率优化之路
项目背景我们的系统(一个 ToB 的 Web 单页应用)经过多年的迭代,目前已经累积有大几十万行的业务代码,30+ 路由模块,整体的代码量和复杂度还是比较高的。项目整体是基于 Vue + TypeScirpt,而构建工具,由于最早项目是经由 vue-cli 初始化而来,所以自然而然使用的是 We
Sentry 错误监控实战
背景目前前端开发正朝着多元化的方向发展,场景愈发的复杂,生产环境经常会出现一些难以复现的问题,而且用户的具体行为和操作也无法预测。生产环境下的错误,更多的是依靠用户的反馈,这往往是不实时的,而且用户能提供的信息,通常也只有文字描述,或者图片,缺少一些关键的信息,此外,生产环境下的代码都是经过混淆压
从零开始搞监控系统(3)——性能监控
前端性能监控是个老话题了,各个团队都会对其有所关注,因为关注性能是工程师的本分。页面性能对用户体验而言十分关键,每次重构或优化,仅靠手中的几个设备或模拟的测试,缺少说服力,需要有大量的真实数据来做验证。在2016年,我就写过一篇《前端页面性能参数搜集》的文章,当时采用的还是W3C性能参数的第一版
【全网首发】手机Android存储性能优化架构分析
作者简介李晓辉(微信名:小辉),一线码农,有多年丰富嵌入式操作系统开发工作经验。先后在南大富士通,某手机大厂和初创小公司任软件工程师,系统架构师等职务。对嵌入式系统开发和os性能优化工作很熟悉。引子怎么能够找到手机存储性能优化方面的技术特性,怎么去凸显手机存储里面碰到的独特性能优化问题,有了这
从零开始搞监控系统(2)——存储和分析
一、存储在将数据传送到后台之前,已经做了一轮清洗工作,如果有需要还可以再做一次清洗。日志表如下所示,自增的 id 直接偷懒使用了 bigint,没有采用分表等其他技术。CREATE TABLE `web_monitor` ( `id` bigint(20) NOT NULL AUTO_IN
从零开始搞监控系统(1)——SDK
目前市面上有许多成熟的前端监控系统,但我们没有选择成品,而是自己动手研发。这里面包括多个原因:填补H5日志的空白节约公司费用支出可灵活地根据业务自定义监控回溯时间能更长久反哺运营和产品,从而优化产品质量一次难得的练兵机会前端监控地基本目的:了解当前项目实际使用的情况,有哪些异常,在
记录两次多端排查问题的过程
我们组会负责后端的一些服务,因此出现问题时不仅仅是界面的样式兼容问题,还有很多其他的后台服务问题。排查后面这类问题,需要具备些服务端的排查手段,否则就会难以定位问题所在。一、聊天问题公司有一个即时聊天的功能,在 6 月 2 日周五,上了一个自动推送个性文案的功能,大受好评,访问量迅速蹿升。U
【全网首发】抛砖系列之前端性能分析工具
通过一个真实案例介绍下浏览器自带的前端性能分析工具,真心好用
提升生产环境中npm install的速度
对于一个前端应用,或者说是一个Node应用,在 CICD pipeline 中,无论是构建,测试,部署,其中必不可少的环节就是依赖安装:npm i。npm i不仅是必不可少的环节,而且很可能也是耗时最长的一个环节。打蛇打七寸,优化应该从瓶颈处开始。
【全网首发】网易莫朽老师:如何从零开始做前端性能优化
性能优化作为一个老生常谈的项目,能在网上看到各种优化点,但对于一个新手来说,要着手一个完整的性能优化项目,却不知从何下手。这篇文章将介绍下如何从零开始做性能优化,介绍如何将性能优化项目落地、推进、实施,对业务赋能等。一、先来一个面试首先,先来一个面试题:请你介绍下前端性能优化?(不妨在浏
腾讯课堂对小程序的性能极致优化实践
导语本文主要介绍了小程序的优化过程,如果你的小程序也遇到了性能问题,我们的实践经验也许可以给到你启发,我们从小程序的启动、加载到交互都进行了探索。顺便说一句,这篇文章在腾讯内部曾被小程序技术总监打赏。非常适合中级开发者阅读。 正文1. 缘起 事情,要从一个周末惬意的下
前端性能优化网页渲染原理简介
导语关于前端性能优化的方式有很多,本篇着重介绍了网页渲染优化的原理和方法,适合初级开发者阅读,希望对大家的工作有所帮助!正文渲染原理在讨论性能优化之前,我们有必要了解一些浏览器的渲染原理。不同的浏览器进行渲染有着不同的实现方式,但是大体流程都是差不多的,我们通过 Chrome 浏览器来大致了
闲鱼用Flutter打造高性能富文本编辑器的实践
导语闲鱼作为一个二手闲置交易平台,卖家发布商品产出优质的供给尤为重要;商品发布器希望拥有富文本编辑能力,让用户简单便捷的方式产出更加优质的内容;Flutter本身没有富文本编辑器的能力的,只有最基础的文本编辑器TextField;对于更加复杂的场景,比如支持自定义表情、主题、有序段落等能力,目前f
一次JS优化实战
导语本篇为实战篇,重点不在阐明内存管理、GC 算法干货也相对较少,更多的内容放在了实操步骤,JS优化的方法作者一共列出7种。希望大家能有所收获。 正文工具工欲善其事,必先利其器。既然要讲性能优化,就需要量化的指标来告诉我们性能到底被优化了没有,优化了多少。js 的性能优化主要优化
WebSocket 原理和可能遇到的性能问题
 📢 大家好,我是法医,不是验尸的法医,而是写代码的法医,哈哈😅相信大家都听到过`HTTP协议`、`TCP协议`、`UDP协议`,还有那啥`离婚协议`等等很多协议,这都是一些既熟悉又陌生的词,很多小伙伴不理解这些协议到底是干嘛的?不用这协议行不行?其它协议还好说,这离婚协议我还是希
关于Web页面全链路性能优化指南
导语性能优化不单指优化一个页面的打开速度,在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化,大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中,能够让任何一个链路快一点,都可以被叫做性能优化。本文会对web页面的全链路进行完整的讲解并针对每一步找到
代码覆盖率在性能优化上的一种实践
导读JavaScript 是前端应用主要语言,相较于其他平台编程语言,JS资源多数情况下要通过网络进行加载,那么代码的体积直接影响了页面加载执行时间。“无效的代码”的多寡直接影响到了我们的代码质量,所以度量代码的执行覆盖率是一项重要的优化前置工作。 正文什么
有道直播针对页面性能优化的问题复盘
导语直播和录播在前端展现的越来越多了,当然随之而来的问题也是层出不穷。本篇是有道技术团队一次针对录播页面卡顿问题的探讨和优化,希望阅读完本篇文章大家能有所收获! 正文项目背景在 code_pc 项目中,前端需要使用 rrweb 对老师教学内容进行录制,学员可以进行录制回放。为减小
微盟关于H5页面的性能优化分析及实践
导语对于开发者来说,优化性能这个词已经不绝于耳了,常道起的是首页打开要快,我要没有白屏时间,要请求次数少,把 CSS 放在页面头部先加载,JS文件/CSS文件压缩,把小图片做成雪碧图,尽量用字体图标等解决方案。我认为这些方案确实能起到优化的作用,但为什么要这样做,这些方法能优化到多少性能,如何能有
4000字全解Web 前端性能
导语也许你有听过一个问题,你这款 web 应用性能怎么样呀?你会回答什么呢?是否会优于海量 web 应用市场呢?本文就来整理下如何进行 web 性能监控?包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。但是,如何进行 web 性能监控本身是一个很大的话题,文中只会侧
HeapDump性能社区专题系列九:如何利用webpack优化前端
HeapDump性能社区内容专题,打包知识一起学:系列一:了解数据库性能优化系列二:手把手教你了解OOM系列三:过年七天,天天向上系列四:后端面试必备问题集系列五:了解前端性能优化实践系列六:手把手教你玩转JVM性能调优系列七:大厂前端敲门砖——Flutter的
webpack打包优化的3种方法
导语webpack作为一款主流的打包工具,给用户预留了足够多的配置自由度,也存在很多优化空间,今天我们就一下几点讨论webpack打包优化。 正文抽取公共代码目标:把功能逻辑相同的代码进行单独打包,缩小各业务模块打包文件体积,实现打包文件并行加载,优化页面性能适用场景:多页应用
跟着V8引擎读懂 ECMAScript 规范(四)
在本文中,我们研究了 ECMAScript 规范如何定义覆盖语法(cover grammar),并在我们无法基于有限前瞻(finite lookahead)识别当前句法结构的情况下使用它们。我们研究了将箭头函数参数列表与带括号的表达式区分开来,以及规范如何使用覆盖语法先允许解析看起来模棱两可的结构,
从实际项目入手,完成web性能监控及优化
导语 这篇文章总结一下我过往项目的web性能优化,主要是就项目中如何发现性能问题,优化如何解决,谈一下性能优化。把学习的过程跟大家分享一下,共同学习。web的性能监测工具我用的是Chrome的Performance 面板和Lighthouse。 正文 回想起
跟着V8引擎读懂 ECMAScript 规范(三)
在本文,我们熟悉了词法语法、句法语法以及用于定义句法语法的简写。 我们研究了在异步函数中禁止使用 await 作为标识符,但在非异步函数中它却可以使用的相关定义。
如何使用 Webpack 将启动时间减少 80%
导语webpack的性能调优是前端优化经常用的优化方式,本篇主要通过对webpack的配置来优化webpack,比较适合初级读者阅读。 正文我们在 RudderStack 使用的开发方式之一是安全快速地构建,然后根据需要进行优化,这种模式使我们能够优先考虑客户问题,跟上 Rudde
跟着V8引擎读懂 ECMAScript 规范(二)
本文我们研究了ECMAScript规范如何定义语言特征,在本例中了解到了原型链遍历,跨越所有不同的层:触发特征的句法结构和定义它的算法。

有开始,就会有进​步!

在追求性能的道路上,记录每一刻的成长!源码解读,编程技巧,外文翻译,技术实践,线上案例等等,记录自己,启发他人!

专家作者推荐

巡山小汪

关注微信公众号《解Bug之路》,有问题请在公众号中咨询:) 无论多么艰苦的时刻,都不要忘记,辉煌的未来,在你的眼中闪耀!

飞哥开发内功

《深入理解Linux网络》作者,腾讯搜狗十年工程师,公众号「开发内功修炼」作者!

踩刀诗人

聊聊技术,唠唠段子,偶尔做菜写诗,欢迎关注我的公众号 踩刀诗人

Brand

搜索关注微信公众号【架构与思维】:撰稿者为bat、字节的几位高阶研发/架构,专注技术分享。

专题推荐

相比于后端遇到的各种复杂性能问题,前端的性能相对简单,但是简单不代表容易,前端的技术更新迭代快,那么针对性能问题自然也会出现各种变种,需要各种新的工具和思路。
HeapDump性能社区将引进更多前端相关大佬,来给大家分享前端性能的那些事儿。本期先从前端性能基础开始:
5篇文章7047阅读量
数据库最容易成为整个系统的性能瓶颈,本期专题向大家介绍日常工作中常见的数据库性能问题,干货+性能调优实践帮你攻克数据库性能瓶颈!
8篇文章20414阅读量