渲染性能

原文地址 与 译文地址

要想编写高性能的 web 站点或应用,你需要充分了解浏览器是如何处理 HTML/JavaScript/CSS 的,从而确保你写的代码(或引用的第三方代码)是尽可能高效的。

60帧与设备刷新率

当今大多数设备的屏幕刷新率都是 60次/秒 。因此,如果在页面中有一个动画或渐变效果,或者用户正在滑动页面,那么浏览器渲染动画或页面的每一帧的速率,也需要跟设备屏幕的刷新率保持一致。

也就是说,浏览器对每一帧画面的渲染工作需要在16毫秒(1秒 / 60 = 16.66毫秒)之内完成。但实际上,在渲染某一帧画面的同时,浏览器还有一些额外的工作要做(比如渲染队列的管理,渲染线程与其他线程之间的切换等等)。因此单纯的渲染工作,一般需要控制在10 毫秒之内完成,才能达到流畅的视觉效果。如果超过了这个时间限度,页面的渲染就会出现卡顿效果,也就是常说的掉帧,它是很糟糕的用户体验。

查看全文

JavaScript 中的存取器

在 ES5.1 中,定义了对象的两种存取器实现方式,对象直接量语法与Object.defineProperty()方法

直接量语法

定义存取器属性最简单的方法是使用对象直接量语法的一种扩展写法:

查看全文

防止短时间内多次触发事件

事件触发间隔大于一定的值才执行,防止用户多次触发,事件多次执行,演示地址:Limit-Event

实际中,会遇到比如菜单切换的点击事件,如何防止多次点击后,切换事件不断的执行?

我们可以使用Date.now()来判断事件触发的间隔,Date.now()的返回值是1970 年 1 月 1日午夜与当前日期和时间之间的毫秒数(MSDN的说明)。

Firebug 的 BUG—无法监听 Ajax-DELETE 方法的参数

在 Firebug V2.0.11 与 IE10 中,无法监听 Ajax-DELETE 方法所带的参数,演示地址:Ajax-Delete

发起请求的 JavaScript 代码:

查看全文

IP地址输入框(监听输入框的值改变事件以及限制输入)

onkeydown限制字符输入,oninputonpropertychange监听输入框的值改变事件。演示地址:Ip-InputGit@OSC:Ip-Input

1、限制用户的键盘输入,只允许输入数字以及退格等操作,使用onkeydown事件,监听键盘按键代码,如果不是我们允许的输入,则禁止输入。

查看全文