从龟速 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缓存这些技术可视为“唾手可得的果实”——通过简单的努力就能产生巨大的性能提升。说说容易,我们还没有真正看到这些技术的实际应用,
关于对前端稳定性建设的一些总结
稳定性是数学或工程上的用语,判别一系统在有界的输入是否也产生有界的输出。若是,称系统为稳定;若否,则称系统为不稳定。前端的稳定性大致也可以如此概括,简单地说就是在外界影响下表现出的某种稳定状态,例如无报错、响应快、内容呈现正确等。要想达到稳定状态,需要做些有效的防范措施和机制,而这些也正是我们组

有开始,就会有进​步!

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

专家作者推荐

巡山小汪

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

飞哥开发内功

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

踩刀诗人

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

Brand

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

专题推荐

Netty 是一个异步事件驱动的网络通信层框架,用于快速开发高可用高性能的服务端网络框架与客户端程序,它极大地简化了 TCP 和 UDP 套接字服务器等网络编程。
作者:闪电侠,《跟闪电侠学 Netty》已出版了。书的前半部分是掘金小册中的内容:通过一个完整的 IM 项目入门 Netty;后半部分用了较大的篇幅来介绍 Netty 的底层原理,也会穿插讲一些源码阅读的思路,希望能够帮助到你。
13篇文章21840阅读量
Out of memory (OOM) 是一种操作系统或者程序已经无法再申请到内存的状态。经常是因为所有可用的内存,包括磁盘交换空间都已经被分配了。OOM的官方解释是:Understand the OutOfMemoryError Exception,根据HeapDump性能社区专属讲师公与的总结,常见的OOM有以下10种(其中OOM Killer是操作系统层面的概念)。
11篇文章12748阅读量