在开始本篇内容介绍前，请先回忆一下你在浏览包含很多大图片网页时的体验，尤其是在图片没有采用懒加载技术情况下，即打开网页时一次性将所有图片加载完毕，并完成渲染。这种情境下，相信不多数人都会发觉网页在首屏显示完整后，拖动网页右侧滚动条，浏览器却没有任何响应，在短暂的等待后，页面随之会向下滚动。

另外需要说明，使用不同的浏览器，上述现象表现将稍有不同。比如使用Mozilla Firefox，网页的反应速度将稍快，这取决于浏览器厂商各自的设计哲学，firefox就会最大限度的利用系统空闲资源（CPU、内存）去支持页面渲染及交互。这样的设计一定程度上，提升了用户的浏览体验，但在遇到设计糟糕的网页时，势必拖慢系统。

通过以上现象不难得出结论，web在使用大量图片时，将会让页面加载及渲染速度变的更慢。下文将深入介绍有关图片的相关知识、网页载入图片及渲染过程、图片优化对web性能的影响以及如何在网页中以最优的方式使用图片。

1，准备js引擎

mac下默认没有裸的js引擎，需手动安装

sudo brew install spidermonkey

安装jslint上的文档说明，安装的软件包应该是spidermonkey-bin，但笔者一直搜不到相关软件包，无奈之下就用了spidermonkey。

2，安装ruby

jslint程序本身是用ruby写的，所以ruby环境也是必须的

sudo port install ruby

无论你使用什么样的文本编辑器，zencoding作为一种很酷的编码方式，倍受开发人员的青睐。本文简单介绍mac vim下的zen coding配置：

一，下载zen coding插件
官方github地址：https://github.com/mattn/zencoding-vim

可使用git下载，也可以下载zip包。
文档说明中有些地方不是很详尽，下面稍加补充说明。

二，拷贝文件到vim目录

首先解压缩zip包zencoding-vim-master.zip，进入zencoding-vim-master文件夹，拷贝该目录下的所有文件到剪贴板。进入用户根目录（~/username），找到.vim文件夹（如不存在则自行创建），粘贴剪贴板中的内容到.vim根目录。

本文拿node程序举例

一，创建node程序nodetool，代码如下：

1
2

#!/usr/bin/env node
console.log(process.argv);

第一行声明执行文件的程序名称，从env中自动检索node，也可以设置node程序的具体位置，如：/usr/local/bin/node，正文部分即js程序。

查找node程序所在目录，使用whereas(linux)、which（mac）可快速定位，如which node

nodejs作为跑在服务器端的javascript，可以提供高性能的web服务，简而言之其特色：

• v8引擎
• 事件回调模型
• 异步
• 无阻塞
• 单线程

更多资料请参考：这里

一，原理：

iframe在加载新页面时，name值是保持不变的，由此可以重定向iframe的引用地址，由外域转到本域。

二，方法：

设置请求目标域页面的window.name，通过iframe引用至本域，由于js受到浏览器同源策略限制，无法跨域通信，取不到iframe中传过来 的window.name设置值，所以需要在本域设置一个代理页面（空文件即可），监听iframe的load事件，一旦加载完成，设置iframe指向 本域下的代理页面，此时就不存在跨域问题了，同时js可以取得iframe传输过来的跨域数据，即window.name值。

以下是封装的组件：

object作为javascript的一种数据存储格式，采用哈希表的存取方式，即一个key对应唯一的值，这样的特性，有时候给开发带来很大的便利，比如当我们需要获得一系列不能重复的数字时，可以做如下处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var randomOne = function(){
    var i = 0 , obj = {};
    while(i < 6){
        var num = Math.ceil(10 * Math.random());
        if(obj[num]) continue;
        obj[num] = num;
        i ++;
    }
    return obj;
}
var o = randomOne();
for(var i in o){
    alert(o[i]);
}

对于object的取值，一种是通过逻辑定位符（.），另外一种就是通过hash map的方式。对于第一种方法，没有过多的疑问，对象标识符.对象键标识符，如var o = { a: 1} ; o.a就取到对象o的属性a的值，如果用哈希表的方法取，则为o[‘a’]，那么一定要o[‘a’]才可以吗？

是否有其他方法呢？

JavaScript中的prototype，即构造函数的原型对象，我想对于使用过JavaScript oo模式编程的你来说，肯定都能很好的利用prototype的特性来编写出优美的面向对象的代码，因为它的确很好用。但是你真的足够了解prototype吗？

首先我觉得，在分析prototype之前，应该先了解为什么要使用prototype来实现继承，而并不是把所有属性写到构造函数内部，那么这样做优势体现在哪里呢，如果你跟我有一样的困惑，请看如下两段代码：

近期项目中，发现这个诡异的问题，IE（以下如有特殊说明，指全部IE系列浏览器）下透明滤镜竟然会失效。起因在于，在做一个lightbox时，发现遮 罩层透明效果是失效的，在第一时间里，我当然是把问题定位在YUI组建设计的缺陷上，但是当我用IE调试工具看到遮罩层渲染的样式时，我震惊了。

如下图：