我相信很少人知道JavaScript里还有这样一个很有用的东西：DocumentFragment。程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上，对这批子元素的操作不需要一个真正的根节点。程序员可以不依赖可见的DOM来构造一个DOM结构，而效率高是它真正的优势，试验表明，它比直接操作DOM快70%。

如果当你翻开一本书的时候，里面飞出来一只蝙蝠，或是一条会喷火的龙，你会有什么感觉？惊奇！赞叹！目瞪口呆！我想到了电影《哈利波特》里的那份会动的报纸。这里将会给你带来一种类似的奇观——一本书里的大千世界。随着浏览器技术的不断革新，越来越多的可能成为了现实。这里就是现代网页技术的典型代表。

如今的这个年代，流行在Web页面上使用了大量的JavaScript，我们需要寻找各种方式来优化它们，使它们更快。我们使用事件委托来让事件监听器更有效率，使用降频技术来限定某些方法的使用次数，使用各种JavaScript加载器来动态加载我们需要的资源，等等。

翻滚的海面，摇摇欲坠的灯塔，密布的乌云，暴风雨中的海燕。在加上CSS三维视差效果，虽是童话的世界，但亦真亦幻，令人神往。本作品是使用轻量级的js视差效果引擎parallax.js实现。在智能移动设备上效果更佳。

网页中JavaScript最基本的功能是监听或响应用户的动作，这非常的有用。用户的动作有些频率非常高，有的十分罕见。有些监听器函数的执行如闪电般完成，而有些繁重的会把浏览器拖死。拿浏览器窗口的resize事件来说，这种事件会在浏览器窗口大小的每一尺度变化都触发一次，如果监听器体量很大，你的浏览器很快就会被拖垮。

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。基本概念非常简单，但仍有很多人不理解事件委托的工作原理。

我喜欢到一些大型网站上去翻阅它们的原代码，期望能找到一些可以应用到自己的代码中的模式，或发现一些之前从未听说过的工具和技巧。可是，在我查看这些大型网站的源代码时，经常会发现一个问题，那就是重复的代码执行，重复的功能应用。

@supports是CSS和JavaScript规范中非常有用的补充。对浏览器新功能的检查已经是我们编程中非常常见的必要工作。@supports给我们提供了更底层的支持，而之前多少年我们都是用自定义方法实现。我估计，接下来的几年里，随着flexbox布局的普遍流行，我们将会看到对@support标记更加广泛的使用。

几个星期前，我发了一条微博说我喜欢返回函数的函数。很快就出现了几个回复，基本是都是….什么东东？！对于一个程序员来说，理解返回函数的函数是一个非常重要的技能，使用它你能节省很多代码，让JavaScript更高效，让你进一步理解JavaScript的强大之处。下面是我写的几个简单的例子，我希望通过它你能理解我所表达的意思。

不管我们对浏览器类型前缀有多么的讨厌，我们都不得不每天面对它，否者有些东西不能正常工作。这些前缀的用法有两种：在CSS里(例如“-moz-”)和在JS里。有一个神奇的X-Tag项目里有一段很聪明的JavaScript脚本，可以用来判断当前使用的是什么前缀——让我来展示它是如何工作的！

CSS伪元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形，用在提示框上面，还可以用它完成很多简单的任务，而不需要多余的HTML元素。以前，伪元素的CSS属性是无法用JavaScript获取的，但现在，有了一个新的JavaScript方法可以访问它们！ 假设你的CSS代码是这样的：

这些全屏API都超级的简单，而且超级的有用。我第一次是在MDN’s BananaBread demo中看到这个API的，那是一个枪击游戏，正好需要全屏化，它使用了事件监听来检测全屏状态。记住这些好用的API，需要的时候可以顺手拈来。

动态加载Javascript是一项非常强大且有用的技术。这方面的主题在本站已经讨论了不少，我也经常会在一些个人项目上使用RequireJS和Dojo加载js。它们很强大，但有时候也会得不偿失。如果你使用的是jQuery，它里面有一个内置的方法可以用来加载单个js文件。当你需要延迟加载一些js插件或其它类型的js时，你可以使用这个方法。下面就介绍一下如何使用它！

随着浏览器不断的升级改进，CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能，但最终，它们都属于网页前端技术，它们需要相互密切的合作。我们的网页中都有.js文件和.css文件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道！

进入2014年后，我们这些Web开发者开始慢慢发现需要面对一种困难，就是传统的JavaScript技术开始失效。很多年来我们一直依赖的那些JavaScript技巧技术，在如今CSS3兴起的情况下，很多的特效被浏览器内置的CSS功能替代。以前我们一直需要的一个功能——JS动画中结束时会触发回调函数——现在改用CSS动画后，如何触发这些回调动作？

我一直使用printf调试程序，一般来说都是比较顺利，但有时候，你会发现需要更好的方法。下面几个JavaScript技巧相信你一定会觉得十分有用，比如，有时候你会发现DOM不受你的控制，自己会发生一些奇怪的变化，让你很难找出问题的根源。谷歌浏览器的开发工具里有一个超级好用的功能，专门可以对付这种情况，叫做”Break on…”，