从50分到90分,网站性能优化实践

难以置信: 我可是用尊贵的Vue3+Ts开发的呢 (手动狗头).

十分抗拒: 迫于yin威,我给网站做了体检和手术.

体检

市面上的体检套餐有很多种,但其实都是换汤不换药.那药(标准)是什么呢?我们会在下面说明.这里我选择了谷歌亲儿子"灯塔"(LightHouse)进行性能体检.

体检标准


为什么我说大多体检套餐都是换汤不换药呢?我们先从灯塔的计分规则说起:从上面中我们可以看到灯塔v6/v7版是通过几种性能指标及不同权重来进行计分的.这几种指标主要是根据PerformanceTiming和PerformanceEntry API标准进行定义.市面上大多体检套餐也是基于这些指标定制的.接下来我们来了解下这些指标的含义吧.

FCP (First Contentful Paint)

渲染第一个元素(文本、图片、canvas…)的时间点

SI (Speed Index)

首屏展现时间

LCP (Largest Contentful Paint)

渲染可视区域内最大内容元素的时间点

TTI (Time to Interactive)

页面资源加载成功并能响应用户交互的时间点

TBT (Total Blocking Time)

FCP到TTI之间,主线程被long task(超过50ms)阻塞的时间之和

CLS (Cumulative Layout Shift)

累计布局偏移值

FID (First Input Delay)

用户第一次在页面进行交互(点击链接、按钮、自定义js事件),到浏览器实际开始处理这个事件的时间

Core Web Vitals

谈到用户体验与性能指标,顺便提下Core Web Vitals. 2020年5月,Google针对网站使用体验推出了一套核心指标标准(Core Web Vitals).由三项指标构成:为什么不是别的指标呢 ? 因为这套标准主要从以下三个维度进行评估:

  • [加载情况] : LCP

  • [交互性] : FID

  • [视觉稳定性] : CLS

如何检视Core Web Vitals 指标 ?

开发者可利用以下几种工具对Core Web Vitals进行监测: 由于FID需要一个真实用户的交互,所以无法用实验数据测试.为了能在实验数据下测试FID,通常会用TBT (Total Blocking Time).虽然他们测量的内容不同,但改善TBT通常也能改善FID.

体检结果

不检不知道,一检吓一跳.6个"重要器官"凉了一半…是时候对它动个手术了!

指标评分

market-optimize-before.png

改善建议

improve-advice.png

手术

手术方案

既然是性能手术,方案就主要以性能指标作为维度,主要分为以下几个点:

  • 视觉稳定性 (Cumulative Layout Shift)

  • 加载情况 (Largest Contentful Paint)

  • TTI (Time to Interactive)

  • TBT (Total Blocking Time)

  • FCP (First Contentful Paint)

手术过程

视觉稳定性 (Cumulative Layout Shift)

  • 优化未设置尺寸的图片元素

改善建议里提到了一项优先级很高的优化就是为图片元素设置显式的宽度和高度,从而减少布局偏移和改善CLS.

image-size.png

Hello World
  • 自定义字体文件加载期间保持可见状态

改善建议里提到使用CSS font-display属性确保自定义字体文件在加载期间可见.

webfont-load.png

这是因为网站下载自定义字体文件需要一段时间,而不同浏览器此时的行为是不同的.一些浏览器在加载自定义字体时会隐藏文字,这种称之为FOIT(Flash Of Invisible Text).而一些浏览器会显示降级字体,这种情况称之为FOUT(Flash Of Unstyled Tex).这两种行为会导致"字体闪烁问题",影响视觉稳定性 (CLS).

我的处理方法是直接设置font-display:swap;这个属性能确保字体在加载时间可见.虽然还是会引发FOUT,但是相比FOIT,FOUT对视觉稳定性的影响会小一些.

更好的方案应该是预加载(preload)字体文件.让字体下载有更高概率赶在FCP之前,从而避免FOIT/FOUT.

@font-face {

font-family: ‘Hello-World’;

src: url(‘…/font/Hello-World.otf’) format(‘OpenType’);

/* swap:如果设定的字体还未可用,浏览器将首先使用备用字体显示,当设定的字体加载完成后替换备用字体 */

font-display:swap;

}

  • 避免页面布局发生偏移

cls-ele.png

我们产品中有一个顶部动态插入的元素,这个元素会导致网站整体布局下移.从而造成了较大的布局偏移.跟产品及ui py交易后,我们友好地对这个元素进行了调整.将该元素脱离文档流,采用固定定位的方式进行展示.从而解决该问题.

  • 避免非合成动画

non-composited-animation.png

改善建议中提到应避免使用非合成动画,非合成动画会使得页面变得混乱并增加CLS.关于这个优化建议我觉得应该具体场景具体分析,不应该"因噎废食".毕竟目前能被composited的css属性只有transform & opacity.当然这也在提醒我们平时在做CSS动画时应注意优化 (比如常见的使用transform替代top).

加载情况 (Largest Contentful Paint)

  • 替换最大内容绘制元素

在改善建议中,我发现网站的最大内容绘制元素是谷歌地图中的一个图块元素.这也难怪LCP指标的数据表现不理想了,原因: 链路过长 - 下载谷歌地图Js sdk => 初始化谷歌地图=> 绘制 .

于是,我决定对最大内容绘制元素进行修改,从而提升LCP时间.我喵了一眼Largest Contentful Paint API 关于该元素类型的定义,将"目标"锁定到了一个loading元素 (绘制成本低: 默认渲染,不依赖任何条件和判断).经过我对该元素的尺寸动了手脚后(变大),该元素成功"上位".

文末

如果30岁以前,可以还不知道自己想去做什么的话,那30岁之后,真的觉得时间非常的宝贵,不能再浪费时间在一些碎片化的事情上,比如说看综艺,电视剧。一个人的黄金时间也就二,三十年,不能过得浑浑噩噩。所以花了基本上休息的时间,去不断的完善自己的知识体系,希望可以成为一个领域内的TOP。

同样是干到30岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

前端面试题汇总

JavaScript

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/34736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

multiprocessing 模块的 Manager

multiprocessing 模块的 Manager 类提供了一个机制,允许多个进程共享数据结构。 Manager 对象可以创建多种可被多个进程共享的数据结构,如列表、字典、集合等。以下是 Manager 的一些常用属性和方法: 属性: address : 包含绑定到…

使用Spring Boot 3.x结合专有算法生成电子印章

本章将是关于如何用Spring Boot 3.x实现网上政务统一电子印章的一站式解决方案。我们将深度探讨电子印章的生成、管理、应用,并探讨其在不同平台的兼容性问题和OCR技术的应用。同时,也会讨论如何结合电子签章、电子印章与文档的绑定,以及印章…

Scala入门:打造大数据处理的超能力(通俗易懂)

Scala是一门现代的多范式编程语言,它融合了面向对象和函数式编程的特点,被广泛应用于大数据处理领域。本文将详细介绍Scala的基本概念、使用方法、主要作用以及注意事项。 一、Scala简介 1. Scala的起源 Scala由Martin Odersky于2004年创建&#xff0c…

解决 vue 项目一直出现 sockjs-node/info?t=问题

其实如果是在开发环境,应该是开发的时候网络环境变更导致,比如你切换无线网络,导致开发服务器的IP地址换了,这样开发服务器会不知道如何确定访问源。开发环境中关闭npm dev server,然后重新npm run serve重新构建服务环…

探索AI世界系列:俗说AI智能体

AI agent,翻译为中文就是AI智能体。 什么是AI智能体呢? 一,GPT对AI智能体的定义 AI智能体,即人工智能体(Artificial Intelligence Agent),是具有自主性、学习能力和推理能力的计算机程序。 …

聚观早报 | 小鹏MONA M03曝光;iPhone 16系列电池改进

聚观早报每日整理最值得关注的行业重点事件,帮助大家及时了解最新行业动态,每日读报,就读聚观365资讯简报。 整理丨Cutie 6月25日消息 小鹏MONA M03曝光 iPhone 16系列电池改进 一加Ace 3 Pro三款配色 字节跳动与博通合作开发AI芯片 蚂…

【性能优化】Android冷启动优化

文章目录 常见现象APP的启动流程计算启动时间Displayed Timeadb dump 启动优化具体策略总结参考链接 常见现象 各种第三方工具初始化和大量业务逻辑初始化,影响启动时间,导致应用启动延迟、卡顿等现象 APP的启动流程 加载和启动应用程序; …

学习笔记STMF4 TIMER定时器(使用开发板立创天空星STMF4)

目录 #定时器的介绍 #怎么去理解定时器的预分频系数 #使用定时器实现完成触发中断 #定时器触发中断基本函数配置 #在使用TIMER 触发中断的时候为什么不需要配置EXTI中断这个选项 #使用定时器完成输出PWM #PWM基本知识介绍 #函数配置生成PWM 这个系列所有笔记用来记录&#x…

AttributeError: module ‘cv2‘ has no attribute ‘face‘

Traceback (most recent call last): File "D:\AI_37\pythonProject7\day23\课堂代码\day23\07-人脸识别.py", line 4, in <module> recognizer cv2.face.LBPHFaceRecognizer_create() ^^^^^^^^ AttributeError: module cv2 has no at…

【OnlyOffice】 桌面应用编辑器,版本8.1发布,PDF编辑器、幻灯片版式、改进从右至左显示、新的本地化选项等功能,快来体验吧

继 ONLYOFFICE 文档 8.1 发布后&#xff0c;适用于 Linux、Windows 和 macOS 的 ONLYOFFICE 桌面应用程序最新版本也已推出。它具有在线套件的最主要功能&#xff0c;例如功能齐全的 PDF 编辑器、演示文稿中的幻灯片版式、改进的 RTL 支持、新的本地化选项等。 目录 ONLYOFFICE…

Python装饰器:深入解析与实用案例

Python装饰器&#xff1a;深入解析与实用案例 在Python编程中&#xff0c;装饰器&#xff08;Decorators&#xff09;是一个强大且优雅的功能&#xff0c;它允许我们在不修改函数或类代码的情况下&#xff0c;给它们添加额外的功能。装饰器在日志记录、性能分析、权限检查等场…

缓存穿透防御战:Memcached解决方案全解析

缓存穿透防御战&#xff1a;Memcached解决方案全解析 引言 在高性能的缓存系统设计中&#xff0c;Memcached扮演着至关重要的角色。然而&#xff0c;缓存穿透问题却可能成为系统的致命弱点。当大量请求指向不存在的数据时&#xff0c;这些请求可能直接打到数据库&#xff0c;…

手机看cad图的软件有哪些?软件推荐

手机看cad图的软件有哪些&#xff1f;随着科技的不断发展&#xff0c;CAD图纸在手机上的查看和编辑需求日益增加。为了满足这一需求&#xff0c;市面上涌现出了众多手机CAD看图软件。本文将为大家推荐四款优秀的手机CAD看图软件&#xff0c;并分别介绍它们的功能特点、受众定位…

【数组】- 有序数组的平方

1. 对应力扣题目连接 有序数组的平方 2. 实现案例代码 public class SquareOfOrderedArrays {public static void main(String[] args) {// 创建非递减数组int[] nums {-4, -1, 0, 3, 10};// 调用函数并打印结果System.out.println(Arrays.toString(sortedSquaresOfFor(num…

JavaScript的学习之DOM简介

目录 一、DOM是什么 二、节点是什么&#xff08;Node&#xff09; 三、代码示例 一、DOM是什么 DOM全称Document Object Model文档对象模型 文档&#xff1a;表示整个HTML网页文档 对象&#xff1a;表示网页中的每一个部分转换为一个对象 模型&#xff1a;表示对象之间的关系…

Python并发编程:选择最佳并发方式

Python并发编程&#xff1a;选择最佳并发方式 在Python编程中&#xff0c;并发处理是一个常见且重要的主题。随着系统需求的增长&#xff0c;单个线程或进程往往无法高效地处理所有任务&#xff0c;尤其是在需要同时处理大量独立任务时。Python提供了多种并发机制&#xff0c;…

LabVIEW开发电气设备检测与管理系统

设计并实现了一个基于LabVIEW的电气设备检测与管理系统&#xff0c;采用了先进的硬件设备&#xff08;NI PXI-6289数据采集卡、Fluke 434电能质量分析仪和Schneider PM5560电力监控仪&#xff09;&#xff0c;通过实时采集、处理与存储电气设备数据&#xff0c;提高了电气设备的…

kotlin 协程之Callback转挂起函数(suspendCoroutine)

前言 在 Kotlin 协程中可以通过挂起函数来实现异步操作的串行化,但是在日常开发场景中,大部分项目都是java和kotlin并存的,老旧的Java代码除非有需求,否则不会轻易改动重构。 即使项目是纯kotlin开发的,也会有一些java代码实现的三方库, 因此,我们很难规避掉所有的 C…

【XCharts插件】4-4、扩展图表(v3.0)

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址QQ群:398291828大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 XCharts插件是一款基于UGUI的功能强大、易用、参数可配置的数据可视化图表插件。 【Unity3D…

Go语言JSON-RPC 实战: `net/rpc/jsonrpc` 包的高效使用指南

Go语言JSON-RPC 实战&#xff1a; net/rpc/jsonrpc 包的高效使用指南 简介jsonrpc 包的基础客户端&#xff08;Client&#xff09;创建客户端调用方法 服务器&#xff08;Server&#xff09;配置服务器数据类型和错误处理 搭建基础的 JSON-RPC 服务服务端的实现客户端的实现 进…