前端性能优化 又是个听起来很高大上的词,确实是的,因为它需要 **高在性能,大在范围
**,所幸很多大佬都已经输出了很多高质量的内容供大家参考,作者最近也在学习和了解这方面的内容,对如下文中的一些理解若有不当之处,可在评论区指正!!!
前端性能优化这个内容打算分为 上下两篇,本来打算一篇写完,但发现前置知识部分已经占了 3000+
文字,因此本篇文章主要还是讲解一些必要了解的前置内容。
下一篇:**前端性能优化到底该怎么做(下)— 直捣黄龙**[2]
其实前端性能优化核心就是两点:
而这些核心内容都可以从下面这个老生常谈的问题中延伸开来。
从输入
URL
到页面加载完成发生了什么?
相信到现在为止,大家对这个问题的回答可以说是能够做到滔滔不绝了吧()!不过每个人回答的方向和重点应该都不一样,比如之前在 如果不能,请忽略
B 站
听 winter
大佬对这个问题的看法和解析的角度是更深、更广的。
在这还是要简单的总结一下核心内容:
DNS
解析TCP
连接HTTP
请求HTTP
资源以上任意一点都可进行无限扩展、延伸,但点到为止才是现在真正需要的。
Google
为前端页面性能的评估提出了 RAIL
模型,核心内容如下:
Response
响应Animation
动画Idle
空闲Load
加载
性能指标其实有不少的内容,但在这我们指列举比较常用的几种:
首次绘制(First Paint,FP
)
在渲染进程确认要渲染当前响应资源后,渲染进程会先创建一个空白页面,通常把创建空白页面的这个时间点称为 First Paint
,简称 FP
所谓的 白屏时间 其实指的就是创建这个空白页面到浏览器开始渲染非空白内容的时间,比如页面背景发生变化等
首次内容绘制(First Contentful Paint,FCP
)
当用户看见一些 "内容" 元素被绘制在页面上的时间点,和白屏是不一样,它可以是 文本
首次绘制,或 SVG
首次出现,或 Canvas
首次绘制等,即当页面中绘制了第一个 像素 时,这个时间点称为 First Content Paint
,简称 FCP
首屏时间 / 最大内容绘制(Largest Contentful Paint, LCP
)
LCP
是一种新的性能度量标准,LCP
侧重于用户体验的性能度量标准,与现有度量标准相比,更容易理解与推理,当首屏内容完全绘制完成时,这个时间点称为 Largest Content Paint
,简称 LCP
最大内容绘制应在 2.5s
内完成
首次输入延迟(First Input Delay, FID
)
FID
测量的是当用户第一次在页面上交互的时候(点击链接、点击按钮 或 自定义基于 js
的事件),到浏览器实际开始处理这个事件的时间
首次输入延迟应在 100ms
内完成
累积布局偏移(Cumulative Layout Shift, CLS
)
CLS
是为了测量 视觉稳定性,以便提供良好的用户体验
累积布局偏移应保持在 0.1
或更少
首字节达到时间(Time to First Byte,TTFB
)
指的是浏览器开始收到服务器响应数据的时间(后台处理时间 + 重定向时间),是反映服务端响应速度的重要指标
TTFB
时间如果超过 500ms
,用户在打开网页的时就会感觉到明显的等待
通过上述内容了解了性能指标的相关内容和一些阀值,那么接下来的问题是我们怎么获取一个网站的具体性能指标数据呢?
为了方便还是得使用工具或者说是 API
,当然可以 自定义页面性能指标 的计算方式,比如有些就是通过计算当前页面 DOM
的 总节点数 和 嵌套层级 来计算一个网站的分数等,这里就不再额外介绍。
具体参数介绍可以看 Big shark@LX
[3] 大佬的文章,里面介绍的非常详细,这里只列举一些核心点。
通过 Networks
指标可以查看到对应服务器加载资源的相关信息:
可以将鼠标 移动 或 点击 到具体的请求上查看加载时间和加载速度,如下:
鼠标移入:
鼠标点击:
通过 Frames
指标可以查看页面每一帧渲染时 CPU
所消耗的时间和持续时间 Duration
的信息,如下:
图一:
图二:
通过 Timings
指标可以查看在上面列举的一些性能指标的值,如下:
First Paint,FP
)First Contentful Paint,FCP
)Largest Contentful Paint, LCP
)HTML
文档被完全加载 和 解析完成的时间(DOMContentLoaded, DCL
)Main
指标包含了加载过程的三个阶段:
导航阶段
主要是处理响应头的数据,并执行一些老页面退出之前的清理操作
解析 HTML
文件阶段
主要是解析 HTML
数据、解析 CSS
数据、执行 JavaScript
来生成 DOM
和 CSSOM
生成位图阶段
主要是将生成的 DOM
和 CSSOM
合并,包括了布局 (Layout
)、分层、绘制、合成等一系列操作
Performance
面板最大的优点就是各种数据信息非常的全,但这也是它最大的缺点,数据信息庞大到需要自行过滤,对于不熟悉的开发者来说,还是需要一定的学习成本的。
相反,Lighthouse
面板中的信息就相对简洁一些,除了检测结果以外,还会提供对应的改进方案,真是考虑得妥妥的,主要检测五个方面的内容:
可以通过 Analyze page load
按钮来开始对页面应用进行检测,这里以掘金首页为例:
下面以 Performance 性能 为例简单看一下具体包含的内容,由于篇幅有限,其他内容可自行测试并进行阅读。
从性能指标的数据来看,只有 累积布局偏移(Cumulative Layout Shift, CLS
) 满足要求,其他指标显示 黄色 和 红色,意味着仍有改进的空间,特别是 首屏时间 是 2.9s
已经是超过了对应的阈值 2.5s
。
性能指标数据如下图所示:
甚至还提供了对应的诊断结果,比如提到的图片没有设置对应的宽高:
甚至还支持在 Node
环境运行,感兴趣的自行去 npm
中查看 **文档**[4] 即可,这里不过多介绍。
上述性能指标工具的能力已经足够强大,覆盖信息也很全面,但如果我们需要将页面性能指标数据收集并上报又该怎么办呢?
首先排除的肯定是通过 性能指标工具 的方式来收集,一旦要检测性能指标数据意味着得是不同的客户端统计数据的结果合集(除非你愿意一台一台客户端来手动记录和收集数据,呸,你愿意你领导还不愿意呢),最理想的方式当然是自动收集和上报,那就意味着这应该是代码要干的活!!!
既然有这样的需求,那么必定有对应的解决方案,您接着往下看!
实际上在浏览器端的全局对象 window
上有一个名为 performance
的属性,它是一个用于支持 IE9
以上及 webkit
内核浏览器中用于记录页面 加载 和 解析 过程中关键时间点的机制,其兼容性在 **caniuse
**[5] 中的表现如下:
下面就简单介绍一下和 window.performance
相关一些核心属性和方法。
performance.timing
属性中提供了很多关键的时间信息,我们可以通过这些时间节点来简单的计算出需要的性能指标数据(不一定准确),计算方式如:
const {
domainLookupStart,
domainLookupEnd,
navigationStart,
loadEventEnd,
responseStart,
responseEnd,
connectStart,
connectEnd,
redirectStart,
redirectEnd,
domContentLoadedEventEnd,
domComplete,
} = performance.timing
// DNS 查询时间
DNS = domainLookupEnd - domainLookupStart
// TCP 建立连接时间
TCP = connectEnd - connectStart
// 页面重定向时间
Redirect = redirectEnd - redirectStart
// 首字节到底时间
TTFB = responseStart - navigationStart
// 首次渲染时间
FP = responseStart - navigationStart
// DOM 解析时间
DOM = domComplete - responseEnd
// 首屏时间
LCP = loadEventEnd - navigationStart
复制代码
performance.getEntries()
方法可以获取所有资源请求的时间数据,如下:
点击可查看具体的资源信息,其他属性和上述内容有重复,就不在额外介绍计算方式了,具体如下:
performance.now()
方法可以精确计算程序执行时间,它会返回以微秒(百万分之一秒)为单位的时间,即更加精准,这也是它和 Date.now()
是不同点:
Date.now()
返回自 1970年1月1日 00:00:00 (UTC) 到 当前时间 的 毫秒数
意味着 Date.now()
依赖于系统的当前时间,而系统时间可以被认为修改,因此它的毫秒数并不准确
performance.now()
的时间是以恒定速率递增的,不受系统时间的影响
// Date.now()
let a = 2, b = 3;
const begin = Date.now();
console.log(' a + b = ', a + b);
console.log('time = ', Date.now() - begin); // 2
// performance.now()
let a = 2, b = 3;
const begin = performance.now();
console.log(' a + b = ', a + b);
console.log('time = ', performance.now() - begin); // 0.10000002384185791
复制代码
**web-vitals
**[6] 库是 Google
推出的一个小型(约 1.5K
)模块化库,用于测量真实用户的所有 Web Vitals
相关的指标,其重要核心指标信息如下(一图胜千言):
接下来,让我们通过 npx create-react-app my-react-app
来创建一个 react
项目,然后观察一下它的项目结构:
image.png
是不是超级显眼的 **reportWebVitals.js
**,在进入文件查看你会发现我们需要的核心性能指标都在里面:
前端性能优化这个内容是之前一直打算要写的,终归知识有所欠缺,到现在也算是边学习边输出中,**下一篇**[7] 就针对性能优化的方案进行一些总结!!!
1810425E.jpg
本文由哈喽比特于1年以前收录,如有侵权请联系我们。
文章来源:https://mp.weixin.qq.com/s/R1NOd_gaCMDf-yoCI57fUg
京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。
日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。
据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。
今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。
日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。
近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。
据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。
9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...
9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。
据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。
特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。
据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。
近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。
据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。
9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。
《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。
近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。
社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”
2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。
罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。