标签： timing

发布于

如何利用 ‘User Timing API’ 在 Chrome Performance 面板里绘制自定义的业务性能刻度？

技术讲座：利用 User Timing API 在 Chrome Performance 面板绘制自定义业务性能刻度 引言 在现代Web开发中，性能监控和优化是至关重要的。Chrome浏览器的Performance面板提供了强大的性能分析工具，可以帮助开发者深入了解页面加载和运行过程中的性能瓶颈。然而，默认的性能指标可能无法满足某些复杂业务场景的需求。这时，我们可以利用User Timing API来定义和测量自定义的性能事件，并将其可视化在Chrome的Performance面板中。本文将深入探讨User Timing API的使用方法，并通过一系列工程级代码示例展示如何绘制自定义的业务性能刻度。 User Timing API 简介 User Timing API是Web标准的一部分，它允许开发者定义和测量自定义的性能事件。通过User Timing API，我们可以记录任意时间点的性能数据，并将其与Performance面板中的其他性能指标一起分析。 User Timing API提供了以下方法： window.performance.mark(name, [start, end …

继续阅读“如何利用 ‘User Timing API’ 在 Chrome Performance 面板里绘制自定义的业务性能刻度？”

发布于

Resource Timing API：精确测量 DNS、TCP、TTFB 与资源下载耗时

Resource Timing API：精确测量 DNS、TCP、TTFB 与资源下载耗时（讲座版） 各位开发者朋友，大家好！今天我们来深入探讨一个在前端性能优化中非常关键但又常被忽视的工具——Resource Timing API。如果你曾经试图准确分析页面加载过程中某个静态资源（比如图片、CSS、JS 文件）的各个阶段耗时，你会发现浏览器开发者工具虽然能提供一些信息，但不够细粒度、也不够稳定。而 Resource Timing API 正是为了解决这个问题应运而生的。 一、为什么我们需要更精确的性能数据？ 在现代 Web 应用中，用户体验直接与加载速度挂钩。Google 的研究表明，用户对页面响应时间超过 3 秒的容忍度极低，会显著增加跳出率。因此，我们必须精准定位性能瓶颈。 常见的性能指标包括： 指标 含义 测量难点 DNS 查询时间 域名解析成 IP 所需时间 不同网络环境差异大，难以统计 TCP 连接时间 建立 TCP 握手所需时间 受服务器配置和网络延迟影响 TTFB（Time to First Byte） 从发起请求到收到第一个字节的时间 包含服务端处理逻辑，容易混淆 资 …

继续阅读“Resource Timing API：精确测量 DNS、TCP、TTFB 与资源下载耗时”

发布于

JavaScript 计时攻击（Timing Attack）：利用比较操作的时间差窃取敏感数据

JavaScript 计时攻击（Timing Attack）：利用比较操作的时间差窃取敏感数据 各位开发者、安全工程师和对密码学感兴趣的朋友们，大家好！ 今天我们要深入探讨一个非常隐蔽但极具危害性的安全漏洞——JavaScript 计时攻击（Timing Attack）。这种攻击方式不依赖于传统的漏洞利用手段（如 SQL 注入或 XSS），而是通过观察程序执行时间的微小差异来推断出敏感信息，比如密码、API 密钥、JWT Token 等。 在现代 Web 应用中，我们经常使用字符串比较函数（如 === 或自定义的 secureCompare）来验证用户输入是否正确。然而，如果这些比较函数没有被设计成“恒定时间”（constant-time），就可能成为计时攻击的目标。 本文将从原理出发，逐步讲解： 什么是计时攻击？ 为什么 JavaScript 中的字符串比较容易受攻击？ 如何构造一个可复现的计时攻击实验？ 如何防御此类攻击？ 实际案例与最佳实践建议。 一、什么是计时攻击？ 计时攻击是一种侧信道攻击（Side-channel Attack），它不是直接破解加密算法本身，而是通过测量系统 …

继续阅读“JavaScript 计时攻击（Timing Attack）：利用比较操作的时间差窃取敏感数据”

发布于

JavaScript 计时攻击（Timing Attack）：利用比较操作的时间差窃取敏感数据

各位同仁，下午好。今天我们来探讨一个在前端领域日益受到关注，且具有深远安全隐患的话题：JavaScript 计时攻击（Timing Attack）。具体来说，我们将深入研究如何利用 JavaScript 中比较操作的时间差异，来窃取敏感数据。 在数字世界中，时间常常被我们视为一个简单的度量衡。然而，在安全领域，即便是微秒级的细微时间差，也可能成为攻击者窥探系统内部秘密的“侧信道”。JavaScript，作为现代Web应用的核心语言，其在浏览器中的执行特性，为这种攻击提供了独特的温床。 1. 计时攻击的本质：时间泄露的秘密 计时攻击是一种侧信道攻击（Side-Channel Attack）的形式。侧信道攻击并非直接突破加密算法或系统漏洞，而是通过观察系统在处理敏感信息时产生的物理特征（如时间、功耗、电磁辐射等）来推断出内部秘密。 在计时攻击中，我们关注的物理特征就是时间。当一个系统处理数据时，如果其执行时间与输入数据或内部秘密数据存在某种关联，那么攻击者就可以通过精确测量这些操作的时间，来推断出敏感信息。 想象一下，你正在尝试解锁一个密码箱。如果你每输入一个数字，密码箱的机械装置都会根据 …

继续阅读“JavaScript 计时攻击（Timing Attack）：利用比较操作的时间差窃取敏感数据”

发布于

JavaScript内核与高级编程之：`Performance API`：`User Timing`和`Resource Timing`在性能监控中的应用。

各位靓仔靓女们，大家好！今天咱们来聊聊前端性能监控里的两把利剑：Performance API 里面的 User Timing 和 Resource Timing，保证让你们听完之后，以后再遇到性能问题，心里有数，手上有活。 开场白：前端性能，你的KPI，你的命！ 先别急着打哈欠，我知道性能优化这事儿，听起来就让人头大。但你想想，你的网站打开慢，用户直接跑路，老板甩锅给你，这可不是闹着玩的。所以，性能优化不是你想做就做，不想做就不做的事情，它关系到你的KPI，甚至是你的职业生涯！ 好消息是，浏览器已经给我们准备好了工具，那就是 Performance API。今天咱们要讲的 User Timing 和 Resource Timing 只是冰山一角，但足够让你在性能监控这条路上迈出坚实的一步。 第一部分：User Timing API – 你的代码，你做主！ User Timing API，顾名思义，就是让你自己来定义时间节点的API。它就像一个秒表，你想什么时候开始计时，想什么时候结束计时，都由你说了算。这对于监控你自己写的代码的性能，简直不要太方便！ 1.1 为什么要用 …

继续阅读“JavaScript内核与高级编程之：`Performance API`：`User Timing`和`Resource Timing`在性能监控中的应用。”

发布于

Timing Attacks (时间攻击) 在 Web API (如密码哈希比较、验证码生成) 中的利用与防御。

大家好，今天咱们来聊聊一个听起来高深莫测，但实际上离咱们很近的安全问题：Timing Attacks，中文名叫时间攻击。别怕，这玩意儿没那么可怕，就像隔壁老王家的猫，看着凶，其实就是想讨根火腿肠。 咱们主要讲的是在Web API里，这只“猫”是怎么搞事情的，以及咱们怎么喂它，让它别捣乱。 主要围绕密码哈希比较和验证码生成这两个场景展开，因为这俩地方最容易被这只“猫”盯上。 开场白：时间攻击是个啥？ 简单说，时间攻击就是通过测量执行特定操作所需的时间，来推断出一些秘密信息。 这听起来有点像听诊器，医生通过听心跳来判断你的健康状况，攻击者通过听程序的“心跳”（运行时间）来判断你的秘密。 在Web API里，攻击者可能无法直接看到你的密码，但如果你的代码在比较密码哈希时，一旦发现有不同的字符就立即返回，那攻击者就可以通过不断尝试不同的密码，并观察服务器响应的时间，来慢慢猜出你的密码。 这就像玩“猜数字”游戏，你每次猜一个数字，对方告诉你“大了”或“小了”，最终你就能猜出正确的数字。 第一幕：密码哈希比较，timing attack的重灾区 密码哈希比较是Web API里最常见的操作之一。 用 …

继续阅读“Timing Attacks (时间攻击) 在 Web API (如密码哈希比较、验证码生成) 中的利用与防御。”

发布于

Timing Attacks (时间攻击) 如何在浏览器端泄露秘密信息 (如密码哈希比较时间)？如何设计防御措施？

各位听众，早上好/下午好/晚上好！（取决于您阅读的时间啦！） 今天咱们来聊聊一个听起来有点神秘，但其实非常实用的安全话题：浏览器端的Timing Attacks（时间攻击）。 这玩意儿就像是安全领域里的“窃听风云”，攻击者通过分析你的代码执行时间，就能慢慢摸清你隐藏的秘密。 别担心，咱们会用最通俗易懂的方式，把它扒个底朝天。 1. 什么是Timing Attack？（时间攻击的基础概念） 想象一下，你正在试图打开一个保险箱，密码是四个数字。 如果你每次输错一个数字，保险箱都会发出“嘟”的一声，而且声音持续的时间跟你猜对的数字个数有关：猜对的数字越多，“嘟”的声音持续时间越长。 那么，即使你不知道正确的密码，你也可以通过不断尝试，并记录每次“嘟”的声音持续时间，最终找到正确的密码。 这就是Timing Attack的基本原理： 通过测量操作执行的时间，来推断隐藏的信息。 在计算机安全领域，Timing Attack就是指攻击者通过分析代码执行时间的变化，来获取敏感信息，比如密码、密钥等等。 这种攻击通常利用程序在不同条件下执行时间上的差异。 2. Timing Attack在浏览器端的应 …

继续阅读“Timing Attacks (时间攻击) 如何在浏览器端泄露秘密信息 (如密码哈希比较时间)？如何设计防御措施？”

发布于

JS `Timing Attacks` (时间攻击) 在浏览器端的秘密信息泄露

各位听众，大家好！我是今天的讲座嘉宾，咱们今天来聊聊一个听起来有点神秘，但实际上挺常见的浏览器端安全问题：JS Timing Attacks（时间攻击）。这玩意儿就像个悄无声息的小偷，能从你的代码执行时间里偷走一些敏感信息。听起来是不是挺刺激的？ 咱们先来打个比方：你和你朋友玩猜数字游戏。你心里想一个数字，然后你朋友猜。你告诉他猜大了还是猜小了。如果每次猜错，你都要停顿一下，停顿时间根据猜错的大小决定。猜得离谱，停顿时间就长；猜得接近，停顿时间就短。你朋友就能根据你的停顿时间，逐渐缩小范围，最后猜出你的数字。 Timing Attack 的原理跟这个差不多。攻击者通过测量代码执行的时间，来推断你代码的内部状态，从而窃取信息。 一、Timing Attack 的基本原理 简单来说，Timing Attack 就是利用代码执行时间上的差异，来推断秘密信息。 这种差异可能非常小，只有几毫秒甚至更短，但攻击者可以多次测量，然后通过统计分析来提取信息。 二、JS Timing Attack 的常见场景 在浏览器端，Timing Attack 主要发生在以下几个场景： 密码验证： 这是最经典的场景 …

继续阅读“JS `Timing Attacks` (时间攻击) 在浏览器端的秘密信息泄露”

发布于

JS `PerformanceEntry` `resource timing` 与 `navigation timing` 细节分析

大家好！我是你们今天的性能优化导师，咱们今天来聊聊JavaScript中那些藏得很深的性能秘密——PerformanceEntry、resource timing 和 navigation timing。别怕，听名字高大上，其实理解起来就像解一道有趣的数学题。 欢迎来到性能优化的“时间旅行” 在网页性能优化中，时间就是金钱，更准确地说，是用户体验。PerformanceEntry API 就像一个时间旅行的记录仪，记录着网页加载和资源获取过程中发生的各种事件。而 resource timing 和 navigation timing 则是这个记录仪上的两份重要报告，详细记录了资源加载和页面导航过程中的时间数据。 PerformanceEntry：一切性能数据的基石 PerformanceEntry 是一个接口，代表一个单独的性能度量事件。它是一个抽象类，实际使用中，我们主要接触的是它的子类，比如 PerformanceResourceTiming 和 PerformanceNavigationTiming。 PerformanceEntry 都有哪些属性？ 属性名 类型 描述 name …

继续阅读“JS `PerformanceEntry` `resource timing` 与 `navigation timing` 细节分析”

发布于

HTML5 `Resource Timing API`：分析页面资源加载时间

拨开迷雾，让页面加载时间无处遁形：HTML5 Resource Timing API 漫谈 各位看官，咱们今天聊点儿啥呢？不如就来聊聊网页加载速度这件让人“又爱又恨”的事儿。爱的是，谁不希望自己打开网页“嗖”的一下就出来呢？恨的是，现实往往是“转啊转啊七彩霓虹灯”，让人恨不得摔手机。 身为前端攻城狮，优化页面加载速度那是家常便饭。但就像医生看病，光凭经验和感觉是不够的，得有“体检报告”才行。而HTML5 Resource Timing API，就是我们前端的“体检报告”，能把页面资源加载的每一个环节都给你扒个精光。 一、啥是Resource Timing API？别吓唬人，说人话！ 简单来说，Resource Timing API 是一套Web API，它允许我们精准地测量浏览器加载页面资源（比如图片、CSS、JS文件等）的时间。它就像一个超级精准的计时器，记录着每个资源从开始请求到完成加载的每一个时间点。有了这些数据，我们就能清晰地知道，哪个资源加载慢了，哪个环节出了问题，从而对症下药，提升页面性能。 别看名字听起来高大上，其实用起来也没那么复杂。想象一下，你准备做一顿丰盛的晚餐，R …

继续阅读“HTML5 `Resource Timing API`：分析页面资源加载时间”