万宁市网站建设_网站建设公司_Bootstrap_seo优化

背景问题：
需要优化首屏加载速度。

方案思考：
通过资源优先级、代码分割等方式优化首屏加载。

具体实现：
首屏加载优化工具：

// utils/first-screen-optimizer.js// 首屏优化工具exportclassFirstScreenOptimizer{constructor(){this.resourcePriorities=newMap()this.loadTimes={}}// 设置资源优先级setResourcePriority(url,priority='high'){this.resourcePriorities.set(url,priority)// 根据优先级预加载资源if(priority==='high'){this.preloadResource(url)}}// 预加载资源preloadResource(url){if('connection'innavigator&&navigator.connection.effectiveType.includes('2g')){// 在慢速网络中不预加载return}constlink=document.createElement('link')link.rel='preload'link.as=this.getResourceType(url)link.href=url document.head.appendChild(link)}// 根据URL判断资源类型getResourceType(url){if(url.endsWith('.js'))return'script'if(url.endsWith('.css'))return'style'if(url.match(/\.(png|jpg|jpeg|gif|svg|webp)$/))return'image'if(url.match(/\.(woff|woff2|ttf|otf)$/))return'font'return'fetch'}// 延迟非关键资源加载deferNonCriticalResources(){// 延迟非关键CSSconstnonCriticalStyles=document.querySelectorAll('link[rel="stylesheet"][media="print"]')nonCriticalStyles.forEach(link=>{setTimeout(()=>{link.media='all'},3000)// 3秒后加载非关键CSS})}// 优化图片加载optimizeImages(){// 为图片添加 loading="lazy" 属性constimages=document.querySelectorAll('img[data-src]:not([loading])')images.forEach(img=>{img.setAttribute('loading','lazy')img.setAttribute('decoding','async')})}// 资源加载时间追踪trackResourceLoad(resource,startTime){this.loadTimes[resource]=performance.now()-startTime}// 获取首屏加载报告getFirstScreenReport(){constnavigation=performance.getEntriesByType('navigation')[0]constpaintMetrics=performance.getEntriesByType('paint')constfirstPaint=paintMetrics.find(entry=>entry.name==='first-paint')constfirstContentfulPaint=paintMetrics.find(entry=>entry.name==='first-contentful-paint')return{dnsTime:navigation.domainLookupEnd-navigation.domainLookupStart,connectTime:navigation.connectEnd-navigation.connectStart,responseTime:navigation.responseEnd-navigation.responseStart,domContentLoaded:navigation.domContentLoadedEventEnd,firstPaint:firstPaint?.startTime,firstContentfulPaint:firstContentfulPaint?.startTime,loadComplete:navigation.loadEventEnd,resourceLoadTimes:this.loadTimes}}// 执行首屏优化asyncoptimize(){// 1. 优化图片this.optimizeImages()// 2. 延迟非关键资源this.deferNonCriticalResources()// 3. 预加载关键资源constcriticalResources=['/api/config',// 关键配置'/fonts/main.woff2'// 关键字体]criticalResources.forEach(resource=>{this.setResourcePriority(resource,'high')})}}exportconstfirstScreenOptimizer=newFirstScreenOptimizer()

首屏骨架屏：

<!-- components/SkeletonScreen.vue --> <template> <div v-if="loading" class="skeleton-screen"> <div class="skeleton-header"> <div class="skeleton-avatar skeleton-item" /> <div class="skeleton-title skeleton-item" /> <div class="skeleton-subtitle skeleton-item" /> </div> <div class="skeleton-content"> <div class="skeleton-line skeleton-item" v-for="i in 5" :key="i" /> </div> <div class="skeleton-actions"> <div class="skeleton-button skeleton-item" /> <div class="skeleton-button skeleton-item" /> </div> </div> <slot v-else /> </template> <script setup> import { defineProps } from 'vue' defineProps({ loading: { type: Boolean, default: true } }) </script> <style scoped> .skeleton-screen { padding: 20px; } .skeleton-item { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-header { display: flex; align-items: center; margin-bottom: 20px; } .skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; } .skeleton-title { height: 24px; width: 120px; margin-right: 8px; } .skeleton-subtitle { height: 18px; width: 80px; } .skeleton-content { margin-bottom: 20px; } .skeleton-line { height: 16px; margin-bottom: 12px; width: 100%; } .skeleton-line:last-child { width: 70%; margin-bottom: 0; } .skeleton-actions { display: flex; gap: 12px; } .skeleton-button { height: 32px; width: 60px; border-radius: 4px; } </style>

首屏优化组合函数：

// composables/useFirstScreenOptimization.jsimport{onMounted}from'vue'import{firstScreenOptimizer}from'@/utils/first-screen-optimizer'exportfunctionuseFirstScreenOptimization(){// 在组件挂载时执行首屏优化onMounted(()=>{firstScreenOptimizer.optimize()})// 返回报告方法return{getReport:()=>firstScreenOptimizer.getFirstScreenReport()}}