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

陪玩游戏源码，首屏耗时优化方法尽在掌握
前段时间在做业务首屏耗时优化的技术需求，目标是将首屏耗时降至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 减少包体积

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

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

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