从龟速 11s 到闪电 1s,详解前端性能优化之首屏加载
全文共6511字/词,阅读大概需要13分钟,太长不看党请直接移步👉「开始优化」部分直接查看优化手段背景前段时间公司服务器网络波动,网站访问变慢,一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下,访问新项目时,加载了近1分钟都没加载出来,而访问其他页面顶多也就30-40s。在网络
前端性能优化,如何给字体大瘦身!
导语日常开发网页经常会使用一些特殊字体,比如思源黑体、苹方字体等,因为这些字体在一般的宿主环境中是不存在的,需要通过 css 的 @font-face 定义,并从服务器中加载对应的字体文件,而字体文件一般都是比较大的,甚至有时候一个字体比其他所有的资源(js、css、图片)加起来还要大,对网页的加
【全网首发】网易莫朽老师:如何从零开始做前端性能优化
性能优化作为一个老生常谈的项目,能在网上看到各种优化点,但对于一个新手来说,要着手一个完整的性能优化项目,却不知从何下手。这篇文章将介绍下如何从零开始做性能优化,介绍如何将性能优化项目落地、推进、实施,对业务赋能等。一、先来一个面试首先,先来一个面试题:请你介绍下前端性能优化?(不妨在浏
关于Web页面全链路性能优化指南
导语性能优化不单指优化一个页面的打开速度,在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化,大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中,能够让任何一个链路快一点,都可以被叫做性能优化。本文会对web页面的全链路进行完整的讲解并针对每一步找到
提升生产环境中npm install的速度
对于一个前端应用,或者说是一个Node应用,在 CICD pipeline 中,无论是构建,测试,部署,其中必不可少的环节就是依赖安装:npm i。npm i不仅是必不可少的环节,而且很可能也是耗时最长的一个环节。打蛇打七寸,优化应该从瓶颈处开始。
【全网首发】抛砖系列之前端性能分析工具
通过一个真实案例介绍下浏览器自带的前端性能分析工具,真心好用
记录两次多端排查问题的过程
我们组会负责后端的一些服务,因此出现问题时不仅仅是界面的样式兼容问题,还有很多其他的后台服务问题。排查后面这类问题,需要具备些服务端的排查手段,否则就会难以定位问题所在。一、聊天问题公司有一个即时聊天的功能,在 6 月 2 日周五,上了一个自动推送个性文案的功能,大受好评,访问量迅速蹿升。U
一文详解如何优化前端性能?
导读随着前端的范畴逐渐扩大,深度逐渐下沉,富前端必然带来的一个问题就是性能。特别是在大型复杂项目中,重前端业务可能因为一个小小的数据依赖,导致整个页面卡顿甚至崩溃。本文基于Quick BI(数据可视化分析平台)历年架构变迁中性能的排查、解决和总结出的“个性”问题,尝试总结整
淘宝特价版Flutter研发模式下的页面性能优化实践
导语淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了。目前我们首页、详情、店铺、我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建。我们发现使用Flutter经常会遇到性能问题。因为Flutter严格意义上仅是一种“UI渲染框架&rdq
一次冗余配置传递引发的OOM
 介绍本章使用一个开发人员经常忽略的生产环境中的 OOM(内存不足)示例来展示如何发现和分析 Node.js 应用程序 OOM,定位有问题的代码并修复 OOM 问题。我希望本章可以帮助到你。本手册首发于GitHub https://github.c
QuintoAndar如何通过提高页面性能来提高每个会话的转化率和页面
QuintoAndar是一家巴西 proptech公司,其产品为房地产提供数字端到端解决方案。今年,我们开展了一个项目,专注于提高应用程序中内容中心的性能,并在增加用户流量和转化指标方面取得了令人鼓舞的成果。降低反弹率:46%每节课的页数增加:87%验证阶段转换的改进:5% 
字节前端监控SDK体积与性能优化实践
本文以字节前端监控sdk为例,探讨作为三方sdk如何实现性能优化等思路和实操。
前端监控系列3 | 如何衡量一个站点的性能好坏
高性能站点比低性能站点更能吸引和留住用户,而留住用户对于提高用户转化率至关重要。本文以此为背景,介绍字节内部是如何衡量站点性能的,如何依靠性能监控定位线上站点性能问题。
插件化框架相关性能优化
插件化框架的发展经历了四个阶段:探索阶段、发展阶段、品质阶段、体验阶段。各个阶段有各个阶段需要完成的使命。。需要通过不断的熟读系统的代码和写的老代码,不断的挖掘瓶颈问题,见微知著,保持好奇,勇于尝试。
Web优化躬行记(2)——JavaScript
一、语言1)慎用全局变量当变量暴露在全局作用域中时,由于全局作用域比较复杂,因此查找会比较慢。并且还有可能污染window对象,覆盖之前所赋的值,发生意想不到的错误。0 == '' //true0 == '0' //true2)简写简写的方式很多,此处只会列举其中的几
前端性能精进(七)——构建
前端构建是指通过工具自动化地处理那些繁琐、重复而有意义的任务。这些任务包括语言编译、文件压缩、模块打包、图像优化、单元测试等一切需要对源码进行处理的工作。
前端性能精进之优化方法论(一)——测量
本文的示例代码摘取自 shin-monitor,一款开源的前端监控脚本。为了便于记忆,特将此系列的所有重点内容浓缩成一张思维导图
前端性能优化基础实践
前面我们已经探索了各种改进页面加载时间的方法。文本内容的加载性能图像内容的加载性能HTTP RequestsHTTP缓存这些技术可视为“唾手可得的果实”——通过简单的努力就能产生巨大的性能提升。说说容易,我们还没有真正看到这些技术的实际应用,
关于对前端稳定性建设的一些总结
稳定性是数学或工程上的用语,判别一系统在有界的输入是否也产生有界的输出。若是,称系统为稳定;若否,则称系统为不稳定。前端的稳定性大致也可以如此概括,简单地说就是在外界影响下表现出的某种稳定状态,例如无报错、响应快、内容呈现正确等。要想达到稳定状态,需要做些有效的防范措施和机制,而这些也正是我们组
Web优化躬行记(4)——用户体验和工具
一、用户体验用户体验(UE/UX)是指一个人使用一个特定产品、系统或服务时的行为、情绪与态度,还包含用户对于系统的功能、易用和效率的感受,因此用户体验在本质上可以视为一个人对于系统的主观感受与主观想法。用户体验是动态的,由于不断变化的使用情况、不停变化的各个系统,以及变化发生背后的情境与脉络,因
前端性能精进(六)——网络
网络也是前端性能优化的重要一环,网页上的资源都要经过网络来传输。优化网络性能除了缓存和压缩之外,还有就是协议和 CDN
Web优化躬行记(5)——网站优化
最近阅读了很多优秀的网站性能优化的文章,所以自己也想总结一些最近优化的手段和方法。个人感觉性能优化的核心是:减少延迟,加速展现。本文主要从产品设计、前端、后端和网络四个方面来诉说优化过程。一、产品设计在网上看到一句话:好的性能是设计出来的,而不是优化出来的。感觉好有道理,如果将性能瓶颈扼杀
前端性能精进之浏览器(五)——JavaScript
JavaScript 是一种通过解释执行的高级编程语言,同时也是一门动态、弱类型的直译脚本语言,适合面向对象(基于原型)和函数式的编程风格。
Web优化躬行记(1)——CSS
Web优化的对象包括页面性能、用户体验、开发效率、代码优化、网络延迟等,本系列会列举出众多常用的优化技巧,每个技巧都可深入分析,在此只做抛砖引玉。本系列优化内容提炼于《前端面试宝典》、《高效前端》、《高性能JavaScript》、《CSS重构》等书籍,以及《2020前端性能优化清单》等网络资源。
使用 content-visibility 优化渲染性能
最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。这是一个比较新且有强大功能的属性。本文将带领大家深入理解一番。何为 content-visibility?content-visibility:属性控制一个元素是否渲染其内容,它允许用户代理(浏览器)潜在地省略
从47%到80%,携程酒店APP流畅度优化实践
一、导语APP性能提升一直是研发团队永恒的主题。在进行APP性能优化实践中,除了性能技术方案本身外,还会面临两方面问题:第一,APP的性能优化,不具有持续性,往往经过一段时间优化实践,效果明显,但是随着后续需求迭代和代码变更,APP性能很难维持在一个较好的水平上;第二,APP性能改善提升,缺乏一套
W3C规范成熟不同阶段的Web性能API参考
绩效是W3C网络性能工作组的一大重点。查看这些API,它们为Web性能和W3C标准提供了参考。
前端性能精进之优化方法论(二)——分析
在上一节中曾提到过两种性能监控:SYN 和 RUM,那么对应的也有两种分析:数据分析和实验室分析。数据分析会通过采集上来的性能信息来剖析和定位可能存在的各种问题。
前端性能精进之浏览器(三)——图像
本文对图像的优化进行了系统性的梳理,首先是对请求做优化。为了更科学的对图像进行请求,列出了懒加载、预加载和 Data URI 三种优化方法。
前端监控系列1| 字节的前端监控SDK是怎样设计的
介绍监控SDK如何实现底层逻辑的复用、上层逻辑的解耦、如何做到灵活可扩展。接入方众多 ,SDK如何保证原有业务的正确性、保持自身的性能和稳定性?让我们一起来看看~
一次JS优化实战
导语本篇为实战篇,重点不在阐明内存管理、GC 算法干货也相对较少,更多的内容放在了实操步骤,JS优化的方法作者一共列出7种。希望大家能有所收获。 正文工具工欲善其事,必先利其器。既然要讲性能优化,就需要量化的指标来告诉我们性能到底被优化了没有,优化了多少。js 的性能优化主要优化
腾讯MOO音乐关于Flutter的内存泄漏的排查实战(中)
导言MOO 音乐是 TME 旗下的新锐音乐服务,其团队是公司内最早实践 Flutter 的先行者之一。本系列文章将提炼 MOO APP 开发中遇到的情况,就 Flutter 内存占用治理方面,分享日常开发的一些基本认知、注意要点、排查方法和优化方案。内存治理篇文章共分上、中、下三篇,本篇为中篇。
腾讯课堂对小程序的性能极致优化实践
导语本文主要介绍了小程序的优化过程,如果你的小程序也遇到了性能问题,我们的实践经验也许可以给到你启发,我们从小程序的启动、加载到交互都进行了探索。顺便说一句,这篇文章在腾讯内部曾被小程序技术总监打赏。非常适合中级开发者阅读。 正文1. 缘起 事情,要从一个周末惬意的下
深入解析Flutter下一代渲染引擎Impeller
Impeller是Flutter用以替换Skia的下一代渲染方案,Impeller解决了Skia的哪些问题?为什么官方会考虑重新实现Flutter的渲染器?带着这些疑问我们一起去探究矢量渲染器的原理和Impeller背后的技术。

有开始,就会有进​步!

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

专家作者推荐

巡山小汪

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

飞哥开发内功

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

踩刀诗人

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

Brand

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

专题推荐

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