vue中弹幕实现及优化

起因： 活动需求需要使用弹幕的形式展示内容
解决：首先是找到一个vue-baberrage
然后使用起来看起来也没有什么问题，最后当我打开浏览器rendering的paint flash发现重绘严重

最后找到一个vue-danmaku 组件，发现不会频繁重绘

定位：弹幕移动使用transform改变位置，并使用will-change进行优化

will-change属性通过告诉浏览器什么属性、什么元素将会发生变化，可以对这些操作进行可能性的优化，由此提高CSS动画的执行效率

大量的节点动画渲染可以选择canvas或者webgl进行开发，作者太菜了，暂时还不太会

声明： 作者不是这两者的开发者，只是使用者，如有错误，欢迎指出

vue中弹幕实现及优化相关推荐

Vue中常见的性能优化
编码优化 1. 不要将所有的数据都放到 data 中,data 中的数据都会增加 getter 和 setter,又会收集watcher,这样还占内存.不需要响应式的数据我们可以定义在实例上. < ...
Vue中常见的性能优化，项目优化/单页面性能优化,Vue中六大优化方案
1.编码优化 1. 下里将所有的数据都放在data中,data中的教据都会增加getter和setter,会收集对应的watcher 2. vue在v-for时给每项元素绑定事件需要用事件代理 3. ...
vue中SEO（搜索引擎优化）
说道SEO我们都知道是搜索引擎的优化. SEO 它会利用搜索引擎的规则让网站排名提高靠前,让网站中更多的页面被搜索引擎收纳. 内容为王,外链为帝,用户体验为皇. 优化原则改良和规范网站设计的作用,使 ...
vue中使用keep-alive来优化网页性能
作用:每次切换到某个组件的时候,该组件的mounted钩子函数都会执行,结果就是每次都会发ajax请求,浪费性能.为了解决这个问题,使用keep-alive可以在第二次切换组件的时候使用缓存数据,不会 ...
什么是seo、vue中如何优化seo ？
目录 1.1- SEO的概念 1.2- SEO的用途 1.3- 优化SEO的两类方式黑帽白帽 1.4-具体实现(以白帽为例) 1.5 vue中如何给SPA做SEO 1.1- SEO的概念 SEO ...
Vue 中使用externals和CDN来优化项目的体积
Vue 中使用externals和CDN来优化项目的体积 externals是webpack中的一个配置文档说明主要是为了防止项目在打包的时候,将一些通过import引入的包也一起打包到bundl ...
vue中watch的用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
JS每日一题:Vue中的diff算法？
20190125 Vue中的diff算法? 概念: diff算法是一种优化手段,将前后两个模块进行差异对比,修补(更新)差异的过程叫做patch(打补丁) 为什么vue,react这些框架中都会有di ...

vue中弹幕实现及优化

vue中弹幕实现及优化相关推荐

最新文章

热门文章