Category Archives: 阮一峰的网络日志

© 2013 . All rights reserved.

如何做到 jQuery-free?

jQuery是现在最流行的JavaScript工具库。 据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使用工具库的网站,这个比例就会上升到惊人的91.7%。 虽然jQuery如此受欢迎,但是它臃肿的体积也让人头痛不已。jQuery 2.0的原始大小为235KB,优化后为81KB;如果是支持IE6、7、8的jQuery 1.8.3,原始大小为261KB,优化后为91KB。 这样的体积,即使是宽带环境,完全加载也需要1秒或更长,更不要说移动设备了。这意味着,如果你使用了jQuery,用户至少延迟1秒,才能看到网页效果。考虑到本质上,jQuery只是一个操作DOM的工具,我们不仅要问:如果只是为了几个网页特效,是否有必要动用这么大的库? 2006年,jQuery诞生的时候,主要用于消除不同浏览器的差异(主要是IE6),为开发者提供一个简洁的统一接口。相比当时,如今的情况已经发生了很大的变化。IE的市场份额不断下降,以ECMAScript为基础的JavaScript标准语法,正得到越来越广泛的支持。开发者直接使用JavScript标准语法,就能同时在各大浏览器运行,不再需要通过jQuery获取兼容性。 下面就探讨如何用JavaScript标准语法,取代jQuery的一些主要功能,做到jQuery-free。 一、选取DOM元素 jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。   var $ = document.querySelectorAll.bind(document); 这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。如果有需要,可以考虑将Nodelist对象转为数组。   myList = Array.prototype.slice.call(myNodeList); 二、DOM操作 DOM本身就具有很丰富的操作方法,可以取代jQuery提供的操作方法。 尾部追加DOM元素。   // jQuery写法   $(parent).append($(child));   // DOM写法   parent.appendChild(child) 头部插入DOM元素。   // jQuery写法   $(parent).prepend($(child));   // DOM写法   parent.insertBefore(child, parent.childNodes[0]) 删除DOM元素。   // jQuery写法   $(child).remove()   // … Continue reading

© 2013 . All rights reserved.

计算机是如何启动的?

从打开电源到开始操作,计算机的启动是一个非常复杂的过程。 我一直搞不清楚,这个过程到底是怎么回事,只看见屏幕快速滚动各种提示…… 这几天,我查了一些资料,试图搞懂它。下面就是我整理的笔记。 零、boot的含义 先问一个问题,”启动”用英语怎么说? 回答是boot。可是,boot原来的意思是靴子,”启动”与靴子有什么关系呢? 原来,这里的boot是bootstrap(鞋带)的缩写,它来自一句谚语:   ”pull oneself up by one’s bootstraps” 字面意思是”拽着鞋带把自己拉起来”,这当然是不可能的事情。最早的时候,工程师们用它来比喻,计算机启动是一个很矛盾的过程:必须先运行程序,然后计算机才能启动,但是计算机不启动就无法运行程序! 早期真的是这样,必须想尽各种办法,把一小段程序装进内存,然后计算机才能正常运行。所以,工程师们把这个过程叫做”拉鞋带”,久而久之就简称为boot了。 计算机的整个启动过程分成四个阶段。 一、第一阶段:BIOS 上个世纪70年代初,”只读内存”(read-only memory,缩写为ROM)发明,开机程序被刷入ROM芯片,计算机通电后,第一件事就是读取它。 这块芯片里的程序叫做”基本輸出輸入系統”(Basic Input/Output System),简称为BIOS。 1.1 硬件自检 BIOS程序首先检查,计算机硬件能否满足运行的基本条件,这叫做”硬件自检”(Power-On Self-Test),缩写为POST。 如果硬件出现问题,主板会发出不同含义的蜂鸣,启动中止。如果没有问题,屏幕就会显示出CPU、内存、硬盘等信息。 1.2 启动顺序 硬件自检完成后,BIOS把控制权转交给下一阶段的启动程序。 这时,BIOS需要知道,”下一阶段的启动程序”具体存放在哪一个设备。也就是说,BIOS需要有一个外部储存设备的排序,排在前面的设备就是优先转交控制权的设备。这种排序叫做”启动顺序”(Boot Sequence)。 打开BIOS的操作界面,里面有一项就是”设定启动顺序”。 二、第二阶段:主引导记录 BIOS按照”启动顺序”,把控制权转交给排在第一位的储存设备。 这时,计算机读取该设备的第一个扇区,也就是读取最前面的512个字节。如果这512个字节的最后两个字节是0×55和0xAA,表明这个设备可以用于启动;如果不是,表明设备不能用于启动,控制权于是被转交给”启动顺序”中的下一个设备。 这最前面的512个字节,就叫做“主引导记录”(Master boot record,缩写为MBR)。 2.1 … Continue reading

© 2013 . All rights reserved.

JavaScript Source Map 详解

上周,jQuery 1.9发布。 这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map。 访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js,打开压缩后的版本,滚动到底部,你可以看到最后一行是这样的:   //@ sourceMappingURL=jquery.min.map 这就是Source Map。它是一个独立的map文件,与源码在同一个目录下,你可以点击进去,看看它的样子。 这是一个很有用的功能,本文将详细讲解这个功能。 一、从源码转换讲起 JavaScript脚本正变得越来越复杂。大部分源码(尤其是各种函数库和框架)都要经过转换,才能投入生产环境。 常见的源码转换,主要是以下三种情况:   (1)压缩,减小体积。比如jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。   (2)多个文件合并,以减少HTTP请求数。   (3)其他语言编译成JavaScript。最常见的例子就是CoffeeScript。 这三种情况,都使得实际运行的代码不同于开发代码。因此,除错(debug)变得困难重重。 通常,JavaScript的解释器会告诉你,第几行第几列代码出错。但是,这对于转换后的代码毫无用处。举例来说,jQuery 1.9压缩后只有3行,每行3万个字符,所有内部变量都改了名字。你看着报错信息,感到毫无头绪,根本不知道它所对应的原始位置。 这就是Source map想要解决的问题。 二、什么是Source map 简单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。 有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。 目前,暂时只有Chrome浏览器支持这个功能。在Developer Tools的Setting设置中,确认选中”Enable source maps”。 三、如何启用Source map 正如前文所提到的,只要在转换后的代码尾部,加上一行就可以了。   //@ sourceMappingURL=/path/to/file.js.map map文件可以放在网络上,也可以放在本地文件系统。 四、如何生成Source map … Continue reading