陪玩游戏源码,首屏耗时优化方法尽在掌握

陪玩游戏源码,首屏耗时优化方法尽在掌握
前段时间在做业务首屏耗时优化的技术需求,目标是将首屏耗时降至1200ms以下。过程中用到了一些方法,这里来总结一下在优化时使用到的一些方法:

1.1 首屏请求

如果陪玩游戏源码首屏加载时有请求时,首屏渲染可能需要等待请求完成,那么请求耗时将会影响首屏耗时。
解决方法:将首屏的请求改成直出时请求,多个请求的改为并行(Promise.all)。
预计每个请求耗时可减少100ms左右。
1.2 dom变化

 


如果在直出页面时发现首屏耗时大大高于内容解析结束的时间,那么可以考虑是不是首屏渲染结束后,又发生了dom变化,如:元素位置偏移、新元素显示。
可以看下首屏元素是否用了v-if、v-model,且控制的参数在首屏加载过程中发生了变化。

1.3 减少首屏渲染dom数量

使用v-if代替 v-show,减少首屏渲染dom数量(除非是一些会频繁变换显隐的元素还是使用v-show)

1.4 懒加载

包括路由懒加载和组件懒加载
1.4.1 路由懒加载

{
    path: '/login',
    component: () => import('@aicc/components/login/index'),
}

 

1.4.2 组件懒加载

不直接显示的组件做懒加载,减少陪玩游戏源码完成首屏渲染时需加载的代码量

优化前:

 import pageComponent from './pageComponent'
​
 export default {
   name: 'Recharge',
   components: {
     pageComponent,
   },
 ...

 

优化后:

export default {
   name: 'Recharge',
   components: {
     pageComponent: () => import('./pageComponent'),
   },
 ...

 

(这个方法从结果上来看,优化效果较小)

1.5 减少包体积

降低包的大小,可以减少加载包的耗时。

删除无用的代码
减小图片的大小

以上就是陪玩游戏源码,首屏耗时优化方法尽在掌握, 更多内容欢迎关注之后的文章

posted @ 2025-03-15 14:21  云豹科技-苏凌霄  阅读(16)  评论(0)    收藏  举报