Web 应用中的 RAIL 模型 和 Chrome 开发者工具 Performances 面板对其的度量方法

简介: Web 应用中的 RAIL 模型 和 Chrome 开发者工具 Performances 面板对其的度量方法
+关注继续查看

运行时性能是指页面在运行时的表现,而不是加载时的表现。

本文探讨如何使用 Chrome DevTools 性能面板分析运行时性能。 就 RAIL 模型而言,这个工具对于分析页面的 Response、Animation 和 Idle 阶段非常有用。


什么是 Web 应用中的 RAIL 模型?


RAIL  是一种用于衡量 Web 应用程序性能的模型,它的名字代表了其四个核心组成部分:响应(Response)、动画(Animation)、空闲(Idle)和负载(Load)。RAIL 模型帮助开发人员将应用程序的性能拆分成这四个部分,并提供了一些指导方针来改进每个部分的性能,从而提高整体应用程序的响应速度和用户体验。


具体来说,RAIL 模型包括以下四个部分:


  • 响应(Response):指应用程序对用户输入的快速响应能力,包括在100毫秒之内响应用户的操作、按需加载资源等。


  • 动画(Animation):指应用程序提供流畅的动画效果,包括使动画在 60 帧/秒的帧率下运行、使用 requestAnimationFrame() API 等。


  • 空闲(Idle):指应用程序在不占用主线程的情况下执行后台任务,包括使用 requestIdleCallback() API、合理地利用 Service Workers 等。


  • 负载(Load):指应用程序在加载和处理资源方面的性能表现,包括使用 HTTP/2 协议、使用现代浏览器缓存等。


RAIL 模型旨在帮助开发人员将应用程序性能拆分成不同的部分,并提供一些指导方针来改进每个部分的性能,从而提高整体应用程序的响应速度和用户体验。


在使用 Chrome 开发者工具 performance 面板时,请确保在Incognito Mode 下开启应用。


隐身模式确保 Chrome 在干净的状态下运行。 例如,如果您安装了很多扩展,这些扩展可能会在您的性能测量中产生噪音。


移动设备的 CPU 能力远低于台式机和笔记本电脑。 每当开发人员分析一个页面时,可以使用 CPU 节流(throttle)来模拟页面在移动设备上的表现。

644ed8d3e2c6407a98751c7af5704738_d865b2c9c1e3889764943491687f7dd4.png


相关文章
|
15天前
|
Web App开发 Linux UED
Web 网站 LCP 性能指标的度量方法
Web 网站 LCP 性能指标的度量方法
16 1
|
26天前
|
小程序 程序员 开发工具
微信web开发者工具无法打开的六种解决方法
微信web开发者工具无法打开的六种解决方法
37 0
|
2月前
|
Web App开发 编解码 前端开发
2023年WEB内嵌VLC直接播放RTSP视频流,无需服务器转码,支持硬件解码及高版本Chrome
2015年之前还可以用VLC原生播放器在Chrome、Firefox等浏览器中直接播放,延迟比较低,效果也还不错。可惜好景不长,从 2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,海康威视官方提供的 web3.0开发包也只能在低版本浏览器播放。
123 0
|
8月前
|
Web App开发 缓存 API
Web 应用中的 RAIL 模型 和 Chrome 开发者工具 Performances 面板对其的度量方法
Web 应用中的 RAIL 模型 和 Chrome 开发者工具 Performances 面板对其的度量方法
|
8月前
|
机器学习/深度学习 Web App开发 缓存
【微信小程序】微信Web开发者工具的部分界面功能
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容
170 0
|
8月前
|
小程序 IDE 开发工具
【微信小程序】微信Web开发者工具下载及安装
小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无须安装卸载。
115 0
|
Web App开发 前端开发 JavaScript
使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
184 0
使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
|
Web App开发 BI 开发者
使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
122 0
使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
|
Web App开发 开发者
如何使用Chrome开发者工具调试web socket应用
如何使用Chrome开发者工具调试web socket应用
534 0
如何使用Chrome开发者工具调试web socket应用
|
Web App开发 前端开发 JavaScript
使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
渲染阻止资源(render-blocking resources)是浏览器必须下载、解析和执行才能显示页面的外部 JavaScript 或 CSS 文件。 目标是仅运行正确显示页面所需的核心 CSS 和 JavaScript 代码。
90 0
使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
相关产品
云迁移中心
推荐文章
更多