« 上一篇下一篇 »

设计目标:最小化未压缩文件的尺寸

优秀Web开发者会尽全力让HTML、CSSJavaScript变得尽可能精简,但是我们都会根据经验任由那些又长又重复的字符串存在,因为Gzip压缩会使它们基本上消失。因此,我们实际上没有在这上面做出足够的优化,当用户无法接收经过压缩的响应时,这种设想就毫无意义了。
这点貌似太明显而不值一提,但是实际上被强调的还不够:发送更小的响应会使页面加载速度更快。这也是为上面对于响应进行压缩是如此有效的技术,尽管这样做会在服务器端和客户端增加CPU的开销。优秀的Web开发者会尽全力让HTML、CSS和JavaScript变得尽可能精简,但是我们都会根据经验任由那些又长又重复的字符串存在,因为Gzip压缩会使它们基本上消失。因此,我们实际上没有在这上面做出足够的优化,当用户无法接收经过压缩的响应时,这种设想就毫无意义了。

寻找那些可以分离出来的重复内容是一门艺术,而且每个网站的实际情况不同。有一些通用的技术可以减小页面未经压缩的大小,同时又不会增加压缩后的大小。

使用事件委托

页面上通常会有几个元素需要绑定相似的事件处理程序,普遍出现在10大网站中的例子是下拉列表、跟踪连接点击和hover动画。跟别设置事件处理程序会导致页面大小迅速增加。

比如说facebook包含了一个下拉列表,里面大概包含50种语言的选项。每种语言都对应一个连接,给每个连接绑定onclick事件处理程序都需要额外的133个未经压缩的字节。

Espanol

将50个连接浪费的时间累加起来,相当于把约6.7KB的数据传送给不支持压缩的用户所浪费的时间。每个链接中都有一些非常明显的重复信息,比如URL、本地代码和语言名称。

当多个元素都需要响应某个事件时,我们把这个事件的处理程序绑定到它们的父元素上,这项技术通常叫做事件委托。当事件在子元素上触发后,会冒泡到绑定了处理程序的父元素上。时间处理函数可以识别出那个子元素是发生事件的元素,并通过它的一些属性来获取额外的参数。

新的事件委托处理程序通过元素的class属性来获取地区值,之前是通过参数传递进来的:


为实现事件委托而增加的一小段代码在数量上是微不足道的,因为它可以放置在外部文件中。用可以缓存的JavaScript文件取代嵌入文档中的代码,这样用户就无需每次访问都是重新下载了。

« 上一篇下一篇 »