JS Mix

有的时候我们可能不得不使用 js 来处理 html entities，例如把 > 这样的内容转化成 > 符号，或者是相反的操作。如果你不幸遇到了这样的需求，下面的内容也许会有所帮助。

unescapeHtmlEntities 的实现非常简单，创建一个节点元素，然后将字符串写入这个元素的 innerHTML 属性，最后返回这个元素的文本内容。调用下面的函数时传参'>'，得到的结果将会是'>'

function unescapeHtmlEntities(str) {
var tempEle = document.createElement("div");
tempEle.innerHTML = str;
var result = tempEle.childNodes[0].nodeValue;
return result;
}

转自：www.joy-studio.com

下面这段代码使用IE可以识别html注释的特性，可以准确的判断IE浏览器的版本号，没有使用诸多怪异的测力检测方法，超级简洁。 原作者的代码地址在这里，我做了一点小改动，文中有注释，可以到这里运行测试。

/**
 * ie equals one of false|6|7|8|9 values, ie5 is fucked down.
 * Based on the method: https://gist.github.com/527683
 */
var ie = function () {
    var v = 4, //原作者的此处代码是3，考虑了IE5的情况，我改为4。
        div = document.createElement('div'),
        i = div.getElementsByTagName('i');
    do {
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->';
    } while (i[0]);
    return v > 5 ? v : false; //如果不是IE，之前返回undefined，现改为返回false。
}();

这套布局模板来自于html.it，总计 40 个，覆盖流体、固定宽度、两列、三列等等各种常见的布局形式。最让人称道的是，这 40 个模板采用了完全一致的 HTML 结构(based on the same markup)，并严格遵循了“重要内容优先加载”的原则(页面的content部分)，HTML 与 CSS 部分均能通过 W3C 验证，同时在 IE/win 5.0+, Opera 8.5+, Firefox 1.5+ 和 Safari 2+都有非常好的兼容性。它使用的 HTML 如下：

Console API

当打开 firebug (也包括 Chrome 等浏览器的自带调试工具)，window 下面会注册一个叫做 console 的对象，它提供多种方法向控制台输出信息，供开发人员调试使用。下面是这些方法的一个简单介绍，适时地运用它们，对于提高开发效率很有帮助。

console.log(object[, object, ...])

使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然，也可以不使用格式化输出来达到同样的目的。下面两行代码执行的结果是相同的：

console.log("The %s jumped over %d tall buildings", animal, count);
console.log("The", animal, "jumped over", count, "tall buildings");

图像的旋转是目前的 web 应用程序中比较常见的一种操作。曾经在做这样的程序时，思路比较狭窄，总是认为扔给服务器端处理比较稳妥。这种方法大致的过程是这样的：当用户点击一种旋转方向，立即发出一个 Ajax 请求，告诉后端要旋转的图像和旋转的角度，再由后端通过一定的工具(如 PHP 的 GD 库)生成新的图像再进行存储并向浏览器返回新的图像地址，这时使用 JavaScript 对图像的 src 属性进行更新即可。这个过程对于前端来说非常的简单，它大概像下面这样：

什么是脚本阻塞？

浏览器在加载外部脚本时，不会进行其他内容的加载和渲染工作，相当于此时浏览器处于一种“停滞”状态，直至该外部脚本完全加载，并执行完成。这样的设计具有其合理性和必须性，每一个脚本都有可能对页面元素进行操作，同时相互之间可能存在依赖性，最简单的例子如使用 jQuery 这样的库，基于 jQuery 的脚本必须在 jQuery 完全下载并执行完成建立 jQuery 对象后，其他的代码才有生效的可能。由此看来，脚本按顺序执行时必需的，但是没有更好的理由表示他们需要按顺序单个加载。这样的做法严重影响了页面的性能，当页面含有较多的外部脚本，可以非常明显的感觉到浏览器被脚本阻塞而处于这种”停滞“状态。下面的一些方法将帮助我们并行下载外部脚本。

作为指导浏览器如何渲染页面样式的部分，CSS 的性能对页面整体性能的影响是巨大的。在这篇文章中，我们共同来讨论如何对 CSS 进行优化，实际上，其中所有的手法都并不复杂，关键在于多在实战中实施，并深刻了解优化与未经优化的差异。另外，在这个过程中合理利用一些工具能够对我们产生莫大的帮助。Google 的 Page Speed和 Yahoo 的YSlow都是不错的选择，两者均是基于 Firebug 的插件。在这篇文章中，我们主要使用到的是 Page Speed 进行演示。

1. 合理使用 CSS Sprite 和 DataURI