性能优化之影响分析

这篇具有很好参考价值的文章主要介绍了性能优化之影响分析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

页面性能的影响

性能非常重要,而具体反映到我们的业务场景中,可能会有如下影响:

  • 不利于用户留存
    • 站点页面的展现速度非常影响用户体验,很多用户会因等待的不耐而放弃站点。
    • 研究表明,47 % 的消费者希望页面能够在 2s 内打开。
      移动端的页面应该在 3 秒钟内完成加载,若超过这个时间,53% 的用户会直接关闭页面。
  • 不利于 SEO
    • 谷歌搜索结果中,会给加载速度慢的页面一个较后的排名。
  • 不利于产品信息分发
    • 用户的空闲总时长是有限的,当花费更多的时间等待页面加载,
      则用于消费价值信息的时间就会减少,从而信息消费量也会大幅减少。
  • 其他等等
    • 79% 的消费者在电商站点性能体验较差的情况下,不会再次访问这个站点。

如何优化

  1. 第一位不是具体手段,而是先收集数据
  2. 收集数据之前需要了解页面从加载到呈现的步骤(越详细越好)
  3. 有了数据可以很清晰的了解我们的短板
  4. 如果不确定哪里是短板可以参考别家的数据
  5. 结合我们的产品形态制定目标和基准
  6. 根据目标“寻找”具体手段进行“优化”

如何分析

Analyzing Critical Rendering Path Performance
分析 关键 渲染 路径 性能

performance

  • 总概念
    • 蓝色(Loading):网络通信和HTML解析
    • 黄色(Scripting):JavaScript执行
    • 紫色(Rendering):样式计算和布局,即重排
    • 绿色(Painting):重绘
    • 灰色(other):其它事件花费的时间
    • 白色(Idle):空闲时间

关键资源分析

这么多指标,我们应该分析那个呢

1、减少网络请求

HTTP2多路复用 长链接 多资源并行请求 header压缩 body压缩 server主动推送
HTTP1 6个并发限制 雪碧图

2、提高打包速度

  1. 减少打包体积
    重复依赖引用重复打包,代码压缩
  2. code split 优化首次加载 按需加载 懒加载
  3. bundle split分包 合理分包,充分利用缓存
  4. 第三方依赖external 减少整体打包编译时间和体积
  • 不适用场景
  • 需要按需引入的 npm 包, 对于按需加载的包没必要用 cdn 全量引入。
  • cdn 引入的形式可能会造成全局污染问题,可根据项目实际情况适用。
  • 对于体积比较大且不是首屏用到的包,用 cdn 形式引入,可能会影响首屏加载速度。

nextjs/image图片解决方案

  • 图片流量优化,通过格式自适应和分辨率自适应以达到提升站点性能并节省流量的目的;
  • 提升视觉稳定性,内置四种图片布局方式,涵盖绝大多数的图片渲染场景,避免累积布局偏移 CLS;
  • 更快的页面加载速度,支持过渡图占位+图片懒加载;
  • 可灵活处理图片资源,支持图片缩放、压缩、格式转换等能力

目标

因此,我们面向 Web 开发者提供了一套图片优化方案,核心目标包括:

  • 降低流量成本:通过图片压缩,分辨率自适应,应用 WebP、AVIF 等高压缩率图片格式,
    减小图片体积,降低站点 CDN 成本,同时也提升图片加载速度;
  • 提升图片用户体验:建立 Web 图片评估体系,支持对站点图片体验做出评估并给出优化建议,
    在减小图片体积的基础上,通过懒加载、图片预占位、稳定性布局等手段提升图片加载的流畅性;
  • 降低开发成本:考虑实际图片场景,提供不同场景下图片优化的最佳实践,降低图片优化成本。
总体可归结为
  • 图片多采用 PNG 格式,压缩率低
  • 预览图直接采用原始大小的图片,存在流量浪费且加载缓慢
  • 图片渲染抖动,加载不流畅,在完成渲染前未采用占位图过渡
  • 图片未进行懒加载

img引入方式

  • 静态引入:代码中静态引入的图片,通常是跟随代码打包的图片,
    此外也包括固定不变的远程URL;
    代码中静态引入的图片,通常是跟随代码打包的图片,此外也包括固定不变的远程URL
  • 动态下发:服务端动态下发的图片,,这类 URL 相对较多且场景复杂
改造方案

引入图片优化组件,接入图片格式自适应、分辨率自适应、大小自适应
图片压缩等能力以减小图片大小,通过懒加载、过渡占位保证图片加载流畅性;

图片体积优化

主要通过图片压缩、格式自适应、分辨率自适应三种方式来减小图片体积

实现格式自适应
<picture>
  <source srcset="image1.webp" type="image/webp" />
  <img srcset="image1.jpg" decoding="async" loading="lazy"/>
</picture>
实现格式和分辨率自适应
<picture>
  <source   
      srcset="image1.webp 200w,
              image2.webp 600w"
      sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
      type="image/webp"
   />
     
   <img 
      srcset="image1.jpg 200w,
              image2.jpg 600w"
      sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
      decoding="async"
      loading="lazy"
   />
</picture>
不过要注意的是,如果srcset和sizes属性设置不当,
可能会导致浏览器加载不必要的图片或者渲染出不合适的图片尺寸,
从而影响页面的加载速度和显示效果。因此,在使用这些属性时,
我们需要根据具体的情况进行优化和调整,确保图片的加载和显示效果都能达到最佳状态。

图片加载优化

图片加载优化包括懒加载、稳定性布局、占位图过渡、错误兜底等一系列措施,
保证图片加载的流畅性,提升用户体验。

同样参考 next/image 的思路,组件提供了五种稳定性布局:
intrinsic、responsive、fixed、fill、raw,
通过生成稳定的 dom 结构来提升视觉稳定性,尽可能覆盖大多数的图片场景
减少CLS累计布局偏移量
  • intrinsic: 若指定宽度小于容器宽度,则根据指定宽高渲染图片;反之则图片宽度为容器宽,图片高度按照比例缩小;
  • responsive: 图片渲染宽度等于容器宽度,高度按比例缩放;
  • fixed: 根据指定宽高渲染图片;
  • fill: 图片缩放以填充容器,可传入 objectFit、objectPosition
    属性表示不同的填充模式;
  • raw: 组件中将不会插入布局相关的DOM,只保留纯净的 标签,
    图片宽高将由组件中传入的宽高和 CSS 样式共同决定。

img监控

1. 加载耗时

PerformanceResourceTiming
该类指标包括请求资源过程中各个阶段的耗时、资源大小,以及由此推导而来的缓存命中指标

2. 压缩评估和分辩率评估

图片详情
图片格式、大小、尺寸、状态码等,依赖 MutationObserver 以及 Response Header 的信息

3. 格式评估
  1. 收集图片尺寸、体积、状态码以及浏览器信息;
  2. 判断浏览器对图片格式的支持性(可根据 ua 粗略判断 WebP、Avif )
  3. 上面 Jpeg 的压缩比取了 8 : 1,这里对齐Lighthouse,
    保守估计 WebP 取 10 : 1,Avif 取 12 : 1;
  4. 估算采用高压缩比格式后的体积,如果小于原图体积 8KB(插件里阈值取0)
    以上,则认为该图可以进行格式优化。
4. 懒加载评估

该项评估分析是否有不在浏览器视窗内就已经加载的图片,
关键是判断图片加载后拉取图片的元素是否已经在视口内出现过,否则就记作没有懒加载。

如何判断元素是否在视口内出现过?

  1. MutationObserver 监听 dom 元素的增减,在新增元素时通过 IntersectionObserver 监听元素,
    删除元素时停止监听;元素距离视口的阈值设置为100
  2. 若元素出现在视口范围内则更改 imgList 中该元素的状态,同时停止监听;

非首屏资源,NOSSR 或拆分异步加载

数据变化慢的进行接口拆分和接口缓存

图片webp
picture标签拥有兜底图片的特性,优先webp兜底jpg



可以先加载webp图片,监听
img的onerror和onload事件
来查看是否支持webp

svg使DOM结构过大
svg压缩和svgspring

6、 问题分析

JavaScript 在前端是单线程运行的,并且浏览器的一些其它计算行为也会阻塞 JavaScript 代码执行,比如 Paint & Layout。

7、优化应用的FCP

提升server性能是最直接的方式

  1. 优化dom结构(SVG Sprite)
    dom结构复杂会对页面的Hydrate性能产生较大影响,也对ssr性能影响
  2. 前端请求替换成 Server 实现,直接服务端推送
    直接调用 Node 端具体的某个函数直接获取数据,不用从前端请求绕一大圈
  3. 流式渲染
    React/Vue 都支持流式渲染 API,流式渲染模式下,框架每渲染完一部分 HTML 就会直接响应。
    由于 SSR 场景下页面已经填充好数据,越早返回数据浏览器就可以越早进行初次绘制,降低 FP 时间。
  4. 减少不必要的应用逻辑
    找到不需要在服务端执行的复杂的逻辑,处理到客户端再执行

7、优化应用的LCP

DNS prefetch
HTTP2 的 Server push

8、 优化应用的 CLS

CLS 相对而言是比较容易拿到优化效果的指标,
而且该指标在 Lab 评分规则中占比重非常大。
根据 CLS 算法,我们只需要保证元素被渲染到页面上之后位置
不再有大幅度的移动即可得到一个比较高的 CLS 分数。使用骨架屏,
SSR 等都是比较常见的 CLS 优化手段。

9、优化TTI

在页面完全加载之前,尽量少的产生 Long task,尽量快的拿到请求响应

什么指标值得我们关注

https://juejin.cn/post/6956583036133572639文章来源地址https://www.toymoban.com/news/detail-455364.html

到了这里,关于性能优化之影响分析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端页面性能优化指标

    优化用户体验的质量一直都是是每个Web站点长期成功的关键,网页核心的性能指标应该是随着时间的推移而不断演变的,目前谷歌浏览器公布的核心Web健康指标——Core Web Vitals包括加载体验、交互性和页面内容的视觉稳定性; 1. Largest Contentful Paint (LCP) : Web 页主要内容的加载

    2024年02月15日
    浏览(63)
  • 前端页面性能优化(完整归纳版)

    当优化前端页面性能时,可以从多个方面入手。以下是一些常见的优化技巧,使用 Markdown 格式展示: 压缩和合并文件 :减少请求次数,通过压缩和合并 CSS、JavaScript 文件来减小文件大小。 使用缓存 :通过设置适当的缓存头(Cache Headers)来利用浏览器缓存,减少重复加载资

    2024年02月12日
    浏览(40)
  • 前端页面渲染多条数据长列表的性能优化

    后端一次性返回了10w条数据,前端该如何处理?长列表性能优化 这个问题其实是考察面试者对性能优化的理解。我们知道,对于大量数据渲染的时候,JS运算并不是性能的瓶颈,性能的瓶颈主要在于渲染阶段,所以页面的卡顿是由于同时渲染大量DOM所引起的。 简单聊一下 s

    2024年02月13日
    浏览(51)
  • 前端页面性能优化,性能测试算法优化,MeterSphere开源持续测试平台v2.10.5 LTS版本发布

    2023年8月7日,MeterSphere一站式开源持续测试平台正式发布v2.10.5 LTS版本。自2023年5月发布v2.10 LTS版本后,MeterSphere开源项目组坚持每两周发布小版本,持续进行问题的修复更新,并针对部分功能进行优化。 本次发布的MeterSphere v2.10.5 LTS版本在前端页面性能、性能测试算法、后端

    2024年02月14日
    浏览(41)
  • 理解React页面渲染原理,如何优化React性能?

    当使用React编写应用程序时,可以使用JSX语法来描述用户界面的结构。JSX是一种类似于HTML的语法,但实际上它是一种JavaScript的扩展,用于定义React元素。React元素描述了我们想要在界面上看到的内容和结构。 在运行React应用程序时,JSX会被转换成真实的DOM元素,这个过程主要

    2024年02月08日
    浏览(46)
  • 利用LightHouse进行合理的页面性能优化,看这一篇就够了!

    Lighthouse 是一款由 Google 开发的开源工具,用于评估 Web 应用程序的性能和质量。它可以分析 Web 应用程序的加载速度、渲染性能、可访问性、可用性和最佳实践等方面,提供详细的报告和建议。 官网 1.谷歌打开设置,搜索输入商店: 2.下载 Lighthouse : 3.我们从官网上下载一个

    2024年02月05日
    浏览(42)
  • 快速搞定前端JS面试 -- 第十二章 运行环境 (页面加载、性能优化、安全)

    4. Window.onload和DOMContentLoaded 二、性能优化 1、性能优化原则 2、如何入手性能优化 1. 资源合并 2. 缓存 3. CDN 4. SSR 5. 懒加载 6. 缓存DOM查询 7. 尽早开始JS执行 8. 防抖 9. 节流 三、安全 1. XSS跨站请求攻击 2. XSRF跨站请求伪造 问题解答 1. 从输入url到显示出页面的整个过程 2.

    2024年04月16日
    浏览(54)
  • 快速搞定前端JS面试 -- 第十二章 运行环境 (页面加载、性能优化、安全)(1)

    4. SSR 5. 懒加载 6. 缓存DOM查询 7. 尽早开始JS执行 8. 防抖 9. 节流 三、安全 1. XSS跨站请求攻击 2. XSRF跨站请求伪造 问题解答 1. 从输入url到显示出页面的整个过程 2. Window.onload和DOMContentLoaded区别 3. 为何把css放在中 4. 为何把js放在最后 5. html中css写在前js写在后的优点 6. 如何入

    2024年04月14日
    浏览(47)
  • 活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。   上两篇中我们分享了如何利用 数据库主键 和 表格设置默认不加载数据 来提升应用系统访问的性能。在本篇中一起来看看如何

    2023年04月10日
    浏览(50)
  • 【万字解析】Webpack 优化构建性能(分析->优化)

    全局安装 webpack-bundle-analyzer 插件 运行 webpack-bundle-analyzer 开始打包,需要获取所有的依赖模块 搜索所有的依赖项,这需要占用一定的时间,即搜索时间,那么就确定了: 需要优化的第一个时间就是 搜索时间 。 解析所有的依赖模块(解析成浏览器可运行的代码) Webpack 根据

    2024年01月21日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包