推荐的 Web 性能计时:多长时间才算太长?

对于加载页面时的缓慢速度没有明确的规定,但有具体的指导原则来指示内容将加载(1 秒)、空闲(50 毫秒)、动画(16.7 毫秒)和响应用户输入(50 到 50 毫秒)。 200 毫秒)。

负载目标

“不到一秒”通常被吹捧为最佳负载,但这是什么意思?秒应被视为向用户指示已发出新内容的请求并将加载的最大时间量的规则,例如浏览器显示页面标题和显示页面的背景颜色。

从请求中检索到的第一个资产通常是 HTML 文档,然后该文档会调用其他资产。正如关键渲染路径的描述中所述,收到后,浏览器立即开始处理 HTML,在接收到内容时渲染内容,而不是等待其他资源加载。

是的,一秒加载是一个目标,但很少有网站能够实现这一目标。期望不同。公司网络上的“hello world”预计会在几毫秒内加载完毕,但用户在西伯利亚北部的边缘网络上使用五年前的设备下载猫视频时,可能会发现 20 秒的下载速度很快。如果您等待三到四秒而不通知用户正在发生负载并显示一些进度,则典型的站点将失去潜在的访问者,并且这些访问者如果回来,将需要很长时间才能回来。

在优化性能时,请务必设定雄心勃勃的首次加载目标,例如通过移动 3G 网络 5 秒,在办公室 T1 线路上 1.5 秒,并为后续页面加载设定更雄心勃勃的页面加载目标,利用服务工作人员和缓存。初始加载页面与加载其他资源、响应用户交互以及确保流畅的动画有不同的建议时间:

空转目标

浏览器是单线程的(尽管 Web Worker 支持后台线程)。这意味着用户交互、绘画和脚本执行都在同一个线程上。如果线程正忙于执行复杂的 JavaScript,主线程将无法对用户输入做出反应,例如按下按钮。因此,脚本执行的范围应该受到限制,分成可以在 50 毫秒或更短的时间内执行的代码块。这使得该线程可用于用户交互。

动画目标

为了使滚动和其他动画看起来流畅并感觉响应灵敏,内容重绘应以每秒 60 帧 (60fps) 的速度进行,即每 16.7 毫秒一次。16.7 毫秒包括脚本编写、回流和重绘。意识到一个文档大约需要 6 毫秒来渲染一帧,剩下大约 10 毫秒用于其余部分。任何低于 60fps 的内容,尤其是不均匀或变化的帧速率,都会显得卡顿。

响应能力目标

当用户与内容交互时,重要的是提供反馈并确认用户的响应或交互,并且在 100 毫秒内(最好是在 50 毫秒内)完成。50ms 秒感觉很即时。用户交互的确认通常应该是即时的,例如悬停或按下按钮,但这并不意味着完成的响应应该是瞬时的。虽然慢于 100 毫秒的反应可能会在用户交互和响应之间造成脱节,但响应的 100 到 200 毫秒过渡可以帮助用户注意到他们的交互启动的响应,例如菜单打开。如果响应时间超过 100 毫秒才能完成,请提供某种形式的反馈以通知用户交互已发生。认用户的响应或交互,并且在 100 毫秒内(最好是在 50 毫秒内)完成。50ms 秒感觉很即时。用户交互的确认通常应该是即时的,例如悬停或按下按钮,但这并不意味着完成的响应应该是瞬时的。虽然慢于 100 毫秒的反应可能会在用户交互和响应之间造成脱节,但响应的 100 到 200 毫秒过渡可以帮助用户注意到他们的交互启动的响应,例如菜单打开。如果响应时间超过 100 毫秒才能完成,请提供某种形式的反馈以通知用户交互已发生。

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

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

相关文章

SVN下载安装(服务器与客户端)

1.下载 服务器下载:Download | VisualSVN Server 客户端下载:自行查找 2. 服务器安装 双击执行 运行 下一步 同意下一步 下一步 选中安装目录 3. 客户端安装 双击执行 下一步 4. 服务器创建仓库 5. 服务器创建用户 6. 客户端获取资源 文件夹右键

用idea跑起十多年前的项目

一、eclipse的项目 先删掉一些eclipse的配置文件 二、在idea中导入项目 1、导入成功后,先【锤一下】 2、然后发现编译不通过,非常多的报错信息,逐一解决报错 (1)tomcat7配置报错 (2)先删除tom…

java springboot将接口查询数据放在系统中 一小时系统更新一次 避免用户访问接口查询数据库缓慢

真到了公司 很多数据库表 特别是常用的功能业务对应的 都是几百万条起步的数据 查询会比较缓慢 那么 我们就可以不用每次都真的查询数据库 例如 我这里有一个接口 通过 封装的 IBookService.list 函数去查询数据库 接口返回是这样的 我们先在启动类 条件装配上 这个接口所在的…

vivado CDC约束-“设置总线倾斜”对话框

“设置总线倾斜”对话框 在AMD Vivado™ IDE中,可以通过多种方式设置总线偏斜约束: •通过时间约束编辑器。选择窗口 → 时间限制 → 断言 → 设置总线倾斜。从“时序约束编辑器”中,可以添加、删除或修改总线扭曲约束。 注意&#…

【C++】循环结构中的变量的生命周期

在C中&#xff0c;循环结构中变量的生命周期取决于变量的作用域和声明位置。 for(int i 0; i < 5; i) //i为循环变量&#xff0c;在循环结构刚开始时被创建&#xff0c;在整个循环结构结束时被销毁 {int x i; // x为循环体中的变量&#xff0c;在每次开始循环体时会被创…

day11--java高级编程:反射

4 Day18–反射 本章专题与脉络 1. 反射(Reflection)的概念 1.1 反射的出现背景 Java程序中&#xff0c;所有的对象都有两种类型&#xff1a;编译时类型和运行时类型&#xff0c;而很多时候对象的编译时类型和运行时类型不一致&#xff08;多态&#xff09;。 Object obj n…

【AIGC科技展望】预测AIGC2025年的机会与挑战

2025年&#xff0c;AIGC的机会与挑战 在未来的五年里&#xff0c;AIGC&#xff08;AI Generated Content&#xff09;将会成为一个越来越重要的领域。但是&#xff0c;伴随着机会而来的是挑战。在这篇文章中&#xff0c;我们将一起探讨AIGC的机会与挑战&#xff0c;并预测2025…

uniapp获取用户头像

在uniapp中&#xff0c;你可以使用uni.getUserInfo方法来获取用户的头像信息&#xff0c;具体步骤如下&#xff1a; 在需要获取用户头像的页面中&#xff0c;引入uni-app的API&#xff1a;import uni from dcloudio/uni-app; 在需要的地方调用uni.getUserInfo方法来获取用户的…

机器学习系列13:通过随机森林获取特征重要性

我们已经知道通过 L1 正则化和 SBS 算法可以用来做特征选择。 我们还可以通过随机森林从数据集中选择相关的特征。随机森林里面包含了多棵决策树&#xff0c;我们可以通过计算特征在每棵决策树决策过程中所产生的的信息增益平均值来衡量该特征的重要性。 你可能需要参考&…

使用官网Spring Initializr创建一个满足您需求的Spring Boot项目,包括建议目录配置

为了创建一个满足您需求的Spring Boot项目&#xff0c;我们将在https://start.spring.io/Spring Initializr中选择合适的依赖。以下是基于您的描述所推荐的依赖项&#xff1a; Spring Web&#xff1a;用于开发RESTful API。Spring Data JPA&#xff08;但排除Spring Boot默认数…

Mybatis-Plus使用小记

MP 使用小记 所谓 MP 是指&#xff1a;Mybatis-Plus 前言 本篇文章是对 MP 一些日常开发学习中不常见但实用的使用小技巧总结&#xff0c;内容将持续更新&#xff0c;希望能对小伙伴们有所帮助。推荐点赞 收藏哦&#xff01; 官方文档&#xff1a;Mybatis-Plus 给现有分页指…

Activemq性能优化

生产者流量限制 ActiveMQ支持为每个生产者单独设置流量控制。流量控制的含义&#xff1a;当生产者产生消息过快&#xff0c;超过流量限制的时候&#xff0c;生产者将会被阻塞直到资源可以继续使用&#xff0c;或者抛出一个JMSException。 同步发送消息&#xff08;useAsynSen…

力扣:509. 斐波那契数(动态规划,附带递归版本) 详细讲解动态规划的思路

题目&#xff1a; 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n - 1) F(n - 2)&#xff0c;其中…

速盾cdn:cdn加速原理是什么

CDN&#xff08;内容分发网络&#xff09;通过在全球各地部署服务器节点来加速内容传输&#xff0c;提高用户访问网站时的响应速度和性能。速盾CDN作为一种CDN服务提供商&#xff0c;其加速原理主要涉及以下几个关键步骤&#xff1a; 内容缓存&#xff1a; 当用户访问一个网站时…

【Spring实战】12 Thymeleaf

文章目录 1. 定义2. 设计目标3. 官网4. Spring 集成 Thymeleaf1&#xff09;添加依赖2&#xff09;创建模版3&#xff09;创建Controller4&#xff09;启动程序5&#xff09;执行验证 5. 代码详细总结 1. 定义 Thymeleaf 是一个用于在 Web 应用程序中进行服务器端 Java 模板渲…

Git:远程仓库的使用

查看当前的远程库 要查看当前配置有哪些远程仓库&#xff0c;可以用git remote 命令&#xff0c;它会列出每个远程库的简短名字。在克隆完某个项目后&#xff0c;至少可以看到一个名为origin 的远程库&#xff0c;Git 默认使用这个名字来标识你所克隆的原始仓库&#xff1a; 也…

UE4运用C++和框架开发坦克大战教程笔记(十三)(第40~42集)

UE4运用C和框架开发坦克大战教程笔记&#xff08;十三&#xff09;&#xff08;第40~42集&#xff09; 40. 多按键绑定41. 自动生成对象42. 资源模块数据结构测试自动生成对象按资源类型生成对象 40. 多按键绑定 上节课实现了按键绑定系统的 4 种基础绑定&#xff0c;这节课来…

自动化部署与容器化:构建现代化DevOps工作流

流畅DevOps之路&#xff1a;探秘自动化部署和容器化的前沿技术 前言 随着软件开发的复杂性不断增加&#xff0c;传统的手动部署和管理方式已无法满足迅速变化的需求。本文将探讨现代DevOps实践中的关键技术&#xff0c;从容器化到自动化部署&#xff0c;以及涉及到的关键工具…

python+django高校教材共享管理系统PyCharm 项目

本中原工学院教材共享平台采用的数据库是mysql&#xff0c;使用nodejs技术开发。在设计过程中&#xff0c;充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。系统所要实现的功能分析&#xff0c;对于现在网络方便的管理&…

Java:IO流——字节流和字符流

目录 IO流的基本概念 IO流体系结构 FileOutputStream字节输出流 构造方法 成员方法 细节 关流 FileInputStream字节输入流 构造方法及成员方法 read不带参数代码示例 read带参数代码示例​编辑 将字节数组或字符数组转成字符串 FileReader 字符输入流 构造方法和…