什么是性能优化?如何性能优化?

FP (First Paint) - 开启体验之门

场景说明:当用户访问一个新网站时,首次绘制(FP)就像是网站的大门第一次打开。用户期待着的不只是白色的加载屏幕;他们希望有个迹象表明网站正在努力加载。

为何重要:即使内容还未完全到位,FP给了用户一个信号——你的网站在工作。在竞争激烈的互联网上,每个微小的优势都可能决定用户是否留下来。

前端工程师行动:优化服务器响应时间,使用CDN,确保CSS和JavaScript尽可能快地加载,以便用户能够迅速看到第一帧画面。

FCP (First Contentful Paint) - 展现价值的第一步

场景说明:用户看到网站上的第一个文本块、图像、SVG或其他内容元素时,这就是首次内容绘制(FCP)。在电子商务网站上,这可能是产品图片或优惠信息。

为何重要:FCP是告诉用户“有价值的东西正在到来”的第一个明确信号。这不仅是关于速度,更是关于如何迅速吸引用户的注意力。

前端工程师行动:优化图像大小和格式,对关键的CSS进行内联处理,以及推迟非关键JavaScript的加载,都可以加快FCP。

FMP (First Meaningful Paint) - 交付核心价值

场景说明:用户不仅仅需要看到内容,他们需要看到对他们有意义的内容。在新闻网站上,首次有意义绘制(FMP)可能是新闻标题和摘要;在博客中,可能是文章的开头。

为何重要:FMP直接关系到用户的首次深度印象。如果用户迅速看到了他们期望的内容,他们更可能继续阅读和探索。

前端工程师行动:分析哪些内容对用户最有价值,并确保这些内容优先加载。考虑使用服务端渲染或静态生成页面,以减少首次有意义绘制的时间。

TTI (Time to Interactive) - 全面互动的起点

场景说明:页面可交互意味着用户可以点击按钮、输入文本和进行导航。例如,在一个交互式教育平台,TTI是用户开始回答问题或进行测验的那一刻。

为何重要:用户对互动有着即时的预期。一个慢的TTI会导致用户感到挫败,甚至在页面准备好之前就离开。

前端工程师行动:优化JavaScript执行,分割代码以按需加载,利用浏览器的预加载能力,并减少主线程上的工作量。

TTFB (Time to First Byte) - 速度与响应的证明

场景说明:在网页访问过程中,TTFB是用户请求被服务器接收并开始处理的标志。在云端服务中,一个低TTFB意味着服务迅速响应,数据正在路上。

为何重要:用户往往不知道后端的复杂性,但他们会感受到延迟。一个快速的TTFB表示强大

的后端性能和良好的用户体验。

前端工程师行动:确保服务器性能优化,数据库响应迅速,考虑使用缓存策略,如Redis,减少数据库查询时间。

DCL (DOM Content Loaded) - 结构完整之时

场景说明:DCL发生在整个页面的HTML被加载和解析后,但不包括如样式表、图像和框架等资源。在一个复杂的申请表格页面,DCL是表单结构准备就绪的时刻,用户准备开始填写。

为何重要:在DCL之后,JavaScript通常开始执行,为页面带来额外的功能。一个快速的DCL可以使页面更早地对用户有用。

前端工程师行动:简化DOM元素,减少HTML的大小,推迟非关键资源的加载,并优化服务器端渲染。

CLS (Cumulative Layout Shift) - 稳定性的保障

场景说明:用户正在阅读一个精彩的文章,如果文中的图片或广告突然加载并导致内容跳动,这就产生了布局偏移。CLS衡量这种稳定性的缺乏。

为何重要:稳定的页面布局让用户可以专注于内容,而不是被突然的变化分心。一个低的CLS意味着更可靠的用户体验。

前端工程师行动:为图像和视频指定尺寸,确保广告元素有一个明确的占位符,避免在页面加载时插入新内容。

LCP (Largest Contentful Paint) - 精华内容的递交

场景说明:用户访问一个产品页面,LCP可能是产品图片的加载。这个图像不仅是页面上最大的内容,也是最能吸引用户注意的部分。

为何重要:LCP直接影响到用户是否愿意等待了解更多信息。如果关键内容迅速显示,用户会有更好的参与感。

前端工程师行动:优化最大的内容元素,如主图像或视频,以快速加载。使用下一代格式,如WebP,减少资源大小,并确保快速的内容交付网络。


如何衡量和优化网页性能指标

一个网页的性能优化旅程始于准确地衡量它的当前状态。以下是前端工程师可以使用的工具和策略,以确保他们拥有所需的数据来优化性能。

工具篇

  1. Lighthouse

    • 用途:一个开源的、自动化的工具,用于提高网页质量。它可以评估性能、可访问性、渐进式Web应用、SEO和更多。
    • 如何使用:可以在Chrome DevTools中运行,也可以作为CLI工具或Node模块使用。
    • 优化策略:Lighthouse提供一个性能得分,并给出具体的优化建议,比如减少主线程工作量、移除阻塞渲染的资源等。
  2. WebPageTest

    • 用途:一个在线工具,提供了深入的性能评估,包括首次绘制和完全加载时间。
    • 如何使用:在WebPageTest的网站上输入你的页面URL进行测试。
    • 优化策略:除了性能指标的分析外,它还提供了水平流图和资源加载图,帮助识别加载瓶颈。
  3. Chrome DevTools

    • 用途:Chrome浏览器内置的开发工具集,提供了网络请求监控、性能评估、审计等功能。
    • 如何使用:打开Chrome浏览器的开发者工具,通过网络和性能标签页来查看加载详情。
    • 优化策略:利用它提供的性能时间线,识别渲染阻塞资源,分析JavaScript执行时间。

性能优化篇

  1. 减少JavaScript执行时间

    • 策略:通过代码分割和延迟加载非关键脚本,减少初始加载时执行的JavaScript代码量。
    • 实施:使用Webpack、Rollup或其他现代模块打包器,利用它们的代码分割功能。
  2. 优化图片和媒体文件

    • 策略:选择正确的图片格式,比如WebP,它提供了比JPEG更好的压缩。
    • 实施:在服务器端配置自动化工具,或使用构建工具的插件在构建过程中转换图片格式。
  3. 减少网络请求的往返次数

    • 策略:通过使用HTTP/2协议,实现请求的多路复用,减少了往返次数。
    • 实施:确保服务器支持HTTP/2,对于静态资源,利用CDN来进一步减少延迟。
  4. 利用浏览器缓存

    • 策略:适当配置资源的缓存策略,可以避免用户在每次访问时都重新下载相同的资源。
    • 实施:设置HTTP缓存头,如Cache-Control,并确保缓存策略符合你的更新需求。
  5. 避免不必要的重绘和重排

    • 策略:避免触发页面布局的改变,除非绝对必要,因为这会导致浏览器重新计算元素的位置和大小。
    • 实施:优化CSS并避免在主要动画和过渡中使用属性,如width、`height

top,改用transform`。

  1. 精简和合并资源文件

    • 策略:减少HTTP请求的数量对于提高网站加载速度至关重要。通过合并CSS和JavaScript文件,可以减少浏览器对服务器的请求数量。
    • 实施:使用工具如Webpack可以合并和压缩资源文件。此外,确保在生产环境中启用压缩,如Gzip或Brotli,来减少发送到浏览器的数据量。
  2. 使用Service Workers

    • 策略:Service Workers允许你在用户的浏览器上缓存应用的资源,从而即使在离线时也可以访问这些资源。
    • 实施:通过注册Service Workers,并定义哪些资源和请求应该被缓存,你可以提供一个更快速和更一致的用户体验。
  3. 优化字体加载

    • 策略:Web字体可以显著影响页面加载时间。选择优化过的字体文件,避免加载多个字体家族和字体样式。
    • 实施:使用font-display: swap;在CSS中,以便在字体文件下载时显示默认字体。考虑使用字体子集化,只包含需要的字符。
  4. 扁平化CSS选择器

    • 策略:复杂的CSS选择器会增加浏览器的工作量,因为它必须评估页面上的每个元素是否与选择器匹配。
    • 实施:尽量使用类选择器而不是嵌套选择器,避免使用通用选择器和标签选择器,这些都会减慢CSS的解析速度。
  5. 延迟加载非关键内容

    • 策略:将不重要的资源(如页面底部的图片和广告)延迟加载,直到它们即将出现在视口中。
    • 实施:利用现代浏览器的loading="lazy"属性或使用JavaScript库,如IntersectionObserver,来实现图片和视频的懒加载。
  6. 预连接和DNS预取

    • 策略:通过告诉浏览器预先解析DNS和建立到关键域名的连接,可以减少用户请求资源时的延迟。
    • 实施:在HTML的<head>中使用<link rel="preconnect"><link rel="dns-prefetch">来指示浏览器预先连接到使用的CDN或其他域名。
  7. 避免昂贵的JavaScript和CSS

    • 策略:某些JavaScript函数和CSS属性(如box-shadowsgradientsfilters)在渲染时特别消耗资源。
    • 实施:对网站进行性能分析,识别和替换那些导致渲染延迟的昂贵属性和函数。使用Chrome DevTools的Performance标签页可以帮助识别它们。
  8. 使用Web Workers

    • 策略:对于复杂的或计算密集型任务,使用Web Workers可以让这些任务在主线程之外的后台线程中运行,避免阻塞用户界面。
    • 实施:将数据处理或复杂计算迁移到Web Workers。确保合理使用,因为过多的Worker也可能对性能有负面影响。

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

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

相关文章

vue项目入门——index.html和App.vue

vue项目中的index.html文件 在Vue项目中&#xff0c;index.html文件通常作为项目的入口文件&#xff0c;它包含了Vue应用程序的基础结构和配置。 该文件的主要作用是引入Vue框架和其他必要的库&#xff0c;以及定义Vue应用程序的启动配置。 import Vue from vue import App …

Android Studio学习8——点击事件

在xml代码中绑定 在java代码中绑定 弹出一个toast 随机&#xff0c;数组

H5 点击图片翻转效果

需求 ☑ h5 实现点击图片得到的是放大的镜像图片&#xff08;不是放大镜效果 而是实现图片镜像对折&#xff0c;左右翻转&#xff09; ☑ 鼠标点击后原图消失/隐藏&#xff0c;在原来的位置上取而代之的是翻转后的图&#xff08;除了翻转之外不要改变其他的性质&#xff0c;比…

成员变量与局部变量的区别

成员变量和局部变量是两种不同的变量类型,它们有以下几个主要区别: 定义位置不同 成员变量定义在类的内部,方法外部。局部变量定义在方法、构造器或者代码块中&#xff0c;是在⽅法中定义的变量或是⽅法的参数。 作用域不同 成员变量的作用域为整个类。局部变量的作用域仅限于定…

Langchain教程 | langchain+OpenAI+PostgreSQL(PGVector) 实现全链路教程,简单易懂入门

前提&#xff1a; 在阅读本文前&#xff0c;建议要有一定的langchain基础&#xff0c;以及langchain中document loader和text spliter有相关的认知&#xff0c;不然会比较难理解文本内容。 如果是没有任何基础的同学建议看下这个专栏&#xff1a;人工智能 | 大模型 | 实战与教程…

【CicadaPlayer】demuxer_service中DASH的简单理解

DASH协议 dash 是属于demuxer模块的 MPEG-DASH是一种自适应比特率流技术,可根据实时网络状况实现动态自适应下载。和HLS, HDS技术类似, 都是把视频分割成一小段一小段, 通过HTTP协议进行传输,客户端得到之后进行播放;不同的是MPEG-DASH支持MPEG-2 TS、MP4(最新的HLS也支持…

Linux 多线程

目录 初识线程 线程的概念 Linux下的线程 线程优缺点 线程控制 线程创建 线程终止 线程等待 线程分离 线程取消 其它 线程互斥 互斥的概念 互斥锁的使用 锁的本质 线程同步 线程同步的概念 条件变量的概念 条件变量的使用 信号量 信号量的概念 信号量接口…

使用 C++ 和 Eigen 库理解 IMU 数据处理与可视化

使用 C++ 和 Eigen 库理解 IMU 数据处理与可视化 在本文中,我们将探讨如何使用 C++ 和 Eigen 库处理和可视化惯性测量单元(IMU)数据。IMU 数据在各种应用中至关重要,包括机器人技术、导航系统和虚拟现实。我们将探讨如何读取 IMU 数据,处理数据以估计姿态,并使用 Pangoli…

[Pytorch][缘来如此]:PyTorch中的广播机制

PyTorch中的广播机制 文章目录 PyTorch中的广播机制1. 广播代码示例 2. 不适合广播机制的情况&#xff1a;in-place操作 1. 广播 “广播”这一术语用于描述如何在形状不一的数组上应用算术运算。 在满足特定限制的前提下&#xff0c;较小的数组“广播至”较大的数组&#xff0…

windows WSL python 连接MySQL

安装环境 WSL >wsl -l -vNAME STATE VERSION * Ubuntu-18.04 Running 1 WSL2 无法与windows通信 >wsl -l -vNAME STATE VERSION * Ubuntu-18.04 Running 2 解决方案1&#xff1a;设置防火墙&#x…

非机构化解析【包含PDF、word、PPT】

此项目是针对PDF、docx、doc、PPT四种非结构化数据进行解析&#xff0c;识别里面的文本和图片。 代码结构 ├── Dockerfile ├── requirements ├── resluts ├── test_data │ ├── 20151202033304658.pdf │ ├── 2020_World_Energy_Data.pdf │ ├── …

MySQL-对象

MySQL-对象 对象描述表(TABLE)表是存储数据的逻辑单元&#xff0c;以行和列的形式存在&#xff0c;列就是字段&#xff0c;行就是记录数据字典就是系统表&#xff0c;存放数据库相关信息的表。约束(CONSTRAINT)执行数据校验的规则&#xff0c;用于保证数据完整性的规则视图(VI…

【Web】纯萌新的BUUCTF刷题日记Day1

目录 [RoarCTF 2019]Easy Java [网鼎杯 2018]Fakebook [CISCN2019 华北赛区 Day2 Web1]Hack World [BJDCTF2020]The mystery of ip [网鼎杯 2020 朱雀组]phpweb [BSidesCF 2020]Had a bad day [BJDCTF2020]ZJCTF&#xff0c;不过如此 [BUUCTF 2018]Online Tool [GXYCTF…

虚拟主机VPS和共享服务器有什么区别?VPS和共享服务器怎么选择,VPS和云服务器区别

今天易极赞小编来跟大家科普一个新的知识“虚拟主机和云服务器有什么区别&#xff1f;”看完这篇文章后你应该就能知道虚拟主机和云服务器哪个更适合你了。 如果你不知道服务器的常见类型有哪些&#xff0c;查看下面这篇文章&#xff1a; 服务器7中常见的类型&#xff0c;服务…

【C语言】如何判断一个机器的大小端

如何判断一个机器的大小端 一&#xff1a;什么是机器的大小端二&#xff1a;为什么会有大小端三&#xff1a;设计一个小程序来判断当前机器的大小端方法一&#xff1a;指针类型强转方法二&#xff1a;联合体 一&#xff1a;什么是机器的大小端 机器的大小端是指在内存中存储多…

【移动安全】对webview漏洞的一些分析

这次分析的app如下&#xff1a; 打开发现该app发现需要登录界面&#xff1a; 拖进jadx看一下&#xff0c;先来看一下AndroidManifest.xml文件 发现有两个类是导出&#xff0c;再来分析这两个类 这个RegistrationWebView类利用webview.loadUrl进行加载网页 java public class…

JS——判断节假日(假日包括周末,不包括调休上班的周末)

思路&#xff1a;创建两个数组&#xff0c;数组1为节假日数组&#xff0c;数组2为是周末上班日期数组。如果当前日期&#xff08;或某日期&#xff09;同时满足2个条件&#xff08;1.在节假日数组内或在周末。2.不在周末上班日期数组&#xff09;即为节假日&#xff0c;否则即为…

嵌入式学习第三十一天!(双向链表)

双向链表&#xff1a;在单向链表的每个结点中&#xff0c;再设置一个指向其前驱结点的指针域&#xff08;即牺牲部分空间&#xff0c;添加了一个前驱结点的指针域&#xff09; 1. 双向链表的定义&#xff1a; #ifndef _DOULINK_H_ #define _DOULINK_H_typedef struct stu {in…

SystemC入门学习Demo用例的工程化配置

背景&#xff1a;对不同的用例文件&#xff0c;使用CMakeLists.txt进行工程化管理的演示&#xff0c;这样开发者可以更加关注在代码开发上。 1&#xff0c;首先安装好系统环境的systemC库&#xff1a;ubuntu系统安装systemc-2.3.4流程-CSDN博客 2&#xff0c;准备好一个demo用…

再续前缘——C++【入门】

目录 1. 引用 引用概念 使用场景 1. 做参数 2. 引用做返回值 3.传值、传引用效率比较 4. 引用和指针的不同点 2. 内联函数 3.auto关键字 推导应用场景 auto不能推导的场景 4.基于范围的for循环(C11) 5.指针空值nullptr(C11) 1. 引用 引用概念 引用不是新定义一个…