关注IMWeb前端社区公众号

  • 第一时间获得最新、最火的技术干货
  • 定期推送您所关注的专题文章
  • 和大牛们一起讨论前端技术
  • 获取IMWeb社区、前端相关的最新活动
热文 更多

  • 小程序官方同构方案Kbone分析

    这篇分析,可能微信的同学来写会更合适。这里只是做了次体验,记录体验中遇到的问题以及一些想法。 简介 kbone 主要提供了编写 web 端代码,编译到小程序端的能力。 web 端采用的框架是 vue ,然后提供一个适配层在小程序端适配 web 端代码。详细介绍参考: https://github.com/wechat-miniprogram/kbone/blob/develop/README.md [https://github.com/wechat-miniprogram/kbone/blob/develop/README.md] 原理 BUILD阶段 kbone 提供了一个 webpack 插件,该插件在 vueLoaderPlugin 处理后继续处理 chunk ,添加小程序端特定方法的封装,以及 window 和 document 的注入,小程序端配置的注入。 RUNTIME阶段

  • 前端学Serverless系列--性能调优

    导语:Serverless云函数的优点是不怕高并发,理论上无限自动扩容,缺点是冷启动特性导致冷启动的时延比较高。那么实际上性能如何,并且是否还有性能优化的空间和手段呢? 最近试点Serverless的一个项目是从原有的node服务迁移到腾讯云函数Serverless的。既然是项目迁移,那么就要对比一下迁移前后的性能了。 压测方案 从测试同事那很快就找到压测大师这个工具,压测大师配置和报告都还算比较完善,是腾讯出的,内部的话用企业微信登录直接免费可以使用。 缺点是:发请求的时间间隔有限制,最大只能隔1分钟,那就无法纯测试云函数的冷启动了,不过每个阶段都有自动增加人数,页能间接测试到冷启动到性能,看到测试结果时不时飙升到高耗时,那就多数就是冷启动的耗时冷。 压测大师链接: https://wetest.qq.com [https://wetest.qq.com]

  • 前端工程师征服树形组件的秘籍

    前言 树形组件的需求,很多人遇到都觉得头疼、逻辑复杂,除了展示之外,还要有增删该查的逻辑。一般树形组件具有多个层级,如果当前层级有下一个层级,会有像 children、list 等属性,数据结构一般就是 const tree = [ { name: 'a', id: 1, }, { name: 'b', id: 2, children: [ { name: 'c', id: 3 } ] }, ] 界面大概就是这种: [https://user-gold-cdn.xitu.io/2019/7/21/16c13247c92936fa?w=908&h=502&f=png&s=108344]

  • 复杂帧动画之移动端video采坑实现

    在企鹅辅导品牌页中,我们需要实现一个动画如下: 页面滚动到动画区域,播放动画, 对应动画部分如下: 帧动画当前的实现有以下几种方式: 1. GIF 动画 大家比较熟悉的图片格式 1. lottie [http://airbnb.io/lottie/#/] Airbnb 开源项目,通过解析 AE 动画为 json 数据,支持跨平台的动画效果解决方案;lottie 在辅导中已经有实际应用,使用过的同学都表示对其实现效果和开发速度表示称赞和推荐,如果你还不了解 lottie, 推荐 lottie 系列学习文章, 请戳我 [https://imweb.io/topic/5b23a745d4c96b9b1b4c4efc] 1. APNG (Animated Portable Network Graphics) 基于 PNG 格式扩展的一种动画格式,增加了对动画图像的支持,其诞生是为了替代老旧的 GIF 格式,但部分浏览器不支持,需要考虑兼容; 1. HTML video 元素

  • 小程序textarea与弹窗

    前言 在小程序 textarea 组件上展示一个模态弹窗组件,会发现 textarea 中输入的文字内容,会直接穿透模态弹窗显示在最上面,而且还能点击输入文字。 限制 小程序 textarea 是由客户端创建的原生组件,由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制: * 原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。 * 后插入的原生组件可以覆盖之前的原生组件。 * 原生组件还无法在 picker-view [https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html] 中使用。 * 基础库 2.4.4 以下版本,原生组件不支持在 scroll-view [https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html] 、 swiper

热问 更多