分类:Web开发

Math.random() 二三事

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

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

作者: 叶斋 发表于: 2015-12-01
人的运动——走,跑,跳,是由骨骼带动躯干和四肢完成的。「骨骼动画」,顾名思义,就是模拟骨骼运动的机制而制作的动画。比如下面这条奔跑的小龙。参考 Demo。 素材来自开源骨骼动画编辑器 Dragonbones 用到的素材,额,其实是他大卸八块后的样子。 骨骼动画主要被用游戏场景中,做 Log...

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

作者: 阎王 发表于: 2015-11-24
或许你曾经在 Chrome 浏览器上碰到过这样让人瞠目结舌的问题: hover 触发一个层展示,hover 离开后,这个层还遗留残影 浏览器没有清理一个元素渲染的上一个状态,导致页面多出一个错位的跟该元素一模一样的影子 交互时突然出现一个方形色块,覆盖在元素上 或者还有更奇葩的…… 以上列...

ES7 Decorator 装饰者模式

作者: 玄农 发表于: 2015-11-17
1、装饰模式 设计模式大家都有了解,网上有很多系列教程。 这里只分享 装饰者模式 以及如何使用 ES7 的 decorator 概念。 1.1、装饰模式 v.s. 适配器模式 装饰模式和适配器模式都是 包装模式 (Wrapper Pattern),它们都是通过封装其他对象达到设计的目的的,但...

如何评价页面的性能

作者: 溪夏 发表于: 2015-11-10
引言 前端页面的性能一直都是一个热议的话题,从老早的“军规”开始我们就一直在关注页面的性能问题。 在前面巨人们的身后每个人也有自己的一些页面性能的经验,本文主要是介绍如何评估页面加载完成之后的性能。 浏览器如何渲染一个页面 先附上一张图片: 这是在网上找的一张图,虽然是用来描述 perfo...

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

作者: 梧忌 发表于: 2015-11-03
随着已买到的宝贝组件化全网回归完成,项目开发工作终于告一段落了,接下来便是 Beta ,灰度发布。我也终于有了时间来总结一下整个项目。 同学们普遍对 PC 业务如何进行组件化感兴趣,在此就把我在项目中的思考过程,积累的经验写出来与大家分享。 先来介绍一下已买到的宝贝这个业务: 已买到的宝贝是全...

淘宝首页兜底容灾方案

作者: 阎王 发表于: 2015-10-29
淘宝首页是淘宝的一个大流量入口,平均每天的 PV 量达到一亿。而页面上的数据很多都是通过接口调用,不同的接口对应着不同的系统,每个系统的稳定性是不太一样的。 一、兜底容灾的必要性 一个日均承载一亿流量的网页,会经常出现哪些问题呢? 某个接口挂了,前端拿不到数据或者拿到的数据不够,页面展示就...

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

作者: 溪夏 发表于: 2015-10-29
起因 要捕获 JavaScript 代码中的异常一般会采用 try catch,不过 try catch 的使用是否是对代码性能产生影响呢?答案是肯定有的,但是有多少不得而知。 淘宝前端线上脚本错误的捕获方法: window.JSTracker = window.JSTracker || []...

说说最近 Google Safe Browsing 引发页面加载阻塞的问题

作者: 玉门 发表于: 2014-07-19
背景 一个礼拜前,在退款维权的业务中,发现这样一个问题: 在某些 Firefox 浏览器中,表单的 butterfly 加载阻塞导致功能异常了。 一开始,我们以为是即将发布的修改点导致的问题。 但再三确认本次的修改点后,确定只是改了文案啊! 这…… 因此,我们首先怀疑是否线上已经有问题? 经过...

一种基于匹配回朔的 CSS3 选择器引擎实现

作者: 承玉 发表于: 2013-05-08
介绍 CSS 选择器是一种应用于 DOM 节点查找场景的特定微型语法, 本质上和正则表达式一样都是一种模式匹配语言,灵活使用可以方便得获取指定位置的节点集合。 目前 W3C 推荐标准为 Selectors Level 3,在 IE9 + 以及 Firefox,Chrome,mobile 等浏览...