浏览器loooo...ng任务 浏览器长任务首先，在你的想象中，多长的任务呢算是长任务呢？1000毫秒? 还是 500毫秒，no no，都不是，超过50毫秒的就算长任务。在了解更多前，我们先看一下 RAIL 模型 的基本概念。RAIL 是一种以用户为中心的性能模型，它提供了一种考虑性能的结构。该模型将用户体验分解到按键操作（例如，点击、滚动、加载）中，帮助您为每个操作定义性能目标。RAIL 代表 Web 应用生命周期的四个...

• 831
• 2min

聊聊事件循环机制 本篇主要讨论的是JavaScipt的事件循环机制（event loop），主要分为以下几个部分：为什么需要事件循环机制事件循环机制的表现有哪些使用场景nodejs的事件循环（待补充）为什么需要事件循环机制众所周知，在浏览器中，JavaScript 是单线程的（原因在此处不做过多赘述），也就是说所有的事件都在一个线程中执行，这个线程负责处理：用户交互事件DOM元素更新、绘制执行js代码…我们知...

• 1.3k
• 4min

网页性能指标 几个关键词：FCP、LCP、TTI、FID、TBT什么是FCP首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，”内容”指的是文本、图像（包括背景图像）、svg元素或非白色的canvas元素。（白屏时长）FCP时长的定义要在 JavaScript 中测量 FCP，您可以使用绘制计时 API。以下示例说明了如何创建一个Performance...

• 976
• 3min

浏览器缓存 浏览器缓存主要分为强缓存、协商缓存、启发式缓存，下面进行详细说明。当我们首次向服务端发起请求时，由于本地没有缓存结果及标识，所以直接向服务端发起请求，服务器会在响应报文的HTTP头中增加缓存标识，客户端即浏览器会根据缓存标识来决定是否缓存结果，需要缓存则将请求结果和缓存标识存入浏览器缓存。在每次在发起请求时，都会在浏览器缓存中先检查是否有请求结果以及缓存标识根据有无请求结果及缓存标识，做以下...

• 1.5k
• 5min