企业官网建设流程全解析

王悦做网站,网站建设责任分工,网站内容填写,山东做网站公司哪家好前端性能直接影响用户体验和业务指标。本文将从多个维度介绍前端性能优化的实践方法。 1 资源加载优化 // 图片懒加载实现 const imageObserver new IntersectionObserver((entries, observer) {entries.forEach(entry {if (entry.isIntersecting) {const img en…前端性能直接影响用户体验和业务指标。本文将从多个维度介绍前端性能优化的实践方法。1 资源加载优化// 图片懒加载实现constimageObservernewIntersectionObserver((entries,observer){entries.forEach(entry{if(entry.isIntersecting){constimgentry.target img.srcimg.dataset.src img.classList.remove(lazy)observer.unobserve(img)}})})document.querySelectorAll(img[data-src]).forEach(img{imageObserver.observe(img)})// 关键资源预加载constpreloadResource(url,as){constlinkdocument.createElement(link)link.relpreloadlink.asaslink.hrefurl document.head.appendChild(link)}// 预加载重要资源preloadResource(/assets/critical.css,style)preloadResource(/assets/main.js,script)2 代码分割与懒加载// Vue路由懒加载constroutes[{path:/home,component:()import(/views/Home.vue)},{path:/about,component:()import(/views/About.vue)}]// 组件懒加载exportdefault{components:{HeavyComponent:()import(/components/HeavyComponent.vue)}}// Webpack魔法注释优化打包constHome()import(/* webpackChunkName: home *//* webpackPrefetch: true *//views/Home.vue)3 渲染性能优化// 虚拟列表实现exportdefault{name:VirtualList,props:{items:Array,itemHeight:Number,windowHeight:Number},data(){return{scrollTop:0}},computed:{visibleItems(){conststartIdxMath.floor(this.scrollTop/this.itemHeight)constvisibleCountMath.ceil(this.windowHeight/this.itemHeight)constendIdxstartIdxvisibleCountreturn{startIdx,endIdx,offsetY:startIdx*this.itemHeight,visibleData:this.items.slice(startIdx,endIdx)}}}}