陪玩游戏源码,首屏耗时优化方法尽在掌握
陪玩游戏源码,首屏耗时优化方法尽在掌握
前段时间在做业务首屏耗时优化的技术需求,目标是将首屏耗时降至1200ms以下。过程中用到了一些方法,这里来总结一下在优化时使用到的一些方法:
如果陪玩游戏源码首屏加载时有请求时,首屏渲染可能需要等待请求完成,那么请求耗时将会影响首屏耗时。
解决方法:将首屏的请求改成直出时请求,多个请求的改为并行(Promise.all)。
预计每个请求耗时可减少100ms左右。
1.2 dom变化
如果在直出页面时发现首屏耗时大大高于内容解析结束的时间,那么可以考虑是不是首屏渲染结束后,又发生了dom变化,如:元素位置偏移、新元素显示。
可以看下首屏元素是否用了v-if、v-model,且控制的参数在首屏加载过程中发生了变化。
使用v-if代替 v-show,减少首屏渲染dom数量(除非是一些会频繁变换显隐的元素还是使用v-show)
包括路由懒加载和组件懒加载
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'), }, ...
(这个方法从结果上来看,优化效果较小)
降低包的大小,可以减少加载包的耗时。
删除无用的代码
减小图片的大小
以上就是陪玩游戏源码,首屏耗时优化方法尽在掌握, 更多内容欢迎关注之后的文章