前端 - 官网首页首屏播放视频如何优化？快速加载不卡顿？
有个视频大概10M.我希望用户首屏能看到。现在我的逻辑是先下载完成，这样能保证流畅播放。但是发现，下载时间受网络影响，大概需要6s。领导不满意。我不知道应该如何去优化了。如果使用默认自动播放，那用户网速慢的话。会加载卡顿不流畅。
共有3个答案
10M视频不算大。
- 放在CDN上
- 可以试试压缩+降低分辨率
- 可以试试把视频文件分片，然后同时下载多个分片。加载了一个分片就能开始播放了，和下载其他分片了。
压缩成H.264可以用FFmpeg进行压缩，视频没加载完的时候可以截取视频的第一帧作为背景图，把视频文件部署在内容分发网络（CDN）上，这些方法都算比较常用的手段
CDN呗，一般自己服务器的带宽会有限制，所以CDN的话会快很多。
另外就是直接播放就行了，带宽足够的情况下 10M 的视频基本上不会卡顿的（特别是在你给领导演示或者领导自己看的时候）。
-
本文向大家介绍vue如何优化首页的加载速度？相关面试题，主要包含被问及vue如何优化首页的加载速度？时的应答技巧和注意事项，需要的朋友参考一下 补充下2楼： ssr直出， webpack压缩HTML/CSS/JS， 首屏css单独提取内联， 关键资源Proload， 图片：不缩放，使用webp、小图片base64，iconfont， gzip, dns-prefetch， 静态资源单独域名，去掉c
-
本文向大家介绍浅谈vue首屏加载优化，包括了浅谈vue首屏加载优化的使用技巧和注意事项，需要的朋友参考一下 本文介绍了浅谈vue首屏加载优化，分享给大家，具体如下： 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-
-
本文向大家介绍浅谈VUE单页应用首屏加载速度优化方案，包括了浅谈VUE单页应用首屏加载速度优化方案的使用技巧和注意事项，需要的朋友参考一下 单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方（如OSS），减小服务器压力 按需加载三方资源，如iview,建议按需引入iview中的组件 使
-
本文向大家介绍详解vue项目首页加载速度优化，包括了详解vue项目首页加载速度优化的使用技巧和注意事项，需要的朋友参考一下 凡是做SPA的项目，特别是移动端的SAP项目，首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉，如果各位有更好的方案，不吝赐教。 1: 针对第三方js库的优化 我们项目里用到的第三方js库主要有：vue, vue-router,
-
面试被问到首屏性能优化，回答了fcp指标以及一系列的措施，但是面试官反问道用骨架屏或者背景图其实也可以解决这个问题，并且举例一般把首屏接口的响应时间作为指标会更好一些，并细化到优化到多少毫秒，这部分应该如何去回答以及如何监测首屏接口的响应时间需要用到哪些指标，并如何优化解决
-
本文向大家介绍浅谈Vue SPA 首屏加载优化实践，包括了浅谈Vue SPA 首屏加载优化实践的使用技巧和注意事项，需要的朋友参考一下 写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案！ 我们以 vue-cli 工具为例，使用 vue-router 搭建SPA应用，UI框架选用 element-ui ， ajax方案选用 axios, 并引入vuex ，使用 vu