動圖更精彩
背景
Vue作為大前端開發頁面交互，在數字屏，智慧大屏等大屏幕開發過程中，輪播效果作為豐富的展示組件經常作為首選。但也因為這個組件的交互體驗很好，于是各種單點組件增加到輪播效果里。經過業務的擴展，人員的更迭。輪播組件的節點呈現爆炸的增長，而客戶使用方還覺得不滿足，于是在節點暴增，節點業務豐富的情況下瀏覽器和webview等移動瀏覽器的渲染性能就更不上了，于是就有了白屏，花屏，黑屏，卡頓嚴重等等異常的畫面現象。問題的現象和原因大家都知道，但產品方、甲方、使用方、開發方等等多方面的拉扯優化方向遲遲無法落地，因此需要用demo來驗證性能的優化對比，達到可對比，可測量，可驗證。
Vue頁面源碼如下：
<template><div class="player-box"><!-- 封面輪播 --><transition name="fade"><imgv-if="showCover":src="list[index].cover"class="cover"@click="play"/></transition><!-- 視頻 --><videov-show="!showCover"controlspreload="auto"ref="videoRef"class="video":src="list[index].video"@ended="onEnded"@error="onEnded"@loadstart="onLoadStart"/></div>
</template><script>
import coverFiles from '@/assets/covers.json';
// import videoFiles from '@/assets/videos.json';export default{name: 'SwipeCoverVideoCarousel6',data(){return{covers:coverFiles,list:[{ cover: 'https://picsum.photos/640/360?random=1', video: 'https://www.w3schools.com/html/mov_bbb.mp4' },{ cover: 'https://picsum.photos/640/360?random=2', video: 'https://www.w3schools.com/html/movie.mp4' },{ cover: 'https://picsum.photos/640/360?random=3', video: 'https://www.w3schools.com/html/mov_bbb.mp4' },{ cover: 'https://picsum.photos/640/360?random=2', video: 'https://www.w3schools.com/html/movie.mp4' },],index:0,showCover:true}},mounted(){
// 首條自動播放this.$refs.videoRef.muted = true;this.$refs.videoRef.play();},methods:{
/* 3. 播放：隱藏封面 + 讓視頻真播放 */play() {console.log('play called!');this.$refs.videoRef.play()
},onLoadStart(){console.log('onLoadStart called!');this.showCover = false},/* 4. 視頻結束：回到封面 → 3 秒后切下一張 → 如果還有就自動再播 */onEnded() {console.log('onEnded called!');this.showCover = true // 1. 回到封面setTimeout(() => {this.index = (this.index + 1) % this.list.length // 2. 輪播下一張console.log('輪播下一張 called!');this.$nextTick(() => this.play())// 3. 自動播放下一條視頻}, 3000)
}},}</script><style scoped>
.player-box {position: relative;width: 640px;height: 360px;margin: 40px auto;overflow: hidden;
}
.cover,
.video {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;cursor: pointer;
}
/* 淡入淡出 */
.fade-enter-active,
.fade-leave-active {transition: opacity 0.4s;
}
.fade-enter-from,
.fade-leave-to {opacity: 0;
}
</style>
當然這個優化方案大概率是接受不了的，不過這個作為一個極限單節點方案作為提高渲染性能的對比的標的還是很有必要的
性能參數：
業務組件節點數：2
渲染性能：很好
Vue節點優化大綱
推薦理由
postman在國內使用已經越來越困難：
1、登錄問題嚴重
2、Mock功能服務基本沒法使用
3、版本更新功能已很匱乏
4、某些外力因素導致postman以后能否使用風險較大
5、postman會導致電腦卡頓，而且使用的功能越多越慢，尤其是win電腦，太讓人郁悶了
出于以上考慮因此筆者自己開發了一款api調試開發工具SmartApi，滿足基本日常開發調試api需求
SmartApi
win版本不大于1M；運行消耗性能極低
macos 版本不大于100M；運行消耗性能極低
非常適合開發設備或性能有限的開發環境
SmartApi只為開發服務
官網地址SmartApi
http://www.smartapi.site/
