Taobao FED

分类:Web开发

Math.random() 二三事

随机数随机数是统计学领域的一个重要概念,对于游戏来说同样意义非凡,用好随机数,可以使你的游戏更真实、更人性、富有魅力。 举例子来说:一个打靶游戏,子弹每次都命中准心所示位置是不科学的,加上抖动误差,会使真实感更加强烈;再如,抽奖大转盘程序,每当转盘停止转动时,指针恰好都指向奖品图片的正中点,人们会觉得这个转盘很不自然,指向一个随机位置效果要好得多。 学过 JavaScript 的人都知道,应用随

骨骼动画原理与前端实现浅谈

人的运动——走,跑,跳,是由骨骼带动躯干和四肢完成的。「骨骼动画」,顾名思义,就是模拟骨骼运动的机制而制作的动画。比如下面这条奔跑的小龙。参考 Demo。 素材来自开源骨骼动画编辑器 Dragonbones 用到的素材,额,其实是他大卸八块后的样子。 骨骼动画主要被用游戏场景中,做 Logo 、彩蛋也不错(比如 2014 年双 11 的喵喵舞就是天猫的同学基于骨骼动画原理实现的)。其实,在

记一次淘宝首页奇葩的渲染问题

或许你曾经在 Chrome 浏览器上碰到过这样让人瞠目结舌的问题: hover 触发一个层展示,hover 离开后,这个层还遗留残影 浏览器没有清理一个元素渲染的上一个状态,导致页面多出一个错位的跟该元素一模一样的影子 交互时突然出现一个方形色块,覆盖在元素上 或者还有更奇葩的…… 以上列举到的三个问题,我在维护淘宝首页的时候都遇到过。这些都是浏览器渲染页面时,因为渲染引擎的 bug 导致

ES7 Decorator 装饰者模式

1、装饰模式设计模式大家都有了解,网上有很多系列教程。 这里只分享 装饰者模式 以及如何使用 ES7 的 decorator 概念。 1.1、装饰模式 v.s. 适配器模式装饰模式和适配器模式都是 包装模式 (Wrapper Pattern),它们都是通过封装其他对象达到设计的目的的,但是它们的形态有很大区别。 适配器模式我们使用的场景比较多,比如连接不同数据库的情况,你需要包装现有的模块接口

如何评价页面的性能

引言前端页面的性能一直都是一个热议的话题,从老早的“军规”开始我们就一直在关注页面的性能问题。 在前面巨人们的身后每个人也有自己的一些页面性能的经验,本文主要是介绍如何评估页面加载完成之后的性能。 浏览器如何渲染一个页面先附上一张图片: 这是在网上找的一张图,虽然是用来描述 performance 的 API 但是也很好的描述了浏览器是怎么处理一个页面渲染的。 这是我们在 PC 时代考虑的浏览

已买到的宝贝前端组件化探索

随着已买到的宝贝组件化全网回归完成,项目开发工作终于告一段落了,接下来便是 Beta ,灰度发布。我也终于有了时间来总结一下整个项目。 同学们普遍对 PC 业务如何进行组件化感兴趣,在此就把我在项目中的思考过程,积累的经验写出来与大家分享。 先来介绍一下已买到的宝贝这个业务: 已买到的宝贝是全网(淘宝/天猫)买家进行订单相关操作的平台(订单相关的操作如:取消订单,确认收货,订单搜索等),承载了全

淘宝首页兜底容灾方案

淘宝首页是淘宝的一个大流量入口,平均每天的 PV 量达到一亿。而页面上的数据很多都是通过接口调用,不同的接口对应着不同的系统,每个系统的稳定性是不太一样的。 一、兜底容灾的必要性一个日均承载一亿流量的网页,会经常出现哪些问题呢? 某个接口挂了,前端拿不到数据或者拿到的数据不够,页面展示就会出问题,出现空白或者某个模块直接天窗。 用户因为网络问题或者安装了某些插件,导致页面广告、接口请求挂掉,从

try catch 对代码运行的性能影响

起因要捕获 JavaScript 代码中的异常一般会采用 try catch,不过 try catch 的使用是否是对代码性能产生影响呢?答案是肯定有的,但是有多少不得而知。 淘宝前端线上脚本错误的捕获方法: 1234567window.JSTracker = window.JSTracker || [];try{ //your code}catch(e){ J