关键渲染路径优化

天下武功唯快不破,页面加载速度与用户体验息息相关,也关乎企业收益:最知名的当属 Amazon 加载速度每增加一秒一年少赚 16 亿美刀的例子(还是 N 年前的统计),真是应验那句话:

时间 == 金钱!

对此 Google Developer 专门有一篇文章用于阐述页面载入速度的重要性,此外还专门做了个工具,用于展示页面加载速度与收益关系。除了说,他们也这么做了: Google 直接把页面速度纳为搜索排名的指标。

关键渲染路径优化

Read More »

视差长图 H5 实践

需求场景

主人公行走路过几个城市,沿途展示城市风貌与特色建筑,随着其前进周边的场景物体开始出现动画,若主人公后退则周围场景进行倒序消失的动画,具体表现与正序或倒序播放一段影片类似。除了出现动画外,场景物体由于层级景深不同,运动速度不同,即产生视差效果。

Read More »

移动端视频播放踩坑

H5 中很多场景交互较少强调动画展示的场景都可以借助视频实现,而且能够实现 100% 视觉还原😝,对于设计师来说最终呈现效果可控,对开发来说极大地降低了工作量,运营因为工期减少也会开心,简直是一石三鸟的事情!不过移动端 video 还是有很多坑的,以下是我做的一点调研。

Read More »

函数式编程

什么是函数式编程

"函数式编程"是一种编程范式(programming paradigm),就如我们熟知的"面向对象编程"与“面向过程编程”,也就是如何编写程序的方法论。至于为什么要学习函数式编程还不是自己找不到对象嘛!(大雾)。

Read More »

前端动画交互类优化

前端优化是个很广泛的命题,铺开去得出本书了(事实上我也没那本事),实际上市面上也有很多相关的书籍。动画与交互上的性能问题最容易被察觉,特别是在机能较低的移动端。由于自己有过一段移动开发的经历,较为关注这块且作为一个爱拾人牙慧的切图狗,现将一些他人成熟的优化方法总结如下:

当然,所有的优化都是有场景,请根据实际的场景去选择最优的方案使用。

Read More »

Vue.js & checked 半选

引子

上周项目中有一常见的场景需求:一组 checkbox,然后一 checkbox 控制该组的全选/全不选状态,如该组未全选中需展示成半选中的状态。可能我描述的不够清楚,反正就是如下的样子(我用 jQuery 写了个 demo)。实现起来并不复杂,为了保持跨浏览器样式一致性,之前是其他 DOM 元素去模拟 checkbox,半选状态是用添加特殊的 className 然后去实现对应的样式。为了提升效率(其实是懒),这次我直接用了系统控件。结果问题来了,原生控件半选模式怎么展示?学了这么多年 HTML,抓耳挠腮貌似没有表示 checkbox 半选状态的属性。

Read More »