上海网站建设在线,网页设计图片自动切换,通用搭建网站教程,苏州工业园区公共资源交易中心优化的目的是展示更快、交互响应快、页面无卡顿情况。 1 性能指标 2 分析方法
使用 ChromeDevTool 作为性能分析工具来观察页面性能情况。其中Network观察网络资源加载耗时及顺序#xff0c;Performace观察页面渲染表现及JS执行情况#xff0c;Lighthouse对网站进行整体评分…优化的目的是展示更快、交互响应快、页面无卡顿情况。 1 性能指标 2 分析方法
使用 ChromeDevTool 作为性能分析工具来观察页面性能情况。其中Network观察网络资源加载耗时及顺序Performace观察页面渲染表现及JS执行情况Lighthouse对网站进行整体评分找出可优化项。
DOM的解析受JS加载和执行的影响找到最长请求路径文件的耗时尽量对JS进行压缩、拆分处理HTTP2下能减少 DOMContentLoaded 时间。图片、视频、iFrame等资源会阻塞 onload 事件的触发需要优化资源的加载时机尽快触发onload。
页面LCP触发时间较晚且出现多次布局偏移则会影响用户体验需要尽早渲染内容和减少布局偏移。页面 Long Tasks 较多则需要对 JS进行合理拆分和加载减少 Long Tasks 数量特别是影响 DCL 和 onload 的 Task。
3 优化加载耗时
3.1 JS 资源
JS 资源根据是否参与首屏渲染将影响 DOM 解析的 JS 资源划分为关键 JS采用拆分处理进行优化和非关键 JS采用延迟异步加载进行优化。
使用 webpack-bundle-analyzer如果是vite项目推荐使用rollup-plugin-visualizer进行打包分析关键 JS 文件数量和体积。优化近乎一半的关键 JS 文件体积。
首先配置正确的spliteChunks规则不能简单的依靠 miniChunks 规则比如miniChunks等于3则会将某个页面使用三次的也打进去对于所有页面都会加载的公共文件vendor.js第三方根据业务具体的需求使用cacheGroups的test方法提取不同页面和组件都有的共同依赖包括utils/log/api到vendor中。而剩下的公共依赖新增一个common.js提高 miniChunks 的阈值比如20保证打包到common.js的是大多数页面的公共依赖提供缓存利用率。 然后是按需加载组件优化前存在require 来加载 svg 图片会导致 webpack 将 require 文件夹内的内容一并打包导致页面图标组件冗余可以通过配置 babel 的依赖加载路径调整 Icon 的引入方式通过 import { FireToTop } from components/Icons 进行按需引入。
对业务组件进行代码分割code splitting考虑对不在首屏的页面组件进行拆分再延迟加载减少业务代码 JS 大小和执行时长使用React 官方提供的React.lazy实现。 还可以用到Tree Shaking用于描述移除 JavaScript 上下文中的未引用代码(dead-code)的行为。它依赖于 ES2015 中的 import 和 export 语句用来检测代码模块是否被导出、导入。 优化即对于引用到的包/模块/方法等tree Shaking 检查时会进行删除。可以给引入的包/模块不是用来做 ponyfill 或 shim 之类 标记为 sideEffects: false 只要它没有被引用到整个模块/包都会被完整的移除以及包和模块中没有被引用部分也会被删除只保留用到的。
非关键JS在弱网环境会成为影响 DOM 解析的因素。对于监控上报灯塔 sdk等非关键JS资源选择延迟加载它或者在其他 JavaScript 之后立即加载或者直到需要时才加载。
3.2 媒体资源图片、视频
首先是使用TinyPng对图片进行多次合理压缩其次对于首屏没有展示的图片或视频等媒体资源借助lazy load库进行懒加载处理而且需要注意懒加载不能阻塞业务的正常展示应该做好超时处理、重试等兜底措施。 其他优化包括将 iframe 的时机放在 onload 之后并设置setTimeout进行异步加载。将原先的image get方式上报埋点数据采取beacon上报的方式。
4 优化页面渲染
直出页面SSR优化通过日志打点、查看 Nginx Accesslog 日志、网关监控耗时发现页面TTFB时间过长的根本原因是SSR 服务器程序和NGW 网关部署和反向代理网关 Nginx 集群不在同一区域导致的网络时延。解决方案是让 NGW网关、反向代理网关 Nginx 集群和SSR 服务器服务机房部署在同一区域即执行对网关 NGW 进行扩容和分布式服务开启就近访问。相较优化前平均耗时140ms左右优化后控制在40ms以内。
页面首屏的关键CSS进行内联优化CSS文件的加载不会阻塞页面解析但会阻塞页面渲染。如果 CSS 文件较大或弱网情况会影响到页面渲染时间影响用户体验。利用 ChromeDevTool 的 More Tools 里的 Coverage 工具录制页面渲染时 CSS 的使用率发现首屏的使用CSS 只不到20%利用 webpack 插件 critters 实现用于内联关键 CSS 并延迟加载其余部分与加载其余完整 CSS 文件进行分离避免首屏页面渲染被 CSS 阻塞。
优化页面视觉稳定性CLS尽量使首屏页面内容相对固定页面元素出现无突兀感避免图标缺失、背景图缺失、字体大小改变或者出现非预期页面元素导致页面抖动解决方案如下1. 确定直出页面元素出现位置根据数据提前做好布局2. 首屏页面的小图可以通过base64处理页面解析的时候就会立即展示3. 减少动态内容对页面布局的影响使用脱离文档流的方式或定好宽高。 5 骨架屏处理
骨架屏Skeleton Screen是指在页面数据加载完成前先给用户展示出页面的大致结构灰色占位图不会造成网页长时间白屏或者闪烁在拿到接口数据后渲染出实际页面内容然后替换掉本质上是界面加载过程中的过渡效果。
image切换
原理使用一张占位骨架图svg / lottie / gif来代替 loading 效果当数据加载完成后对替换掉骨架图。
优缺点优点是实现简单开发成本较低。缺点是维护成本较高对于迭代比较频繁的页面增大UI设计的工作量。
实现 首先使用 preload 提高图片加载优先级让骨架图更早的显示其次需要尽量减少图片的体积以加快加载速度最后由于浏览器对同一域名的请求有并发限制骨架屏的图片尽量放在单独的域名上最后获取数据后隐藏图图片显示真实 DOM 元素。 手动CSS html
原理用 css html 实现一个骨架屏的元素当数据加载完成后替换掉。代表是react-content-loader是利用svg实现的。
优缺点优点是相对image切换实现灵活更易维护由于需要在开发时为每个元素添加背景开发和维护成本仍然较高。
实现通过 animation: loading 2s ease infinite;控制背景移动实现从左到右的进度效果或通过 animation: opacity 2s ease infinite;控制透明度实现渐隐渐现的动画效果获取到数据后去掉 skeleton 选择器. 自动生成css html骨架屏实现
原理借助getBoundingClientRect()方法获取到元素相对于可视窗口的位置以及宽高。通过简化所有元素不考虑结构层级、不考虑样式对所有元素统一用 div 去代替而且在骨架中只需要渲染最后一个层级以定位的方式设置每个元素其相对于视窗的位置形成骨架屏。这样生成的节点是扁平的体积比较小同时避免额外的读取样式表而且不需要通过抽离样式维持骨架屏的外观使得骨架屏的节点更可控。该方法生成的骨架屏是由纯 DOM 颜色块拼成的。
优缺点优点是自动化降低重复编写骨架屏代码的成本缺点是对于复杂的页面可能受元素定位的影响较大自动生成的时候存在不确定性。另外只能是首次加载对于加载完成后用户触发的动态数据不支持生成骨架屏。可以结合前面的手动CSS html配合为动态数据生成。
实现
