摘要：
前端图片优化介绍随着前端页面越来越复杂，尤其是一些社区型的页面中，图片成了页面中不可或缺的资源，并且随着产品功能的叠加图片大小越来越多。以下是几个网站的图片所占的比重。由于图片是二进制文件，并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小。所以图片优化主要是选择合适的图片格式，在不降低图片质量的情况下去掉图片里的元数据信息。常用的一些优化方案目前图片优化使用比较多的主要是下面几种方式：选择合适的图片格式，如：png代替gif，尽量使用png8png使用pngout优化，jpg使用jpgtran通过yahoo的smush进行通过google的page spe 阅读全文
随笔档案-2012年02月
CSS垂直居中
2012-02-20 21:22 by 依水间, 415 阅读, 收藏, 编辑
摘要：
之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子，看来对此的需求还不少。现在就把我经验拿出来分享一下，希望大家鼓鼓掌。首先，要有一个概念：凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。现在来几个例子：一、单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置line-height和height，并使两值相等，再加上over-flow 阅读全文
如何减少浏览器repaint和reflow
2012-02-20 18:09 by 依水间, 3523 阅读, 收藏, 编辑
摘要：
一、什么是repaint/reflow?页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂，其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。以 阅读全文
翻译：ECMAScript 5.1简介
2012-02-20 16:16 by 依水间, 516 阅读, 收藏, 编辑
摘要：
byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=2148简介浏览器支持ES5的严格模式JSON添加对象额外的数组Function.prototype.bind补充参考简介ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。 与HTML5规范进程本质类似，ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。ES5还引入了一个语法的严格变种，被称为”严格模式(stric 阅读全文
翻编-JavaScript有关的10个怪癖和秘密
2012-02-20 16:12 by 依水间, 392 阅读, 收藏, 编辑
摘要：
byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1703标题中的“翻编”实际上是“翻译编辑”的简称，本文内容并不是逐词逐句的翻译，核心意思，大体内容一致，另外自己添加了很详细的demo页面和截图，以及修正了原文中的一些代码展示上的错误。原文作者：Andy Croxall原文链接：Ten Oddities And Secrets About JavaScript翻译编辑：张鑫旭//zxx:这里省掉200多字的唠叨……直接看翻译编辑内容数据类型和定义1. Null是个对象Jav 阅读全文
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息
2012-02-20 12:03 by 依水间, 332 阅读, 收藏, 编辑
摘要：
将HTML DOM中几个容易常用的属性做下记录：nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text文档节点的 nodeName 永远是 #document注释：nodeName 所包含的 XML 元素的标签名称永远是大写的nodeValue对于文本节点，nodeValue 属性包含文本。对于属性节点，nodeValue 属性包含属性值。nodeValue 属性对于文档节点和元素节点是不可用的。 阅读全文
JS库选择
2012-02-17 14:46 by 依水间, 3158 阅读, 收藏, 编辑
摘要：
现今流行的JS库各有各的功能，这些功能大致分为三大类：I、DOM的访问、遍历和操作；II、语言扩展、事件处理、AJAX、JSON和XML处理；III、界面组件；IV、动画效果。Dojo（http://dojotoolkit.com）：覆盖了全部四个功能，这个库分为core、dijit、dojox三个部分，可按需要添加。Prototype（http://prototypejs.org）：它提供了功能I和II。这个库可以说是所有JS库中最流行、应用最广泛的，很多JS库都是建立在它的基础上，而且，Prototype已经被集成到ROR中，据说也可能会成为JavaScript下个版本的语言核心部分。Pr 阅读全文
推荐19个很有用的 JavaScript 库
2012-02-16 14:40 by 依水间, 578 阅读, 收藏, 编辑
摘要：
流行的 JavaScript 库有jQuery，MooTools，Prototype，Dojo和YUI等，这些 JavaScript 库功能丰富，加上它们众多的插件，几乎能实现任何你需要的功能，然而需要实现一些特定的功能，则可以选择功能更专一的轻量库，今天这篇文章与大家分享16 个很有用的 JavaScript 库。Blackbird: Open Source JavaScript Logging UtilityBlackbird 是一款非常酷的 JavaScript 调试工具，带有一个漂亮的界面显示和过滤调试信息。Treesaver.jsTreesaver 是一个用于创建杂志布局的 Java 阅读全文
js获取url中请求数据
2012-02-14 11:57 by 依水间, 2190 阅读, 收藏, 编辑
摘要：
获取Url中的Get请求数据function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null;} 假如当前url为http://icafe.baidu.com:8000/icafe/icaf 阅读全文
relatedTarget、fromElement、toElement相关元素
2012-02-03 17:31 by 依水间, 8541 阅读, 收藏, 编辑
摘要：
在发生mouseover和mouseout事件时，还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内。对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。类似地，对mouseout事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件，这个属性的值是null。IE不支持realtedTarget属性，但提供了保存着同样信息的不同属性。在mouse 阅读全文
