02-02页面性能指标和优化目标-笔记

最新推荐文章于 2025-01-07 20:05:19 发布
原创 最新推荐文章于 2025-01-07 20:05:19 发布 · 226 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html5

本文探讨了网页性能的关键指标，包括网络设置、资源加载、瀑布流分析、页面流畅度监控以及异步请求响应速度。重点讲述了Lighthouse工具在买家秀和卖家秀中的应用，强调了菜单交互、搜索框设计和页面流畅度对于提升用户体验的重要性。同时，建议在页面加载慢时使用loading动画以改善用户体验。

性能指标

1. 网络指标

1.1 打开网络设置

页面网络性能查看

1.2 重新载入

重新载入

1.3 资源总览

在这里插入图片描述

1.4瀑布流

在这里插入图片描述

1.4.1 横向查看（单个资源明细）

在这里插入图片描述

1.4.2 竖向查看(资源加载方式)

在这里插入图片描述
在这里插入图片描述

1.5 保存当前执行计划

在这里插入图片描述

2. Lighthouse

2.1 买家秀

在这里插入图片描述

2.2 卖家秀

在这里插入图片描述

交互体验

1. 菜单交互

在这里插入图片描述

2. 搜索框

在这里插入图片描述

3. 页面流畅度

页面翻页时内容（常见图片、视频等多媒体资源）的显示速度。
可以很流畅的展示不被用户嫌弃为目标(可以想象为看电影不卡顿)。

3.1 页面监控（FPS）

在这里插入图片描述
FPS

4. 异步请求响应要快

点击商品时，跳转到商品详情；页面加载要快，若不能及时加载，请使用loading动画提高用户体验度。

PC性能优化全攻略_2024-07-20_00-12-34.Tex
01-10 962
CPU瓶颈通常发生在CPU无法处理当前工作负载时，导致系统响应变慢或任务执行延迟。这可能是因为CPU的计算能力不足，或者多任务处理时资源分配不均。识别CPU瓶颈的关键在于监控CPU的使用率和任务队列长度。
React.js前端开发中的性能优化指标解读
最新发布
小白菜的博客
07-07 974
本文旨在为React开发者提供一套完整的性能优化指标体系，帮助开发者理解、测量和改善React应用的性能表现。我们将覆盖从基础到高级的性能优化技术。核心概念与联系：介绍React性能优化的基本概念核心算法原理：深入React渲染机制性能指标详解：关键指标解析与测量方法项目实战：实际优化案例工具和资源推荐未来发展趋势虚拟DOM：React用来表示UI的轻量级JavaScript对象协调(Reconciliation)：React比较新旧虚拟DOM并决定如何更新真实DOM的过程。
浏览器优化中的2-5-8原则
web陈的技术博客
10-31 4198
在实际web开发中，2-5-8原则作为一种指导思路，针对于浏览器的性能优化。
MDM页面UI升级介绍
数通畅联
05-06 935
MDM基础数据平台作为公司核心产品，为了满足更多业务需求一直在迭代更新，本次升级针对整体页面进行优化并对部分功能进行修复、调整。
android页面流畅度（fps）指标分析
六如公子-android天空
12-14 1万+
fps: frame percent seconds; 每秒视图更新的帧数； 也就是UI的流畅度指标； 1 使用shell 命令可以保存fps数据到本地文件，但是文件内容太简单，没多考参考意义； shell命令格式如下：adb shell dumpsys gfxinfo "com.hlkt123.uplus" > d:\app_fps_log\ysms_fps.txt        备注：c
前端页面性能指标基本介绍
qq_34703156的博客
06-28 2812
1. 基本指标介绍 首先前端性能指标一般分为以下几种： 首屏绘制（First Paint，FP） 首屏内容绘制（First Contentful Paint，FCP） 可交互时间（Time to Interactive，TTI） 最大内容绘制（Largest Contentful Paint，LCP) 首次有效绘制（First Meaning Paint, FMP） FP 是时间线上的第一个“时间点”，是指浏览器从响应用户输入网址地址，到浏览器开始显示内容
前端工程师都需要优化哪些页面的性能指标呢？
xiaoxijing的博客
06-23 1032
前端页面与用户直接面对面沟通，为了提升用户对前端页面的使用体验，前端工程师往往要对页面的性能进行优化。那一般前端工程师都需要优化哪些页面的性能指标呢？本文，我整理三个主要的前端页面性能指标。 一、Apdex指数 作为与用户直接沟通的入口，我们在考虑前端页面性能指标的时候首先要考虑用户体验。而Apdex是对用户体验满意度的量化值。 在完成一个任务之前，用户需要等待它完成才能进行下一个任务，而这个等待时间的长短直接用户的满意程度，我们成这个时间长短为应用的“响应性”再次Apdex定义了三个满意度区间： 满意:
【《高性能 MySQL》笔记】性能优化
影三人
03-10 1307
MySQL 性能优化
Java 大视界 -- Java 大数据性能监控与调优：全链路性能分析与优化（十五）
【青云交】华为云云享专家 | 阿里云开发者社区专家博主 技术圈个人影响力前 17 | 博客之星 TOP23 优快云 首位四榜（原力榜 / 作者周榜 / 领军人物 / 综合热榜）榜首，破平台纪录！ 苏州地区全榜霸榜，感恩全网十多万粉丝同行！
01-07 3240
本文开篇以星际探险回顾引入，详述性能问题危害、全链路剖析，展示 Java 监控工具、自定义指标，详解代码与资源调优策略，展望未来，结合震撼案例、实用代码助力从业者掌握前沿技术。
《性能之巅第2版》阅读笔记(三)--CPU监测
大吉
06-24 3215
System Performance, CPU performance tools
当谈及 Web 性能优化时，我们该关注哪些性能指标
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
09-16 657
点击上方三分钟学前端，关注公众号回复交流，加入前端编程面试算法每日一题群面试官也在看的前端面试资料前端页面性能是影响用户体验的关键因素，用户打开网站时间太久、白屏时间过长、操作卡顿等，都...
Chrome开发者工具中的performance检测页面性能
热门推荐
kongduxue的专栏
08-24 3万+
主要有4方面：（对照下图） 1.控制按钮。 2.overview。页面性能的高级汇总（FPS:帧率，CPU:CPU占用，NET:网络请求） 3.火焰图。CPU堆叠追踪的可视化（左侧名称是主线程的各种事件，Network:网络请求详细情况） 4.数据统计。以图表的形式汇总数据（summary:统计报表，Bottom-Up:事件时长顺序，Call Tree:事件调用顺序，Event log:事件发生的......
页面操作的流畅度
文摘资讯
11-14 991
页面操作的流畅度：在 PC 的 CPU 越来越牛逼、内存越来越大的时候，前端的代码复杂度也在上升。以往我们都默认认为只要资源加载好了、只要资源加载快了那么我们的页面性能就是棒棒哒的，现在...
【面试】996- 面试必问：前端页面性能指标基本介绍
pingan8787
06-22 582
导语 |面试的时候问页面性能有哪些指标，却经常得到合并文件、压缩资源等优化手段的答案，是时候整体盘一下“性能指标”了。1. 基本指标介绍首先前端性能指标一般分为以下几种：首屏绘制（Fir...
关于web页面性能测量指标与建议
a64910807的博客
04-08 3507
首先看一个图： 注：右图在我们工作中经常用到 我们专注的web性能指标有那些？ 1、页面加载时间 从页面开始加载到页面onload事件触发的时间。一般来说onload触发代表着直接通过HTML引用的CSS，JS，图片资源已经完全加载完毕。 2、全部页面加载时间 全部页面载入时间指从最初启动浏览开始，直到所有元素都被加载完成后，在2秒后仍然没有网络活动的时间。 ...
递归格式化省市区三级联动数据
trust_future99的博客
11-18 2677
原数据格式：china-area-data组件下的data.json数据。 目标数据格式：依照elementUI的Cascader 级联选择器所需要的options格式。 //citysFormat.js const fs = require("fs"); var destArr = []; //目标对象 var orginArr = {}; //初始对象 fs.readFile("./...
浏览器获取当前经纬度
trust_future99的博客
01-09 1559
navigator.geolocation.getCurrentPosition(function geoSuccess(event) { console.log(event.coords.latitude + ', ' + event.coords.longitude); },function geoError(event) { console.log("Error code " + event.code + ". " + event.message); });
03渲染优化-03防止布局抖动的利器-fastDOM
trust_future99的博客
02-26 1474
fastDOM fastDOM gitee地址 fastdom.read(function() { console.log('read'); }); fastdom.write(function() { console.log('write'); }); fastdom.read(function() { console.log('read'); }); fastdom.write(function() { console.log('write'); }); Outputs: rea
js slice()方法
trust_future99的博客
01-06 832
slice()方法用于提取目标数组的一部分，返回一个新数组，原数组不变。 // 语法 // start:起始位置,从0开始 // end:结束位置(不包括该位置本身的元素)，此参数省略，会一直到原数组结束 arr.slice(start, end); //DEMO var arr1 = ['1','2','3']; var arr2 = arr1.slice(); // 提取整个数组到一个新数组 console.log(arr1,arr2); arr2.push('88'); //修改arr2 c.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值