Vue 动画性能优化

在使用 JS 来实现动画的场景下,需要频繁的操作 DOM,如果使用 Vue 的数据响应式更新去做,会比直接使用原生 JS 操作 (element.style.transform) 更加耗时。因为 Vue 在数据更新后,需要更新自身维护的虚拟 DOM 节点,对新旧节点进行对比,再更新视图。使用 Vue 操作动画每轮 requestAnimationFrame 都会去对比新旧节点,更新组件信息,消耗5...

10 个月前 前端 Vue

用 Web Components 实现一个 AppDrawer 组件

Web Components 和 vue、react 都是基于组件化的形式去书写页面。Web Components 的主要作用及特点:可以创建新的 html 标签、扩展 html 标记创建可复用的组件不依赖框架,但是需要浏览器支持,且浏览器自带调试 Web Components 的能力与 Shadow DOM 配合使用更加强大(隔离DOM、作用域CSS、不用担心CSS命名重复)示例:Drawer ...

在 Vue 里使用高阶组件

高阶组件的特点和高阶函数类似,高阶函数接受一个/多个函数作为参数,返回另一个函数,高阶组件则是组件作为参数,返回另外一个组件。只要满足其中2个条件之一即可。高阶组件在一些场景下可以对组件进行复用,增强组件功能,控制渲染的内容。在 Vue 里创建高阶组件:场景1 页面鉴权场景2 复用组件总结Vue 里使用 HOC 没有 React 里用得那么灵活,React 大部分时候是写函数,和高阶组件的契合度高...

11 个月前 前端 Vue

单页应用首屏渲染的想法和实践

记录使用较小的成本换来较好的用户体验和提升页面加载速度,适用场景:web 移动端单页应用,前后端(数据层)分离的项目。白屏在做 Web 移动端项目的时候遇到首屏加载慢的情况,因为页面的渲染都依赖 JS 文件输出,所以就导致需要等待 JS 文件加载完成页面才能被渲染出来。在未加载完 JS 文件的情况下,会导致页面白屏一段时间。解决白屏问题:使用同构框架 / 预渲染插件。让浏览器在加载 JS 文件之前...

实现3D图文粒子化

Demo图片/文字粒子化首先需要取得图片或者文字的像素点,可以将它们绘制到 canvas 上得到它们的像素点,主要使用 getImageData(x, y, width, height) 方法获取。然后通过遍历画布的大小得到每个位置像素点,为了让粒子之间互相有间隔,遍历的时候用一个变量来控制像素点数量,最后再将透明的点(alpha值小于128)过滤掉即可得到最终的像素点。离散动画实现将粒子目标位置...

React Native IOS 开发笔记

记录遇到的问题以及如何解决。问题创建 React Native App 有两种方式, 一种使用 npm install create-react-native-app -g 安装,通过 create-react-native-app 命令来初始化你的应用。特点是:这种方式官方说是不需要安装 Xcode 或者 Android Studio,也不需要配置任何工具来构建代码,只要在手机安装 Expo 客...

Canvas 实现 3D 云朵

页面使用了ES6,必须开启相关的功能才可以看到效果。Chrome 打开 chrome:flags 启用 Experimental Web Platform featuresDemo实现代码...

CSS3 实现全景图浏览效果

Demo实现思路利用 CSS3 做出一个 3D 立方体。在立方体的6个面设置目标图片(利用Pano2VR 或者类似的全景工具导出的图片,一共有6张)。使用perspective、translateZ、transform-style: preserve-3d 等属性改变视图的大小。添加触摸事件改变translateX、translateY的角度数即可实现一个基本的全景图效果。注:页面使用了ES6,浏...