性能优化
1.webpack打包文件体积过大?(最终打包为一个js文件)
2.如何优化webpack构建的性能
3.移动端的性能优化
4.Vue的SPA 如何优化加载速度
5.移动端300ms延迟
6.页面的重构
所有的知识点都有详细的解答,我整理成了280页PDF《前端校招面试真题精编解析》。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
1.下载插件
cnpm install hls.js flv.js
导入项目
import Hls from 'hls.js'
import flvjs from 'flv.js'
使用
<script setup>
// m3u8格式视频使用变量
const player = ref(null)
const video = ref(null)
// flv格式视频使用
const videoRef = ref(null)
let flvPlayer = null
// 这个变量用来判断是哪个格式视频就进入哪个(默认m3u8)
let flag = ref(true)
onUnmounted(() => {
// 在页面刚加载就显示视频
// 这个是视频链接
// m3u8地址:https://gc2ksc.v.kcdnvip.com/gc/zsslsjjfsd\_1/index.m3u8?BR=md®ion=shanghai
// flv地址:http://video.epaper.pybtv.cn:8080/live/rtmp\_live\_demo.flv
// 固定链接
let videosrc = ref("http://video.epaper.pybtv.cn:8080/live/rtmp\_live\_demo.flv")
// 下面是通过请求获得的链接(动态显示)
// let videosrc = ref(gameScreenList.gameInfo.live\_event)
// 截取链接,判断是什么格式的视频(判断格式让对应显示)
flag.value = videosrc.value.includes(".m3u8")// 只能返回true或者false
gameScreenList.gameLivePlayFlag = false
if (flag.value) {
if (Hls.isSupported()) {
var hls = new Hls()
hls.loadSource(videosrc.value)
hls.attachMedia(video.value)
hls.on(Hls.Events.MANIFEST\_PARSED, function () {
video.value.play()
})
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.value.src = videosrc.value
video.addEventListener('loadedmetadata', function () {
video.value.play()
})
}
} else {
// 创建 FLV 播放器实例
flvPlayer = flvjs.createPlayer({
type: 'flv',
### 性能优化
1.webpack打包文件体积过大?(最终打包为一个js文件)
2.如何优化webpack构建的性能
3.移动端的性能优化
4.Vue的SPA 如何优化加载速度
5.移动端300ms延迟
6.页面的重构
**所有的知识点都有详细的解答,我整理成了280页PDF《前端校招面试真题精编解析》。**
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/20210323221732119.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20210323221747467.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM=,size_16,color_FFFFFF,t_70)