又一个 WordPress 站点
升级了浏览器到IE9，今天进入公司网站后台突然发现有些页面进不去了，F12调试显示有JS错误：DOM Exception: INVALID_CHARACTER_ERR (5) ，具体截图如下：
之前各类JS错误提示中貌似没见过这个，按照提示找到错误位置代码如下：
貌似和CreateElement有关，但是实在不明白，于是google了一把，有如下解释：http://stackoverflow.com/questions/5344029/invalid-character-dom-exception-in-ie9
原来IE9创建DOM元素的方式较之前有了改变，开始严格遵循标准的实现，不允许通过直接传入一个完整html标记的方式来创建Dom元素。
到这里，解决方法自然也明了了，对于IE9 也采用标准的方式老老实实来实现即可：如上面代码片段。
大概很多旧的JSlib都会有这样的问题了，这个是mootools旧版本的代码，先自己update一下代码吧～
似乎这几年过来，前端在国内的发展也相当给力，记得在09年我们很多人还调侃的认为html5/css3至少要等到我们的baby都会打酱油的时候才有可能在国内应用开。然后互联网的发展速度永远都是天翻地覆，远远超出我们每个人的预想。
近几年来，从firefox开源开始，开始了一场比当初更激烈的浏览器竞争，而这一次，由于firefox，chrome的“猛烈”行动，致使一直以来靠windows+IE捆绑方式霸占浏览器天下的microsoft也不得不跟上步伐，参与到浏览器的升级大军中来。于是WEB标准的推进步伐，从xhtml1.0,xhtml1.1,XHTML2.0…到最后的html5，发展速度也远远超越了以往。目前除了仍安置在部分电脑用户上的N年前的一些浏览器(IE6,Ie7)外，新版的浏览器几乎都陆续开始提供对html5/css3越来越完善的支持，就连IE也从IE9/10也开始提供了html5/css3的部分支持。
考虑到兼容更多的用户以及windows/IE的用户量，特别是国内用户的这种特殊情况。在PC领域真正的应用html5，还是有相当大的风险，特别是对于一些用户群比较大的网站。但是好在陆续有人提出了一些兼容旧版浏览器的解决方案。于是。。一些大型的互联网公司前端团队也开始尝试着在网站上实践html5/css3技术。这不仅仅是积极推进新技术的发展，更给了更多的前端开发团队和人员更大的信心。相信现在已经有越来越多的人开始参与到html5/css3的学习和实践中来。最近自己闲暇关注一些互联网新闻和博客，注意到一些已经开始应用了html5/css3的网站，以下是一些列表，该列表我会不断去做更新。
支付宝在html5的应用方面应该是更彻底的一个了。其中还有一个很值得学习的我觉得是img lazyload的思路。
淘宝是最早开始应用html5的大型网站了。淘宝前端团队还是要赞一下的。
无意中发现拍拍也开始用了html5，非常不错～
Fiddler是一种Web调试代理，它记录你的电脑和网络之间所有的HTTP(S)流量。可以用Fiddler检查所有HTTP(S)流量，设置断点，干涉进来或出去的数据。
TamperData是一个追踪并修改http/https请求的Firefox扩展。可以用它做基于网络的应用程序的安全测试，追踪请求/回应。
可以在浏览的时候查看网页的HTTP headers。可以用Live HTTP Headers调试网页应用程序，找出远端网站使用的是那种网站服务器，或者查看远端网站发送的小数据文件。
jGrouseDoc可以从源代码中的注释生成API文件。你可以用这个工具记载你需要的所有构造——不仅有函数和变量，还有类文件包，界面，命名空间，包和其它。使用那种JavaScript框架是无关紧要的——你可以不采取框架或工具强加的方式而以自己希望的方式记录代码
JavaScript的一种文件产生器，以JavaScript形式写成；它自动从加注的JavaScript源代码中生成格式模版化，多页面HTML（或XML, JSON, 抑或其它文本）。
Online Javascript Compression Tool
一个可以用一些压缩算法如JSMin和Packer压缩JavaScript文件的在线JavaScript压缩器。压缩的JavaScript文件是生产环境中的理想文件，因为它们常常将文件大小减小30-90%。在很大程度上，文件尺寸的缩小是通过除去网页浏览者或访问者不需要的注释和多余的空格字符来实现的。
一个将多个JavaScript文件组合为一个文件的在线工具。
一种命令行实用程序，允许你用浏览器缩小文件大小，从而缩短响应时间。Dojo压缩器不是建立在脆弱的规则表达式基础上的。它基于来自莫兹拉专案的JavaScript引擎。由于一个基于真正的parse stream，Dojo压缩器比基于规则表达式的工具可以更好体现代符（变量名等等）的环境。
The YUI Compressor是一种JavaScript压缩器。去除注释和空格之外，它还可以用最小可用变量名混淆局部变量。即使在使用‘eval’或‘with’之类构造（在这些情况下压缩并不合适），这种混淆也是安全的。与jsmin相比，它平均节省20%。
这个美化工具可处理散乱或压缩的JavaScript代码，不断对其进行快速的格式化并使其可读。
Aptana Studio是一个完整的网络开发环境。它提供有JavaScript代码自动完成和调试，HTML/CSS/JavaScript代码提示，以及对重要的Ajax类库的支持。Aptana Studio甚至给你页面上所有的，包括你自己的JavaScript提供代码提示。
Komodo Edit是一种免费开放的源编辑程序。它提供自动完成，调用提示，多种语言支持，语法高亮颜色显示，语法检查，Vi emulation，Emacs快捷键绑定等等功能。扩展Komodo Edit是其最实用的功能之一。你会发现各种对JavaScript开发者有用的扩展（如JSLint plugin for Komodo, Venkman JavaScript Debugger，等等）。
Spket IDE是JavaScript和XML开发功能强大的工具包。JavaScript, XUL/XBL and Yahoo! Widget开发功能强大的编辑器。JavaScript编辑器有代码完成，语法高亮显示和内容概要等功能，这些功能帮助开发者高效制作出有效的JavaScript代码。Spket IDE为非商业用途免费提供。
AJAX API Playground装载有Google JavaScript APIs（Maps, Search, Feeds, Calendar, Visualization, Language, Blogger, Libraries和 Earth,等等）例子，你可以编辑运行这些例子帮助你探究Google的APIs可提供的功能。同时也还有保存和输出功能。你可以用保存功能保持编辑的例子以留待以后使用。而输出功能可用来修改例子并把代码公布在一个永久的URL上。
检查CSS2, CSS3, DOM Core, DOM HTML, DOM CSS, DOM Events 和CSS Object Model View主要浏览器相容性状态的最受欢迎的出处。
HTML到JavaScript转换器获得置标并将它转换成一系列可以在JavaScript块中使用的document.write()申明。
Glimmer是一种桌面应用软件，可以用它利用jQuery库的作用在网页上轻松制作交互式元素。可以用它轻松制作交错感受如旋转相册/报头，下拉导航，悬停效果，或自定义动画。
你可以用这个工具很快建立一个函数集，当页面加载完毕/准备完毕时，调用该函数集。
一个制作规则表达的在线工具。
Firefox, Flock & Seamonkey的网络开发人员扩展
网络开发人员拓展在浏览器中增加了一个菜单和工具条，其中包含许多网络开发工具包括能使你的XHTML生效，发现JavaScript/CSS的错误，网页结构可视化，测试网络表单，改变运行中的XHTML，检查HTTP头信息等等。
Opera Dragonfly 是Opera浏览器的跨设备，跨平台调试环境—调试 JavaScript, 检查编辑CSS和DOM， 并且查看移动设备或计算机上的错误。
微软的英特网浏览器开发者工具条为网页的快速创建，理解和故障诊断提供了各种的工具。
在今天网络开发方面，JavaScript起了很关键的作用；像jQuery, MooTools, Prototype等等JavaScript框架以及其它JavaScript类库让我们的生活轻松了不少。但是随着Rich Internet Applications(RIA)的面世及迅速应用，书写更强大，更坚实可靠的JavaScript的需要日益迫切。（51CTO编辑：当前Web开发界普遍认为JavaScript将会成为主流，可能会成为RIA的竞争对手。）
不管你是JavaScript新手还是经验丰富的开发者，你所使用的工具直接影响你的工作效率。开放源代码运动使得拥有得力的工具不再意味着付一大笔钱；实际上你什么都不用付出。下面是一个对JavaScript开发者真正有实用价值的免费工具列表。
JSLint取得一个JavaScript源代码并对其扫描。如果发现问题，它送回信息描述问题状况及在源代码中的大概位置。问题不一定就出在句法上，不过常常正是这里出错。JSLint查看一些风格约定和结构问题，它证明不了程序是否正确。它只是提供了另一双眼睛来帮助发现问题。
JsUnit是一个客户端（内浏览器）JavaScript单元测试框架。它其实是JUnit给JavaScript的一个口岸。其中还有一个平台来在多个浏览器上以及运行不同操作系统的多个机器上的自动执行测试。
YUI Test是一个测试框架，它针对基于浏览器的JavaScript解决方案。你可以用YUI Test在JavaScript 解决方案上轻松添加单元测试。
可作为Firefox扩展，Greasemonkey用户脚本，以及Ubiquity命令；Obtrusive JavaScript Checker是一种可以扫过页面上所有元素的工具，发现带有行内事件的HTML元素（这是有危害性的，JavaScript应该是不张扬的）时，它给这部分加红边使其凸显。
Crosscheck是一个开源测试框架，验证内浏览器JavaScript代码。它帮助你确保代码可以在Internet Explorer和Firefox等种种不同的浏览器上运行，而这些浏览器都不需要安装。
JSLitmus是一个轻量级工具用来制作JavaScript的特定标准测试。
JavaScriptMVC的测试库提供事件模拟，单元测试，Ajax 夹具，和一个控制台程序。
JavaScript调试工具包是一种跨浏览器调试JavaScript的eclipse plugin，它可以在IE,Firefox,Safari,Chrome,Opera甚至是移动浏览器上调试JavaScript。
作为最受欢迎的网页开发程序工具，Firebug是Firefox的一个插件，可以用它在任何网页上现时编辑，调试和监控CSS, HTML, 和JavaScript。它提供给JavaScript登陆和调试控制台一些有用的功能如AJAX requests logging，JavaScript解释器，DOM explorer等等。Firebug Lite 可以在IE, Opera, 和Safari上使用。
Venkman为基于Gecko的浏览器提供功能强大JavaScript调试环境。这个调试器以Firefox & Mozilla插件的形式使用。可以在用户界面上和控制台命令中使用断点管理，调用栈检查，变量/对象检查等功能，可以让你以最习惯的方式调剂。
NitobiBug是一种基于浏览器的JavaScript对象记录和检查工具——与Firebug作用相似。NitobiBug在可以在不同的服务器（IE6+, Safari, Opera, Firefox）上运行以提供开发各种Ajax应用程序一致且功能强大的工具。
DamnIT是一种免费服务，当用户在网页上遇到JavaScript错误时它会给你发送电子邮件。
JS Bin是一种在线网络应用程序，为帮助JavaScript开发者在一定情景里测试代码片段以及协作调试代码而特别设计。你可以用JS Bin在线编辑测试JavaScript和HTML代码。一旦完成，你可以将URL保存并发送给同伴来进行审查或获得帮助。
许多JavaScript开发者仅仅使用alert()来显示各种信息调试代码。Blackbird在JavaScript上提供了记录信息的简单方式以及一个引人注意的控制台程序来察看并过滤信息。
自动上次ymPrompt组件发布，自己就曾发现在IE8下遮罩的半透明滤镜有时无效的问题，后来也有网友提出过这个问题，但自己一直也没有太多关注，以为是IE8的安全策略问题，因此我一直都认为IE8可能默认不支持alpha透明滤镜了。曾经心里还一直纳闷：这MS是在搞什么呢，自动的东西都搞得这么不统一。
对此问题，我一直都认为没有很好的解决办法，唯一有效的办法就是采用IE7兼容模式来编写页面，即在页面中增加
<meta http-equiv="X-UA-Compatible" content="IE=7" />
，但这对于专门为ie8编写的页面来说是个比较不靠谱的方法。
近段时间在抽时间准备编写下一版本的ymPrompt，因此下载了一些时下流行的弹出组件，看看其实现和演示，一次测试中，无意发现某个组件的弹出遮罩在IE8下是半透明的，当时就立即查看源码，但奇怪的是没有发现那个兼容IE7的代码存在，难道这里还有什么高招或者玄机？我把组件里的那行半透明的html取出来，和自己组件中的代码对比，但没有发现什么差别，然后就对比CSS属性，一个个测试，最后发现，当把高度改为和我Demo中遮罩高度一致时，半透明就失效了！到这里基本知道，IE8应该是元素达到某个界限值后滤镜无效了。
在本人笔记本（ATI显卡+WIN7+IE8）上多次测试，发现当遮罩的高度或者宽度大于4096时，透明滤镜就失效了~ 这个数字在计算机还是比较有特殊意义的:2的N(N=12)次方。接下来开始在google寻找一些相关的资料，虽然资料很少，还是找到了一些相关的内容，如filter-alpha-opacity fails if the element is taller than 2048px, IE7 Vista和IE8/Vista – Opacity not honored on large elements这两篇文章。从文章来看，好像这个尺寸并不是固定的4096，这个尺寸貌似跟显卡有关，有些显卡在尺寸大于2048时alpha就失效了。
Satyen Desai总结了这么一段话：
It fails precisely when the height of the element crosses 2048 (for a laptop with ATI card X), or 4096 (for a desktop with ATI card Y) based on some
testing I asked a user to try.
到这里，问题原因基本算清楚了：IE8 Alpha滤镜渲染机制有些问题，在应用Alpha滤镜的元素的宽或高大于某个值时（如4096/2048）时，该滤镜就失效了。
尽管搞清楚了原因，并不是ie8不支持alpha，或者并不是安全策略问题，而是ie8的bug。但是还是有些小郁闷，既然之前浏览器版本能很好支持Alpha，为什么到ie8就出问题了呢？？
发现了问题，后面就是想办法解决这个问题，除了之前所讲的IE7兼容模式的办法，我暂时只有两个WS的办法：（1）对非IE6统一采用透明PNG来做半透明。（2）ie8下对超出特定高度的部分重新创建一个遮罩层（这带来了维护遮罩层的复杂度）。
如果哪位老大有更好的办法，欢迎指点与我，在此先多谢了~
今天调试某页面样式，发现chrome下出现问题，但是同样基于webkit引擎的safari没有问题，很是郁闷。于是寻找针对google chrome 的hacks解决方案，网上先搜索了一把，得到的答案基本是一样的，如这篇文章http://www.zeroz.cn/blog/archives/162/，但是自从firefox3.5发布后这个hack就不太灵验了，因为FF 3.5也开始识别nth-of-type了。
于是继续苦找，发现了一个针对webkit的hacks：
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */
}
这样的hacks同样是被Google Chrome、Safari 3.0、Opera 9 所识别的，这还是不能根本解决我的问题。但是仔细查看这篇文章，发现了“另有一种通过附加#的Css hack对chrome无效，可能是Webkit版本不同。”这句话，于是算是变通的找到了一个解决办法。我的代码是要将chrome的字体设置为宋体，其它浏览器仍然使用默认设置的字体。
@media screen and (-webkit-min-device-pixel-ratio:0) {
.parent-cat li{font-family:'宋体'}
.parent-cat li{font-family:inhert;#}
}
在设置完针对google chrome的样式后，再通过css inhert + # hacks即可达到我们的目标。
一点小经验，顺便记录一下，N久不更新blog，惭愧……
尽管可能是个比较老的话题了，但是我还是从来没有整理过。今天在《精通HTML》一书中看到，这里整理一下。
考虑到以后可能接触和编写XHTML/CSS的机会越来越多，因此要恶补一下这方面的知识了。过去的一年多时间基本把大脑中有关xhtml/css的相关知识快给“扔”的差不多了，看来对于做前端的我来说这些内容还是不能丢掉的，这篇日志就用来记录我以后学习中总结的各种用到的CSS hacks的技巧。
PS：网上有一张css-hack-list的图，不过我仔细看了一下，是有些问题的，而且对IE也仅仅包含到IE7b1的结果，但现在IE8也的用户也在逐渐的增加，我们必须要考虑更多的东西了。
有关JS中字符串的相关文章，现在网上大概不计其数了。这里我不想再就这个问题做过多的论述，只是对几种方式的实现在各种浏览器中的执行效率进行对比做个总结。
拼接字符串，大体分为两种方式，一种通过+号拼接（方式1），这种方式在IE6中效率是极其低下的，因此就出现了第二种方式：采用数组保存，最后通过join拼接，这种方式的效率在IE6下对比会发现速度差异非常大。此外还有很多朋友估计没有注意过，数组拼接的方式又分为两种，一种是通过push将字符串放入数组（方式2），另外一种是通过arr[arr.length]=’string’的方式存入（方式3），这两种方式的性能也是有一些差异的。这样，我们发现一共是有三种不同的方式的，下面我对这三种方式在不同浏览器下的执行效率做了个对比，具体数据就不贴出来（因为每次的数据都是不同的，但执行速度的排名是比较稳定的），只对他们的执行效率做个排名。
===========================================
浏览器 方式1 方式2 方式3 引擎 google 3 2 1 AppleWebKit/525.19 safari 3 2 1 AppleWebKit/528.16 opera 1 3 2 Presto/2.1.1 ff3 1 3 2 Gecko/2009042316 ff2 1 3 2 Gecko/20081201 IE8 1 3 2 Trident/4.0 IE7 3 2 1 未知 IE6 3 2 1 未知
=============================================
对比可做以下简单总结：
最后附上测试用到得代码（注：为准确测试，在不同浏览器要修改循环次数数值）
<script type=”text/javascript”>
function badTest() {
var startTime = new Date().valueOf();
var s = “”;
for (var i = 0; i < 100000; i++) {
s += “This is a test string”;
}
return new Date().valueOf() – startTime;
}
function goodTest() {
var startTime = new Date().valueOf();
var stringBuffer = new Array();
for (var i = 0; i < 100000; i++) {
stringBuffer.push(“This is a test string”);
}
var s = stringBuffer.join(“”);
return new Date().valueOf() – startTime;
}
function betterTest() {
var startTime = new Date().valueOf();
var stringBuffer = new Array();
for (var i = 0; i < 100000; i++) {
stringBuffer[stringBuffer.length] = “This is a test string”;
}
var s = stringBuffer.join(“”);
return new Date().valueOf() – startTime;
}
function doTests() {
var htm = “”;
htm += “Time badTest took: ” + badTest() + “”;
htm += “Time goodTest took: ” + goodTest() + “”;
htm += “Time betterTest took: ” + betterTest();
htm += “” + navigator.userAgent;
document.getElementById(“result”).innerHTML = htm;
}
</script>
<a onclick=”doTests();” href=”javascript:void(0);”>Click here to test</a>
<div id=”result”>/div>
这种问题估计遇到的人不在少数，至少我遇到不下三次了，但每次解决后都没有形成深刻的印象，每次遇到还需要思考很久才能解决。
这种情况常见的是这样的：引入一个js文件，其中定义了一些函数或对象，然后在页面中调用这些函数或对象，在IE6+及其他标准浏览器中都没有问题，但IE6会报“找不到XXX对象”的错误，首先我们确认这个XXX对象在引入的JS文件中是存在的，因为在非ie6的浏览器都可以正常运行。这个问题关键就出在文件编码上，如果JS文件编码与当前页面的编码不一致，就可能导致在IE6中HTML页面不能正常获取和执行JS文件中的内容，在IE6中，浏览器默认引入的外部文件和页面的编码是一致的。在非IE6的浏览器中，一般浏览器会自动识别每个外部文件的编码并进行解析。
解决这个问题有两种方式：
相比之下，第二种可能更方便一些，而且作为一种好的习惯，平时我们应该尽可能都写上charset属性。
这是开发中总结的一些小经验，以后遇到此类问题不用再去迷茫了，IE6有很多“弱智”的地方，有时候也会让我们跟着“弱智”，希望IE6早日淘汰，以减轻我们开发人员的兼容之痛。