一次有趣的 DNS 导致 Node 服务故障问题分析实录
有一个部署 k3s 的边缘节点的机器,切到离线模式以后,有一个前端页面的部分请求接口异常了。node 部分的请求分为两类,一种是纯 node 的处理,一种是需要先 http 请求后端微服务的处理接口。现象是涉及 Node 请求后端 Java 服务的都 block 住了,纯 node 处理的请求都飞快
一次 Node.js http 连接无法复用的问题排查
一次压测中阿里云 SLB 的并发连接数被打满了,导致服务之间的 HTTP 调用延迟很大。当时 SLB 的并发连接数情况如下图所示。登录容器终端查看,发现某个前端 Node.js 服务中的单个容器的 E
从龟速 11s 到闪电 1s,详解前端性能优化之首屏加载
全文共6511字/词,阅读大概需要13分钟,太长不看党请直接移步👉「开始优化」部分直接查看优化手段背景前段时间公司服务器网络波动,网站访问变慢,一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下,访问新项目时,加载了近1分钟都没加载出来,而访问其他页面顶多也就30-40s。在网络
京东在Flutter加载大量图片导致的内存溢出的优化实践
Flutter在全世界,Flutter 正在被越来越多的开发者和组织使用,并且 Flutter是完全免费、开源的。它也是构建未来的 Google Fuchsia 应用的主要方式。Flutter组件采用现代响应式框架构建,这是从React中获得的灵感,中心思想是用
​一顿操作,我把 Table 组件性能提升了十倍
背景Table 表格组件在 Web 开发中的应用随处可见,不过当表格数据量大后,伴随而来的是性能问题:渲染的 DOM 太多,渲染和交互都会有一定程度的卡顿。通常,我们有两种优化表格的方式:一种是分页,另一种是虚拟滚动。这两种方式的优化思路都是减少 DOM 渲染的数量。在我们公司的项目中,会选
我的第一次webpack优化,首屏渲染从9s到1s
大家好,我是考拉🐨,本文基于vue2(虽然vue3已出,但是本文也很实用)谈到webpack优化大部分人可能都看腻了,无非就那几招嘛,我之前也是看过许多类似的文章,但都没有自己真正上手过,下面是我用公司的项目真实操练下来的,首屏加载速度提升很大(刷刷的),希望能帮到你。废话不多说,先
HeapDump性能社区专题系列五:了解前端性能优化
相比于后段遇到的各种复杂性能问题,前端的性能相对简单,但是简单不代表容易,前端的技术更新换代快,那么针对性能问题自然也会出现各种变种,需要各种新的工具和思路。HeapDump性能社区将引进更多前端相关大佬,来给大家分享前端性能的那些事儿。本期先从前端性能基础开始:
前端性能优化,如何给字体大瘦身!
导语日常开发网页经常会使用一些特殊字体,比如思源黑体、苹方字体等,因为这些字体在一般的宿主环境中是不存在的,需要通过 css 的 @font-face 定义,并从服务器中加载对应的字体文件,而字体文件一般都是比较大的,甚至有时候一个字体比其他所有的资源(js、css、图片)加起来还要大,对网页的加
抖音 Android 性能优化系列:启动优化实践
 启动性能是 APP 使用体验的门面,启动过程耗时较长很可能使用户削减使用 APP 的兴趣,抖音通过对启动性能做劣化实验也验证了其对于业务指标有显著影响。抖音有数亿的日活,启动耗时几百毫秒的增长就可能带来成千上万用户的留存缩减,因此,启动性能的优化成为了抖音 Android 基础
美团FlutterWeb性能优化探索与实践
一、背景 1.1 关于FlutterWeb 时间回拨到 2018 年,Google 首次公开 FlutterWeb Beta 版,表露出要实现一份代码、多端运行的愿景。经过无数工程师两年多的努力,在今年年初(2021 年 3 月份),Flutter 2.0 正式对外发布,
【全网首发】手机Android存储性能优化架构分析
作者简介李晓辉(微信名:小辉),一线码农,有多年丰富嵌入式操作系统开发工作经验。先后在南大富士通,某手机大厂和初创小公司任软件工程师,系统架构师等职务。对嵌入式系统开发和os性能优化工作很熟悉。引子怎么能够找到手机存储性能优化方面的技术特性,怎么去凸显手机存储里面碰到的独特性能优化问题,有了这
【全网首发】网易莫朽老师:如何从零开始做前端性能优化
性能优化作为一个老生常谈的项目,能在网上看到各种优化点,但对于一个新手来说,要着手一个完整的性能优化项目,却不知从何下手。这篇文章将介绍下如何从零开始做性能优化,介绍如何将性能优化项目落地、推进、实施,对业务赋能等。一、先来一个面试首先,先来一个面试题:请你介绍下前端性能优化?(不妨在浏
通过优化HTML来实现得物H5秒开!
导读一开始我们的H5页面秒开率只有30%左右,现在我们的H5页面秒开率达到了 75%。这中间巨大的差异究竟有哪些黑科技在里面?我们为什么要做H5页面的秒开优化?我们的秒开指标是如何统计的?客户端和H5是怎么配合做到 1+1>2的?监控是如何发现H5页面可优化项的?我们又通过监控发现了哪些可优
webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
腾讯云医小程序性能优化与监控的实战
前言腾讯云医业务是为医生与患者打造的云上一站式医疗服务平台,为了降低医生首次入驻平台的成本;利用好微信的私域流量;保证医患双方有更接近端原生的使用体验,我们选择以微信小程序作为医患双端的核心承载形式。图片小程序相对于原生本来就存在一定的性能差距,云医小程序上线后,随着入驻医生,使用患者的稳步增
关于Web页面全链路性能优化指南
导语性能优化不单指优化一个页面的打开速度,在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化,大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中,能够让任何一个链路快一点,都可以被叫做性能优化。本文会对web页面的全链路进行完整的讲解并针对每一步找到
Flutter 低成本屏幕适配方案探索和实践
导语在移动端的开发过程中,为了解决固定的设计图尺寸在不同设备上呈现的效果不一的问题,我们经常需要进行屏幕适配。虽然屏幕适配在安卓开发中已经有了很多成熟的方案,但是在 Flutter 中好像并没有什么太好的方案,因此本文将探索一个在 Flutter 上极低成本的屏幕适配方案。 正文未
得物关于iOS卡顿监控实施与性能调优
导语 卡顿就是在应用使用过程中出现界面不响应或者界面渲染粘滞的情况,用户在操作App时,会出现的页面掉帧现象,给用户直接观感受就是页面卡卡的,严重影响用户体验。得物每天面对巨大的流量,如何优化ios卡顿现象。 正文从App使用角度来看,用户在使用上会感觉到卡顿的场景,主
提升生产环境中npm install的速度
对于一个前端应用,或者说是一个Node应用,在 CICD pipeline 中,无论是构建,测试,部署,其中必不可少的环节就是依赖安装:npm i。npm i不仅是必不可少的环节,而且很可能也是耗时最长的一个环节。打蛇打七寸,优化应该从瓶颈处开始。
4000字全解Web 前端性能
导语也许你有听过一个问题,你这款 web 应用性能怎么样呀?你会回答什么呢?是否会优于海量 web 应用市场呢?本文就来整理下如何进行 web 性能监控?包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。但是,如何进行 web 性能监控本身是一个很大的话题,文中只会侧
闲鱼直播—使用Flutter实现跨平台播放器开发实践
导言直播带货已成为近年来最热的“风口”,已成为电商升级的新突破口。闲鱼作为国内最大的二手交易平台市场,直播带货也成为推动成交的强烈需求。但是闲鱼直播原先接入外部提供的直播sdk,存在以下几个痛点问题:业务定制困难。接外部sdk都存在“改不动,不敢改”
【全网首发】抛砖系列之前端性能分析工具
通过一个真实案例介绍下浏览器自带的前端性能分析工具,真心好用
前端 api 请求缓存方案
在开发 web 应用程序时,性能都是必不可少的话题。对于webpack打包的单页面应用程序而言,我们可以采用很多方式来对性能进行优化,比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 --modern 指令生
核心web指标对业务的影响
您是否正在努力说服您的利益相关者采用核心 Web 指标? 或者您想知道它是否真的对您的业务有帮助? 本文将通过探索已经对其用户和业务产生积极影响的公司示例,帮助您了解核心 Web 指标如何与关键业务指标相关联。为什么核心 Web 指标对您的用户和业务很重要?组织中的不同利益相关者可以有不同的优先
从零开始搞监控系统(1)——SDK
目前市面上有许多成熟的前端监控系统,但我们没有选择成品,而是自己动手研发。这里面包括多个原因:填补H5日志的空白节约公司费用支出可灵活地根据业务自定义监控回溯时间能更长久反哺运营和产品,从而优化产品质量一次难得的练兵机会前端监控地基本目的:了解当前项目实际使用的情况,有哪些异常,在
抖音关于Android性能优化启动优化之理论和工具篇
前言启动性能是 APP 使用体验的门面,启动过程耗时较长很可能导致用户使用 APP 的兴趣骤减,抖音通过对启动性能做劣化的 AB 实验也验证了其对于业务指标有影响显著。抖音拥有数亿的用户,启动耗时几百毫秒的增长就可能带来成千上万用户的留存缩减,因此,启动性能的优化成为了抖音 Android 基础技
从零开始搞监控系统(2)——存储和分析
一、存储在将数据传送到后台之前,已经做了一轮清洗工作,如果有需要还可以再做一次清洗。日志表如下所示,自增的 id 直接偷懒使用了 bigint,没有采用分表等其他技术。CREATE TABLE `web_monitor` ( `id` bigint(20) NOT NULL AUTO_IN
WebSocket 原理和可能遇到的性能问题
 📢 大家好,我是法医,不是验尸的法医,而是写代码的法医,哈哈😅相信大家都听到过`HTTP协议`、`TCP协议`、`UDP协议`,还有那啥`离婚协议`等等很多协议,这都是一些既熟悉又陌生的词,很多小伙伴不理解这些协议到底是干嘛的?不用这协议行不行?其它协议还好说,这离婚协议我还是希
腾讯MOO音乐关于Flutter的内存优化策略(下)
MOO 音乐是 TME 旗下的新锐音乐服务,其团队是公司内最早实践 Flutter 的先行者之一。本系列文章将提炼 MOO APP 开发中遇到的情况,就 Flutter 内存占用治理方面,分享日常开发的一些基本认知、注意要点、排查方法和优化方案。前两期为大家介绍了Flutter的内存泄漏排查及内存
Flutter混合栈路由实践与优化
导语  在 Flutter 和原生混合开发的场景里,路由是绕不开的一个话题。但业内的方案中仍存在内存异常,对官方底层的修改也需要不断踩坑。我们在项目实践中,抽离出了一套混合栈路由框架。对内存进行了进一步优化,清晰了对底层代码的修改,同时更易于 Flutter SDK 升级。 
记录两次多端排查问题的过程
我们组会负责后端的一些服务,因此出现问题时不仅仅是界面的样式兼容问题,还有很多其他的后台服务问题。排查后面这类问题,需要具备些服务端的排查手段,否则就会难以定位问题所在。一、聊天问题公司有一个即时聊天的功能,在 6 月 2 日周五,上了一个自动推送个性文案的功能,大受好评,访问量迅速蹿升。U
从零开始搞监控系统(3)——性能监控
前端性能监控是个老话题了,各个团队都会对其有所关注,因为关注性能是工程师的本分。页面性能对用户体验而言十分关键,每次重构或优化,仅靠手中的几个设备或模拟的测试,缺少说服力,需要有大量的真实数据来做验证。在2016年,我就写过一篇《前端页面性能参数搜集》的文章,当时采用的还是W3C性能参数的第一版
Lighthouse 如何计算网站的整体性能得分?
从为什么分数会波动,它是如何组成的,以及 Lighthouse 如何对每个单独的指标进行评分三部分来介绍lighthouse。
深入了解 Chrome V8 javascript engine 的垃圾收集引擎
V8 使用分代垃圾收集器,将 Javascript 堆拆分为用于新分配对象的小型年轻代和用于长期存活对象的大型老年代。 由于大多数对象在年轻时死亡,这种分代策略使垃圾收集器能够在较小的年轻代(称为清除)中执行常规的、短时间的垃圾收集,而无需跟踪年老代中的对象。
关于web端字体设置及兼容性适配的问题
前言在几年的开发生涯中碰见过几次由字体引起的各终端的页面显示差异。或许是由移动端等终端字体库引起的差异引起的,或许是由 Modern Browser 或 IE Browser 直接的解析差异引起的,或许是由字体源设计表现引起的,或许是由所设置的通用字体族字符的编码格式引起的......来一起来探个
面试官:你知道的前端优化手段
【导读】性能优化不管是在面试还是在实际工作中都是绕不开的话题,面试官问性能优化可以从不同角度或场景去提问,比如常见的,说说你知道的前端性能优化手段。 前言性能优化是一个项目发展到一定时期之后绕不开的话题,也是每个工程师心中永远在撩拨的刺。总结一下常用的前端性能优化的方
一文详解如何优化前端性能?
导读随着前端的范畴逐渐扩大,深度逐渐下沉,富前端必然带来的一个问题就是性能。特别是在大型复杂项目中,重前端业务可能因为一个小小的数据依赖,导致整个页面卡顿甚至崩溃。本文基于Quick BI(数据可视化分析平台)历年架构变迁中性能的排查、解决和总结出的“个性”问题,尝试总结整
领导:小伙子,咱们这个页面出来太慢了!赶紧给我优化一下!
性能优化这样一个词应该已经是老生常谈了,不仅在面试中面试官会以此和你掰头,而且在工作中领导也会因为网页加载速度慢来敲打你学(打)习(工),那么前端性能优化,如果判断到底需不需要做,如果需要做又怎么去做或者说怎么去找到优化的切入点? 接下来让我们一起来探索前端性能优化(emo~&n
Chrome V8 javascript engine 的3种垃圾回收算法
从 v6.2 开始,V8 将用于收集年轻代的默认算法切换为并行 Scavenger,本文介绍V8的3种垃圾回收算法:V8 年轻代切尼半空间复制垃圾回收算法、V8 年轻代并行 Mark-Evacuate 垃圾回收算法、V8 年轻代并行 Scavenger 垃圾回收算法
使用 webpack 进行 Web 性能优化(三)
即使您配置 webpack 以使应用程序尽可能小,跟踪它并知道它包含什么仍然很重要。 否则,您可以安装一个使应用程序变大两倍的依赖项——甚至不会注意到它!本节介绍可帮助您了解捆绑包的工具。跟踪包大小要监控您的应用程序大小,请在开发期间使用 webpack-dashboa
跟着V8引擎读懂 ECMAScript 规范(四)
在本文中,我们研究了 ECMAScript 规范如何定义覆盖语法(cover grammar),并在我们无法基于有限前瞻(finite lookahead)识别当前句法结构的情况下使用它们。我们研究了将箭头函数参数列表与带括号的表达式区分开来,以及规范如何使用覆盖语法先允许解析看起来模棱两可的结构,
iOS Monorepo 全源码解决方案
Monorepo 全源码方案为大型移动端开发提供了全面可行性验证以及宝贵经验。未来,我们会将现有的功能回馈到 bazel 社区,并且推出一系列文章来讲述 BitSky 套件的工作流程及原理。
字节跳动 DanceCC 工具链系列之Xcode LLDB耗时监控统计方案
DanceCC提出了一套专门的方案。方案原理基于LLDB Plugin,利用Fishhook,从LLDB的Script Bridge API层面拦截Xcode对LLDB调用,以此来进行耗时监控统计。
淘宝特价版Flutter研发模式下的页面性能优化实践
导语淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了。目前我们首页、详情、店铺、我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建。我们发现使用Flutter经常会遇到性能问题。因为Flutter严格意义上仅是一种“UI渲染框架&rdq
一次冗余配置传递引发的OOM
 介绍本章使用一个开发人员经常忽略的生产环境中的 OOM(内存不足)示例来展示如何发现和分析 Node.js 应用程序 OOM,定位有问题的代码并修复 OOM 问题。我希望本章可以帮助到你。本手册首发于GitHub https://github.c
Web优化躬行记(6)——优化闭环实践
在遇到一个页面性能问题时,我理解的优化闭环是:分析、策略、验证和沉淀。分析需要有分析数据,因此得有一个性能监控管理。策略就是制订针对性的优化方案,解决当前遇到的问题。验证的对象上述策略,判断方案是否有效,同样需要数据支撑。沉淀就是将解决过程文档化、通用化,能够总结成一套实际方案、优化规则等
微医对于webpack5持久化缓存优化的实践
导语 1、公司的云his静态项目代码量巨大,依赖的npm包大概有100个,打包一次大概要14分钟;2、自研的hammer工具的本地打包虽然能提升部署时间,但是依赖开发的手动操作;3、用来存放本地构建产物的服务器容量满了,所以为了正常使用本地打包功能,还得定期去清理服务器上的老文件,
微盟关于H5页面的性能优化分析及实践
导语对于开发者来说,优化性能这个词已经不绝于耳了,常道起的是首页打开要快,我要没有白屏时间,要请求次数少,把 CSS 放在页面头部先加载,JS文件/CSS文件压缩,把小图片做成雪碧图,尽量用字体图标等解决方案。我认为这些方案确实能起到优化的作用,但为什么要这样做,这些方法能优化到多少性能,如何能有
QuintoAndar如何通过提高页面性能来提高每个会话的转化率和页面
QuintoAndar是一家巴西 proptech公司,其产品为房地产提供数字端到端解决方案。今年,我们开展了一个项目,专注于提高应用程序中内容中心的性能,并在增加用户流量和转化指标方面取得了令人鼓舞的成果。降低反弹率:46%每节课的页数增加:87%验证阶段转换的改进:5% 
HTTP/2 简介
HTTP/2 概述注: 以下内容节选自《高性能浏览器网络》(出版社: O'Reilly,作者: Ilya Grigorik)。 要了解完整版本和相关内容,请访问hpbn.co。HTTP/2 可以让我们的应用更快、更简单、更稳定 - 这几词凑到一块是很罕见的!HTTP/2 将很多以前我们在应用中针
跟着V8引擎读懂 ECMAScript 规范(一)
在本文中,我们通过阅读分析一个简单的方法 —— Object.prototype.hasOwnProperty —— 以及它调用的抽象操作,熟悉了速记 ?和 !与错误处理有关,了解了语言类型、规范类型、内部属性和内部方法。对大家更好地阅读理解 ECMAScript 规范 打下很好的基础。
代码覆盖率在性能优化上的一种实践
导读JavaScript 是前端应用主要语言,相较于其他平台编程语言,JS资源多数情况下要通过网络进行加载,那么代码的体积直接影响了页面加载执行时间。“无效的代码”的多寡直接影响到了我们的代码质量,所以度量代码的执行覆盖率是一项重要的优化前置工作。 正文什么
优化 JavaScript 执行
JavaScript 经常会触发视觉变化。有时是直接通过样式操作,有时是会产生视觉变化的计算,例如搜索数据或将其排序。时机不当或长时间运行的 JavaScript 可能是导致性能问题的常见原因。您应当设法尽可能减少其影响。JavaScript 性能分析可以说是一门艺术,因为您编写的 JavaScr
字节前端监控SDK体积与性能优化实践
本文以字节前端监控sdk为例,探讨作为三方sdk如何实现性能优化等思路和实操。
前端监控系列3 | 如何衡量一个站点的性能好坏
高性能站点比低性能站点更能吸引和留住用户,而留住用户对于提高用户转化率至关重要。本文以此为背景,介绍字节内部是如何衡量站点性能的,如何依靠性能监控定位线上站点性能问题。
插件化框架相关性能优化
插件化框架的发展经历了四个阶段:探索阶段、发展阶段、品质阶段、体验阶段。各个阶段有各个阶段需要完成的使命。。需要通过不断的熟读系统的代码和写的老代码,不断的挖掘瓶颈问题,见微知著,保持好奇,勇于尝试。
Web优化躬行记(2)——JavaScript
一、语言1)慎用全局变量当变量暴露在全局作用域中时,由于全局作用域比较复杂,因此查找会比较慢。并且还有可能污染window对象,覆盖之前所赋的值,发生意想不到的错误。0 == '' //true0 == '0' //true2)简写简写的方式很多,此处只会列举其中的几
前端调优,我是这样把vue项目启动时间从70s优化到7秒!
可怕的启动时间公司的产品是一个比较大的后台管理系统,而且使用的是webpack3的vue模板项目,单次项目启动时间达到了70s左右  启动个项目都够吃一碗豆腐脑了,可是没有豆腐脑怎么办,那就优化启动时间吧! 考虑到升级webpack版本的风险还是比较大的,

有开始,就会有进​步!

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

专家作者推荐

巡山小汪

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

飞哥开发内功

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

踩刀诗人

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

Brand

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

专题推荐

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