安徽省建设总站网站,建筑工程网站导航,木门行业做网站有什么好处,辽源网站seonext项目页面性能调优
一般来说性能优化可以分为加载时、运行时两部分的优化。
扩展参考链接#xff1a; 前端性能优化 24 条建议 Webpack 4进阶–从前的日色变得慢 #xff0c;一下午只够打一次包 Webpack 分包优化首屏加载
参考指标
FCP#xff08;First Contentful P…next项目页面性能调优
一般来说性能优化可以分为加载时、运行时两部分的优化。
扩展参考链接 前端性能优化 24 条建议 Webpack 4进阶–从前的日色变得慢 一下午只够打一次包 Webpack 分包优化首屏加载
参考指标
FCPFirst Contentful Paint首次内容绘制时间白屏时间LCPLargest Contentful Paint最大内容绘制时间即网站渲染占比最多的元素绘制所花费的时间。TTLTime to Interactive首次可交互时间。FMPFirst Meaningful Paint首次有意义的渲染帧从页面加载开始到大部分或者主要内容已经在首屏上渲染的时间点。
性能测试方式
本地 / 测试环境 可直接使用google devtool自带的测试工具Lighthouse正式环境 https://gtmetrix.com/ https://pagespeed.web.dev/report https://www.webpagetest.org/
优化方法
一、开启webpack具体分析Lighthouse treeMap减少主包文件大小、代码分割分包
使用next提供的dynamic组件异步导入依赖代码分割 基本上非首屏内容皆可分割出去。是否在服务端渲染可以自行测试不过经过我的尝试在服务端渲染过一次、客户端直接拿数据优化效果更好。
import dynamic from next/dynamic;
const Component dynamic(import(./component));
// const Component dynamic(import(./component),{ssr:false});代码分割后使用webpack-analyze查看包的大小主包大小多大页面打包后大小多大是否tree-shaking是否开启压缩是否关闭source-map。 以及最重要的是否把重复引入的库合并不能每个包都打包进去了那样就浪费资源了。 可以参考之前的文章webpack分类下的文章。
参考 Next.js的Babel及拆包优化 前端小杂记 - 基于 NextJS 的网站构建、优化与发布 Webpack中 SplitChunks 插件用法详解
我的项目中我发现主包build后有800多k 经过打印next自带的webpack.optimization信息发现next拆包策略如下
于是我想把主包里的800多k的包拆出来仔细查看主包发现里面有一些公共utils包比如mobx / antd的内容还有一些和其他包重复引用的部分于是我想把这部分包提出来怎么做呢参考以前的webpack相关博客可以使用cacheGroup所以添加如下分包策略
// 需判断是否是服务端打包我们只修改非服务端打包的策略
// framework是next自带的分包策略里面打包react相关try {if (!isServer !dev) {const cacheGroups config.optimization.splitChunks.cacheGroups;// 1.mobxcacheGroups.antd {name: antd,test: /[\\/]node_modules[\\/](antd|ant-design)[\\/]/,enforce: true,chunks: all,};// 2.工具类cacheGroups.vendors {name: vendors,test: /[\\/]node_modules[\\/](mobx|axios|lodash|moment)[\\/]/,enforce: true,chunks: all,priority: 20,};// 3.utilsconfigcacheGroups.utils {name: utils,test: /[\\/]src[\\/]utils[\\/]/,enforce: true,chunks: all,priority: 20,};}
} catch (e) {console.log(e);
}经过本次分包后主包肉眼可见地从800多k变为了500多k里面杂乱重复引入的工具包减少了。而总体的打包大小从一开始的10多M变为9.7多M.
但是绝望滴事情发生鸟当我自信满满地npm start想要看看优化效果时报了node错误[nodemon] app crashed - waiting for file changes before starting...。。项目启动不了了
问题肯定是出在新加的这一段代码上于是try / catch一下提示Cannot set property antd of undefined是因为本地dev环境自动配置的splitChunks为false好吧因此修改上述代码中增加判断条件!isServer !dev
Tree-shakingsideEffects treeshaking应该是自动在生产环境生效的但是副作用标识我没有启用虽然启用之后项目文件大小确实小了但是担心对整个项目产生其他影响测试不充分。 参考 webpack之sideEffects webpack4新增了一个sideEffects新特性它允许我们通过配置的方式去标识我们的代码是否有副作用从而为Tree-shaking提供更大的压缩空间。 这里的副作用指的是模块执行时除了导出成员之外所做的事情。 sideEffects一般用于npm包标记是否有副作用。 二、 视频、图片加载优化懒加载
参考以前的文章怎么优化一个多图多视频的页面
1. next/image做了很多图片加载优化的工作以及最好使用相关懒加载组件等图片出现时再加载请求
从NextJS的封装的Image组件看如何优化图片加载
import LazyLoad from ‘react-lazyload’;import Image from ‘next/image’; next提供的图片加载优化组件也可以实现懒加载的功能。
2. 减少图片大小以及减少请求消耗带宽资源。
可以使用next/image压缩或者使用webp格式fontIcon代替svg。使用CDN缓存图片静态资源雪碧图合并图片等。图片可以渐进式加载// 我们可以使用webP格式的图片或者分辨率较低的压缩图再叠加一层清晰的 png 图片实现快速显示的效果。
// 叠加 png 图片的目的是防止某些浏览器不支持 webP 格式。
background-image: url(img/beijing.webp),url(img/beijing.png);// 使用picture标签保底img为webp格式
picturesource media(min-width:465px) srcset/i/photo/tulip.jpgimg src/i/photo/flower.gif altFlowers stylewidth:auto;
/picture压缩工具
https://squoosh.app/https://tinypng.com/https://imagecompressor.com/
3. 页面视频 懒加载监听
使用intersectionObserver来监听是否进入页面视野。 提供一份监听全页面视频懒加载工具函数。
/*** description 视频懒加载* - video data-src{src} data-poster{poster} autoPlay playsInline loop muted/*/function VideoLazyLoad(threshold 300) {function videoLoaded(video) {return video.getAttribute(src);}const lazyVideos [].slice.call(document.querySelectorAll(video[data-src]));if (IntersectionObserver in window) {let lazyVideoObserver new IntersectionObserver(function (entries, observer) {entries.forEach(function (_video, _index) {const video _video.target;const videoPlaying video.currentTime 0 !video.paused !video.ended video.readyState video.HAVE_CURRENT_DATA;if (_video.isIntersecting) {if (videoLoaded(video)) {video.play();} else {video.poster video.getAttribute(data-poster);video.src video.getAttribute(data-src);video.load();video.play();}} else {if (videoLoaded(video) videoPlaying) {video.pause();}}});},{root: document.getElementById(_next),rootMargin: ${threshold}px 0px,});lazyVideos.forEach(function (lazyVideo) {lazyVideoObserver.observe(lazyVideo);});} else {lazyVideos.forEach(function (video) {video.src video.getAttribute(data-src);video.poster video.getAttribute(data-poster);video.load();});}
}/** 视频懒加载但是在首次进入视野时加载一次之后是否暂停、播放由用户手动控制。 */
export function VideoLazyLoadFirst(threshold 300) {const lazyVideos [].slice.call(document.querySelectorAll(video[data-src]));if (IntersectionObserver in window) {let lazyVideoObserver new IntersectionObserver(function (entries, observer) {entries.forEach((_video, _index) {const video _video.target;if (_video.isIntersecting !video.src) {video.poster video.getAttribute(data-poster);video.src video.getAttribute(data-src);video.load();video.play();}});},{root: document.getElementById(_next),rootMargin: ${threshold}px 0px,});lazyVideos.forEach(function (lazyVideo) {lazyVideoObserver.observe(lazyVideo);});} else {lazyVideos.forEach(function (video) {video.src video.getAttribute(data-src);video.poster video.getAttribute(data-poster);video.load();});}
}组件按需加载
如果一个包不合常理地比较大可以看源代码里是否引入了其他不需要的代码需注意lodash / ant-design/Icon。 比如ant-design/icons 最好改成ant-design/icons/lib
了解IntersectionObserver优化懒加载和业务方案思路
Intersection Observer API MDN IntersectionObserver MDN IntersectionObserver API可以帮助我们实现“检测一个元素是否可见或者两个元素是否相交”具体应用于实现图片视频资源懒加载、内容无限滚动、广告曝光埋点等功能。
过去这类边界检测的功能通过getBoundingClientRect()或者scroll事件监听实现它们运行在主线程上频繁的触发会让性能变差而IntersectionObserver提供了一种更加优雅的检测方式它在渲染进程上监听交集事件主线程上异步接受通知并调用回调函数因此有部分人认为IntersectionObserver的回调方法里可以随意写高消耗代码不会影响主线程这种观点是错误的JS代码执行是单线程的因此JS代码的解释执行都在主线程上因此我们在回调函数中也要注意尽量写的简单一些。 MDN———— 请留意你注册的回调函数将会在主线程中被执行。所以该函数执行速度要尽可能的快。如果有一些耗时的操作需要执行建议使用 Window.requestIdleCallback() 方法。 API
// 创建实例创建一个新的 IntersectionObserver观察器 对象当其监听到目标元素的可见部分的比例超过了一个或多个阈值threshold时会执行指定的回调函数。
const observer new IntersectionObserver(callback, option);// 开始观察element1 / 2如果需要观察多个对象可以使用observe方法多次而每个dom节点的交点变动都会触发callback
observer.observe(element1);
observer.observe(element2);
[domsArray].forEach(dobserver.observe(d));// 返回所有观察目标的 IntersectionObserverEntry 对象数组
IntersectionObserver.takeRecords()// 停止观察
observer.unobserve(element);// 关闭观察器
observer.disconnect();new IntersectionObserver(callback, options)
可以将这个交集观察构造函数理解到两个对象一个是根对象窗口对象一个是被观察对象我们要观察的目标callback的触发时间就是当 我们要观察的目标和 窗口对象产生交集的时候。
options 对象可用于控制窗口对象的参数。 root 指定根 (root) 元素用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为null则默认为浏览器视窗。 rootMargin 根 (root) 元素的外边距。类似于 CSS 中的 margin 属性比如 “10px 20px 30px 40px” (top、right、bottom、left)。如果有指定 root 参数则 rootMargin 也可以使用百分比来取值。该属性值是用作 root 元素和 target 发生交集时候的计算交集的区域范围使用该属性可以控制 root 元素每一边的收缩或者扩张。默认值为四个边距全是 0。 threshold 触发的阈值设定。可以是单一的 number 也可以是 number 数组target 元素和 root 元素相交程度达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。 如果你只是想要探测当 target 元素的在 root 元素中的可见性超过 50% 的时候你可以指定该属性值为 0.5。如果你想要 target 元素在 root 元素的可见程度每多 25% 就执行一次回调那么你可以指定一个数组 [0, 0.25, 0.5, 0.75, 1]。默认值是 0 (意味着只要有一个 target 像素出现在 root 元素中回调函数将会被执行)。该值为 1.0 含义是当 target 完全出现在 root 元素中时候 回调才会被执行。 如果 isIntersecting 为真target 元素的至少已经达到 thresholds 属性值当中规定的其中一个阈值如果为假则 target 元素不在给定的阈值范围内可见。 现在假如我的观察目标对象设置为某个视频想要让它懒加载通过这个懒加载方案来理解上述属性吧。
Q1想要实现每次视频的可见程度75%的时候播放可见程度25%的时候暂停这种效果怎么办呢
可见程度75%则 不可见程度25%可以将threshold设定在0.25这个点即可见程度25%或者不可见程度25%的时候它都会触发一次回调函数具体的判断可以使用观察器对象的intersectionRatio属性这个属性是当前目标在窗口中的可见比例。 PS0.25这个属性对左右方向的进入视窗也同样成立。
Q2我不想在视频进入视窗内才开始加载能不能提前200px加载呢
可以。修改rootMargin为200px 0即可即将视窗口 上下 各加长200px这时滚轮上下滑动视频提前了200px触及视窗也就提前了200px加载。
Q3threshold和rootMargin是什么关系呢
我能不能达到视频在视窗口提前200px加载而在到达视窗被我们看到的时候播放呢 答案是不能。 我经过尝试发现当使用rootMargin让视窗扩大的同时它的交集区域也在扩大曾经我们rootMargin默认是窗口大小的时候threshold设置成0就可以在用户看到的同时调用回调函数。但是rootMargin设置成200px 0时threshold设置仍然为0此时触发回调函数的时候视频还在视窗的上200px呢。所以“视频什么时候达到视窗”的这个阶段也就无法估计了。无法得知200px和视频大小和视窗长度之间的关系因此无法算出比例。 不过想想就算达到200px时提前加载和播放实际上也能达到我们想要的效果大差不差吧。
callback回调函数与使用
其实搞懂了option基本上就搞懂了这个观察API。但是callback中传入给我们的“目标对象”还经过了一些观察者的包装有很多我们可以用的上的属性。
// 简单使用
const callback (entries, observer) {// entries被观察的目标对象数组。entries.forEach(entry {// Each entry describes an intersection change for one observed target element:// entry.boundingClientRect // 目标对象在视窗内的top / bottom / left / right等距离。// entry.intersectionRect // 同上类似用的不多没有仔细研究。// entry.intersectionRatio // 目标对象在视窗内的交集比例。用的比较多// entry.isIntersecting // 当前目标是否视窗内可见达到设定的阈值// entry.rootBounds // 边界检测// entry.target // 当前目标的DOM节点实例。底下当时传入观察的element1// entry.time});
};const observer new IntersectionObserver(callback, option);
observer.observe(element1);
最后实际使用。
我们重新修改了上面的lazyloadVideo方法目的在于希望视频在25%这个节点再去播放不可见75%的时候暂停这样节省一些内存消耗。 当然这个函数还有改进的空间比如一个多视频的页面当用户快速滑下上一批视频还未加载完的情况将阻塞后续的视频加载这时候需要取消上一批不可见视频的加载腾出空间给下一批这个后续再安排吧。
/** * - video data-src{src} data-poster{poster} autoPlay playsInline loop muted/* param {number} rootMarginY 上下方向 视口窗的扩张/收缩距离* param {number} rootMarginX 左右方向 视口窗的扩张/收缩距离* param {number|string} threshold 视频的可见程度提醒断点*/function VideoLazyLoad(rootMarginY 150, rootMarginX 0, threshold) {function videoLoaded(video) {return video.getAttribute(src);}const lazyVideos [].slice.call(document.querySelectorAll(video[data-src]));if (IntersectionObserver in window) {let lazyVideoObserver new IntersectionObserver(function (entries, observer) {entries.forEach(function (_video, _index) {const video _video.target;const videoPlaying video.currentTime 0 !video.paused !video.ended video.readyState video.HAVE_CURRENT_DATA;if (!_video.isIntersecting videoLoaded(video) videoPlaying) {video.pause();}// 可见度0-2 先配置视频封面视频不允许播放。if (_video.intersectionRatio 0 _video.intersectionRatio 0.25) {if (!video.getAttribute(poster)) {if (video.getAttribute(data-poster)) {video.poster video.getAttribute(data-poster);} else {video.src video.getAttribute(data-src);}}if (videoLoaded(video) videoPlaying) {video.pause();}}if (_video.intersectionRatio 0.25) {if (videoLoaded(video)) {video.play();} else {if (!video.getAttribute(poster)) {video.poster video.getAttribute(data-poster);}video.src video.getAttribute(data-src);video.load();video.play();}}});},{root: document.getElementById(_next),rootMargin: ${rootMarginY}px ${rootMarginX}px,threshold: threshold ?? [0, 0.25],});lazyVideos.forEach(function (lazyVideo) {lazyVideoObserver.observe(lazyVideo);});} else {lazyVideos.forEach(function (video) {video.src video.getAttribute(data-src);video.poster video.getAttribute(data-poster);video.load();});}
}——————————————
下方内容新更新于2024-02-07
——————————————
针对性能分析指标进行项目优化
通过Chrome提供的lightHouse / performace等工具以及第三方性能检测工具比如gtmetrix等都可以给到我们一些建议指标。
对于项目的进一步优化除了之前已经提过很多次的懒加载、媒体资源压缩、webpack分包优化等等其实我们也可以根据报告对某个指标进行优化。
TTL
一些第三方资源请求太多阻碍了主要网页资源请求造成TTL很高打开列表一看全是第三方资源。 于是有以下几个措施
对于第三方资源进行延迟加载需要用户对页面进行交互才开始下载资源新增对用户交互行为的监听以及创建变量一些非首屏的懒加载方案同样可以使用。合理分包减少请求大小、合并小资源请求减少请求数量。做好缓存处理。
CLS
查看是什么DOM节点造成的页面重排CLS指标偏高。图片设置好宽高。
