Contentful Paint 最大内容绘制 LCP用于衡量标准报告视口内可见的最大图像或文本块的渲染时间，为了提供良好的用户体验，网站应努力在开始加载页面的前2.5 秒内进行“最大内容绘制”。...下图中米色方块代表主线程处于忙碌阶段，如果此时用户进行输入，则它必须等待任务完成时才能响应输入，等待的时间也就是此页面上该用户的 FID 值。...在上图中，有一个元素在一帧中占据了视口的一半。然后，在下一帧中，元素下移视口高度的 25％。...红色的虚线矩形表示两个帧中元素的可见区域的并集，在这种情况下，其为总视口的 75％，因此其影响分数为 0.75。 距离分数 布局偏移分数方程的另一部分测量不稳定元素相对于视口移动的距离。...距离分数是任何不稳定元素在框架中（水平或垂直）移动的最大距离除以视口的最大尺寸（宽度或高度，以较大者为准）。
然而不要着急，这些指标就是为了聚焦关注度和降低理解成本的，下面我们就来具体看一下，新增加的 Core Web Vitals 到底是什么东西？ 如何衡量用户体验质量？ ?...例如：当“渲染面积”小于“真实面积”时，“绘制面积”为“渲染面积”，反之亦然。...在第一个示例中，新内容被添加到 DOM 中，并且更改了最大的元素。在第二个示例中，布局发生更改，以前最大的内容从视口中删除。通常情况下，延迟加载的内容要大于页面上已存在的内容。...问题是，什么能给人留下好印象，你如何衡量你可能给用户留下什么样的印象? 在网络上，第一印象可以有很多种不同的形式——我们对网站的设计和视觉吸引力有第一印象，对其速度和响应能力也有第一印象。...在上图中，有一个元素在一帧中占据了视口的一半。然后，在下一帧中，元素下移视口高度的25％。
例如，很多公司网站的首页，其中的主要部分(轮播图/图片信息)占据了视口的主导位置： 字节跳动官网 该主要部分代表了该特定页面的LCP。...❞ 如果想了解此页面的LCP，我们需要测量「主要部分加载所需」的时间。理论上，「如果我们网站的LCP得分较低，这意味着我们的网站运行流畅，并且给用户德芙般的使用体验」。...这是因为大多数现代网站在文本和媒体文件之外还加载脚本资源。 通常情况下，LCP与FCP是相关的。FCP也是一个指标，它告诉我们当某人访问我们的网站时，「第一个带有任何内容的元素绘制所需的时间」。...优化图像不仅有助于提高LCP得分，还可以节省存储空间，并潜在地改善我们网站搜索引擎优化（SEO）性能。 ---- 4. 提高服务器响应时间 页面加载时间与Web服务器的响应时间密切相关。...当你加载或运行一个页面时，该选项卡会告诉你有多少代码被使用，与加载了多少代码进行了比较： 绿色（关键）：对于首次绘制而言是必需的样式；对于页面的核心功能而言是关键代码。
搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接IP或域名访问 2.视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。...视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比 3.2...* */ div button { -webkit-appearance: none; } /* *禁用长按页面时弹出菜单* */ img, a { -
在前端开发中经常需要按不同屏幕尺寸来进设计达到PC和移动端响应式。我们一般使用CSS媒体查询来检测视口宽度或高度，然后根据该模式改变设计。 这就是在过去10年中设计Web布局的方式。...它可以是一个完整的页面设计，也可以是一个显示如何使用每个组件的简单图。 注意我是如何将每个变体映射到一个特定的上下文，而不是一个视口。...正如刚才所看到的，我们重新查看了桌面大小的页面，并且有不同的部分，每个部分的列数不同。 在设计响应式组件时避免复杂性 重要的是要记住，组件的内部部分就像乐高游戏。...我们可以使用CSS容器查询来实现它。 当有足够的空间时，清单将展开并显示每个用户的名称。聊天列表的父元素可以是动态调整大小的元素(例如:使用CSS视口单元，或CSS比较函数)。...我们可以切换导航项标签的位置，从在新行或旁边的图标。 当容器很小时，导航项标签是如何从一个新行切换的，当有足够的空间时，导航项标签是如何靠近导航图标的。
然后，当样式加载、加载完成或已经定义时，它们可以放置在一个层中，允许保留样式覆盖的重要性，但无需精心管理加载顺序。 上图展示了级联层如何允许更自由、更开放地编写和加载过程。...在inert之后，不需要设置陷阱，因为你可以冻结或保护页面或应用程序的整个部分。当文档的这些部分处于惰性状态时，单击和焦点更改尝试根本不可用。...JavaScript alert() 函数就是一个很好的例子： 请注意，在调用 alert() 之前，页面是如何通过鼠标和键盘访问的。显示警报对话框弹出窗口后，页面的其余部分将被冻结或不活动。...当用户滑出侧边菜单时，让鼠标或键盘与后面的页面交互是不合适的；相反，当显示侧边菜单时，使页面处于inert状态，现在用户必须关闭或在该侧边菜单中导航，并且永远不会发现自己在打开菜单的页面中迷失在其他地方...例如，当前无法在包装图像时选择标签，因此很难确定锚定标记在该用例中如何更改其样式。可以使用 :has() 实现： a:has(> img) {...}
Google Chrome 团队即将对核心 Web 指标进行一些更改，以便更好地评估网页的用户体验质量。 在本文中，我们将探讨这一变化以及它带来的影响。...FID 是一种加载响应度指标，其背后的原理是，如果在加载阶段对页面的第一个交互没有明显的输入延迟，那么页面给人的第一印象就是良好的。...分数将为“好”、“需要改进”或“差”，具体取决于您的网站在视觉上更新所需的时间。 从这张表中不难看出： INP低于或等于200毫秒： 表明你的页面响应良好，用户体验优秀。...在谷歌浏览器中，当导航到查看 » 开发人员 » 开发人员工具 » 性能时，可以检查阻止下一个绘制的 JavaScript 函数和事件处理程序。 通过这样的办法减少用户 INP 时间。 3....发生这种情况时，应该检查是否可以减少代码中的 relayout 函数。 4. 首先显示首屏内容 如果呈现页面内容很慢，那么 INP 分数很可能会受到影响。
虽然这意味着每次调用setTimeout时循环会让出主线程，但我们应该确保其回调不会执行过多的工作。 setInterval在一定时间间隔内运行一个回调，因此更有可能妨碍交互。...正如上面的图片所示, 当任务过长且浏览器无法快速响应交互 当将较长任务分解为较小任务时，交互会被很早的执行 ---- 注意交互重叠 优化INP的一个特别具有挑战性的方面是处理「交互重叠」。...运行检查拼写错误的逻辑。 保存最近的更改（本地保存或保存到远程数据库）。...减小DOM大小 当页面的DOM较小时，渲染工作通常会迅速完成。然而，当DOM变得非常大时，渲染工作往往会随着DOM的增大而增加。...使用 content-visibility 属性，我们可以将元素的呈现方式设置为 auto，这样当元素不在视口内时，其内容就会被自动懒加载，只有当元素进入视口时，才会进行渲染。
浏览器（也称为网络浏览器或互联网浏览器）是安装在我们设备上的软件应用程序，使我们能够访问万维网。在阅读这篇文字时，你实际上正在使用一个浏览器。...在下面的屏幕截图中，我刚刚在搜索引擎上搜索了Palm Springs，这就是请求头的样子。HTTP 响应一旦服务器收到请求，它将对其进行处理并回复一个 HTTP 响应。...在响应的正文中，我们可以找到所有相关的响应头和我们请求的HTML文档的内容状态代码 - 例如：200、400、401、504网关超时等（我们的目标是 200 状态代码，因为它告诉我们一切正常，请求是成功的...调用堆栈是解释器（如 Web 浏览器中的 JavaScript 解释器）跟踪其在调用多个函数的脚本中的位置的机制——当前正在运行的函数以及从该函数中调用的函数等。...回流步骤不会只发生一次，而是每次我们更改 DOM 中影响页面布局的某些内容时，即使是部分更改，都会触发回流。
到页面或 CSS 中，可以减少 HTTP 请求。...响应式图片 响应式图片可以结合懒加载的形式，这样可以加强网页的体验。很多网站 logo 就是一个固定宽度的图像的例子，不管浏览器视口的宽度如何，始终保持相同的宽度。...这个时候我们需要考虑使用响应式图片： (max-width: 768px) 90vw, (max-width: 1980px) 80vw" src="360.jpg"alt=""> srcset：我们给浏览器准备了四个质量的图像...，分别为 360 768 1200 1920 size：我们来告诉浏览器，在不同的环境下图像的宽度 当视口不大于 360 时，图像的宽度为 100vw，当视口大于 768 时，图像显示为 90vw，以此类推...如果我们需要更精确的控制浏览器在什么视口大小下显示多大的图像，可以使用 picture 元素。 当视口大于 960 像素时，会加载 960.jpg。大于 768 像素时，会加载 768.jpg。
DevTools 配置 Firefox DevTools具有许多选项，这些选项有助于开发人员定制其体验，例如在Web控制台启用时间戳选项，或禁用HTTP缓存，该HTTP缓存用于模拟在具有dev工具打开的所有页面中的第一负载性能...How To Analyze The Load Time Performance（如何分析Load时性能） 网络监视器集成了一个性能分析工具，可以用来分析web页面的加载时间性能。...良好的性能和响应能力是因为JavaScript的异步模型机制，但是长时间运行的函数会导致性能差和UI响应能力差。...等几秒钟，还要确保在分析期间与页面进行交互，然后停止记录 查找任何长时间运行的函数或事件，并关注FPS低的时间部分(放大)。...对于JavaScript，您需要关注函数调用、解析HTML和解析XML。 结论 在本文中，我们已经了解了如何开始使用Firefox的DevTools，以及如何使用不同的性能相关子工具。
web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接IP或域名访问 2、视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。...视口可分为布局视口、视觉视口和理想视口 2.1布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题 iOS，Android...可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度 2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 需手动添写meta视口标签通知浏览器操作...是厂商在出厂时就设置好的 开发时用的1px不一定等于1个物理像素 PC端页面1px就等于1个物理像素，但移动端不尽相同 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比...* */ div button { -webkit-appearance: none; } /* *禁用长按页面时弹出菜单* */ img, a { -
前言在今天的 Web 开发中，移动设备已经成为用户访问网站的主要方式之一。因此，确保网站在移动设备上的正确显示和功能正常运行至关重要。...通过模拟移动设备，开发人员可以更准确地测试其网站在移动设备上的性能和用户体验。...还可以为所有测试或特定测试模拟,以及设置以"geolocation"显示通知或更改."...然后，我们在该设备上创建一个新的浏览器上下文，并访问网站。执行移动端自动化测试在模拟移动设备后，我们可以编写代码来执行移动端自动化测试。这可能包括测试网站的响应式布局、交互功能的正常运行等。...# Your code here # 测试交互功能 # Your code here在这个示例中，我们可以编写针对移动设备的自动化测试代码，以确保网站在移动端的正确显示和功能正常运行
1.1 什么是 Web Web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和 HTTP 的、全球性的、动态交互的、跨平台的分布式图形信息系统。...Web 前端主要是通 HTML,CSS,JS,ajax,DOM 等前端技术,实现网站在客服端的正确显示及交互功能。...当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。...在这一步中可以调用methods中的方法，改变data中的数据，并且修改可以通过 Vue 的响应式绑定体现在页面上，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理。...当这个钩子被调用时，组件 DOM 已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。
移除或移动子元素时将触发子树修改断点。...启用 Ancestors 复选框时查看祖先实体事件侦听器，即除了当前选定节点的事件侦听器外，还会显示其祖先实体的事件侦听器 启用 Framework listeners 复选框时查看框架侦听器，DevTools...选择执行环境 以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector ? 通常，您会看到此环境设置为 top（页面的顶部框架）。...当您在 top 以外的环境中操作时，DevTools 将 Execution Context Selector 突出显示为红色，如下面的屏幕截图中所示。...DOM更改断点 当您想要更改DOM节点或其子节点的代码时，使用DOM更改断点 设置DOM更改断点： 切换到 Elements 面板。 找到您想设置断点的元素并右键单击该元素。
假设我们有一个元素与以下CSS： .element { width: 50vw; } 当视口宽度为500px时，50vw计算如下 width = 500*50% = 250px 视口高度 vh单位表示根元素高度的百分比...我们有一个元素与以下CSS: .element { height: 50vh; } 当视口高度为290px时，70vh计算如下: height = 290*70% = 202px 大家都说简历没项目写...响应式元素 假设我们有一个作品集来展示我们的响应式设计工作，并且我们有三种设备(移动设备、平板电脑和笔记本电脑)。每个设备包含一个图像。目标使用 CSS 来响应适配这些页面。 ?...当视口较小（移动）时，通常会减少padding 。 通过使用vmin，我们可以在视口较小尺寸（宽度或高度）的基础上获得合适的顶部和底部 padding。...纵横比 我们可以使用vw单位创建响应元素，以保持其纵横比，而不管视口大小如何。 首先，需要先确定所需的纵横比，对于此示例，使用9/16。
它跟踪目标元素的可见性，并在元素进入或离开视图时通知开发人员。它非常适用于延迟加载图像，因为它在图像进入或离开视口时通知我们，从而允许我们根据需要加载图像。...，我们将创建一个Intersection Observer的实例，并指定一个回调函数，每当观察的元素进入或离开视口时，该函数将被触发。...然后，我们创建一个新的Intersection Observer实例，传入一个回调函数，每当观察的元素（在这种情况下是懒加载的图片）进入或退出视口时触发。...当观察到一张图片并进入视口时（即 entry.isIntersecting 为真），我们将其 src 属性设置为 data-src 的值，该值保存了实际的图片URL。这个操作触发了图片的懒加载。...这确保了每当用户滚动页面时都会调用该函数。此外，我们在页面加载时调用 lazyLoadContent() 来加载可见内容。 何时使用懒加载 对于网页开发人员来说，知道何时实施延迟加载是很重要的。
对Web上的大多数用户来说，加载页面或更改视图是一项任务。 1000 毫秒或更长 超过1000毫秒（1秒），用户的注意力会从正在执行的任务上转移。...(关于主线程和长任务,我们在浏览器之性能指标-TTI有过介绍,这里就不在赘述) 当一个长任务正在处理时，浏览器无法简单地暂停它并响应用户的操作，比如用户的点击事件，而这些操作发生在长任务进行期间。...要使用WebPageTest分析TBT，请进入该工具并选择主页上的Core Web Vitals（核心Web指标）选项卡。然后，输入我们想要分析的页面的URL(这里我们还是以字节跳动官网为例)。...为了解决这个问题，可以识别慢速的第三方JavaScript，并通过使用async或defer属性、第三方CDN托管或Service Web Worker进行缓存来优化其服务方式。...减少主线程工作 减少主线程工作时，应缩短其在解析、编译和执行CSS和JavaScript文件上所花费的时间。
1.3常见移动端屏幕尺寸 1.4移动端调试方法 Chrome DevTools（谷歌浏览器）的模拟手机调试 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接IP或域名访问...2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 理想视口，对设备来讲，是最理想的视口尺寸 需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的...这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334 我们开发时候的1px 不是一定等于1个物理像素的 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比 如果把1张100*100...2.响应式页面兼容移动端（其次） ?.../*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ -webkit-appearance: none; /*禁用长按页面时的弹出菜单*/
或域名访问 2.0 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。...2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定 理想视口，对设备来讲，是最理想的视口尺寸 需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的...这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334 我们开发时候的1px 不是一定等于1个物理像素的 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比 如果把1张100*100...也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站 京东pc端： 京东移动端： 2.响应式页面兼容移动端（其次） 响应式网站：即pc和移动端共用一套网站.../*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/ -webkit-appearance: none; /*禁用长按页面时的弹出菜单*/
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
