直播系统开发,实现开屏秒开的解决方案

我们第一次下载、打开直播系统时,开屏的加载时间往往都很长,有些直播系统甚至需要缓存几十秒才能加载出正常画面,如何在直播系统开发中缩短首屏打开时间呢?其实导致没有秒开的原因是页面在打包后没有进行相关的配置导致资源文件特别大,想要一次性全部加载出来就会特别耗时。直播系统开发现在直播系统开发中实现开屏秒开,有以下的解决方案一、路由懒加载直播系统首次在使用同步的方式加载组件时,首屏加载会对网络资源加载的比较多,当资源较大的时候,加载的速度就会下降,用户的等待时间就会变长,设置成路由懒加载后,按需加载会加速首屏的渲染。比如用户在看到开屏广告后选择直接跳过,5秒的开屏广告用户在播出1秒后选择跳过,不再加载剩下的4秒内容,能节省不少的资源。按需加载后,除了公共文件,会把每个页面独有的样式和脚本打包成一个单独的文件,这样除了公共文件外,访问一个页面只需要加载该页面需要的文件即可,减少直播系统开发首屏秒开的时间。直播系统开发二、直播系统开发代码包的优化1.去掉编译文件中的map文件,在编译好后,经常会有特别多的.map文件,他们的作用是帮助线上调式代码用,为了避免部署包过大,通常都不生成这些文件2.对项目代码中的JS、CSS文件进行压缩,压缩后为文件体积大约是原来的1/3,同时还能改变部分文件的格式,将文件改为适合直播系统开发用的格式直播系统开发三、合理使用vue的指令1.细分vuejs组件,在直播系统开发过程中把所有的组件布局在一个组件中,当数据变更时,由于组件代码体积较大,vuejs的数据驱动视图更新比较慢,整个图片的渲染也比较慢,体验效果比较差,所以把组件细分,分成轮播组件、列表组件、分类组件等,用户观看哪个页面就加载哪个页面的组件2.减少watch数据,当组件某个数据变更后,需要对应的state进行变更,需要对另外的组件进行state变更。当watch数据变低时,性能消耗不明显;当数据变高时,系统就会出现卡顿,所以需要严格控制watch数据的大小3.内容类系统的图片资源按需加载,和上面的组件分类一样,对内容系统的图片进行分类加载,对数据进行加载显示,减少系统加载的数据整体来说,直播系统开发解决开屏时间过长的方法有很多,运营商可以根据自己的使用场景和资金多少决定使用那种解决方法。声明:以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任


转载请注明:http://www.aierlanlan.com/cyrz/8631.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了