摘要：
本文绝大部分来自于http://www.oncoding.cn/2010/javascript-unit-testing-qunit/，由于最新版的QUNIT更改了API接口，本文稍作修改。QUnit是jQuery团队开发的JavaScript单元测试工具，使用方便，界面美观。什么是单元测试？单元测试又称为模块测试，是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑，也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行。通常来说，程式設計師每修改一次程式就會進行最少一次單元測試，在編寫程式的過程中前後很可能要進行多次單元 阅读全文
随笔分类 - 转载
Firebug控制台详解[转]
2012-07-04 21:41 by VVG, 381 阅读, 收藏, 编辑
摘要：
Firebug是网页开发的利器，能够极大地提升工作效率。但是，它不太容易上手。我曾经翻译过一篇《Firebug入门指南》，介绍了一些基本用法。今天，继续介绍它的高级用法。===================================Firebug控制台详解作者：阮一峰控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息。一、显示信息的命令Firebug内置一个console对象，提供5种方法，用来显示信息。最简单的方法是console.log()，可以用来取代alert()或document.write()。比如，在网页脚本中 阅读全文
网站前端性能优化总结【转】
2012-06-29 11:36 by VVG, 594 阅读, 收藏, 编辑
摘要：
一、服务器侧优化 1.添加Expires或Cache-Control信息头 某些经常使用到、并且不会经常做改动的图片（banner、logo等等）、静态文件（登录首页、说明文档等）可以设置较长的有效期（expiration date），这些HTTP头向客户端表明了文档的有效性和持久性。如果有缓存，文档就可以从缓存（除已经过期）而不是从服务器读取。接着，客户端考察缓存中的副本，看看是否过期或者失效，以决定是否必须从服务器获得更新。 各个容器都有针对的方案,，以Apache为例：ExpiresActive OnExpiresByType image/gif"access plus 1 w 阅读全文
使用requestAnimationFrame更好的实现javascript动画（kimhou 译）
2012-05-28 14:05 by VVG, 488 阅读, 收藏, 编辑
摘要：
一直以来，JavaScript的动画都是通过定时器和间隔来实现的。虽然使用CSS transitions 和 animations使Web开发实现动画更加方便，但多年来以JavaScript为基础来实现动画却很少有所改变。直到Firefox 4的发布，才带来了第一种对JavaScript动画的改善的方法。但要充分认识改善，这有利于帮助我们了解web动画是如何演变改进的。定时器Timer 用于创建动画的第一个模式是使用链式setTimeout()调用。在Netscape 3′s hayday的很长一段时期，开发者都记得一种在网络上随处可见的固定式最新行情状态栏，通常它类似于这样：(func... 阅读全文
css清除浮动各方法
2012-03-09 14:47 by VVG, 344 阅读, 收藏, 编辑
摘要：
（1）空标签法： 这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个“clear:both"的元素，强迫容器适应它的高度以便装下所有的float，并没限制使用什么样的标签，有用<br style=”clear:both”/>的，有用空<div style=”clear:both”></div>的;比如：<div> <div style ="float:left; width:40%;"> <p> Some content </p></div> <p&g 阅读全文
CSS/Javascript压缩工具taobao jsminifier[转]
2012-03-08 10:59 by VVG, 732 阅读, 收藏, 编辑
摘要：
Epile在网上找Javascript和CSS压缩软件的时候搜索到这款由淘宝在雅虎YUICompressed基础上开发的压缩工具，用起来还挺不错的。软件自带的安装说明说得不清楚，在这里Epile写了一个安装说明，并上传到Google Code分享给大家。本软件安装完毕可以直接在要压缩的文件点击右键使用，非常方便。安装说明下载jsMinifier安装Java SE Development Kit (JDK)打开“控制面板”，在其中打开“系统”，其下“高级”选项卡下的环境变量中的系统变量里添加变量名JAVA_HOME，变量值为Java SE Development Kit的安装目录，如“C:/Pr 阅读全文
利用Minify加速 优化网站性能教程
2012-03-08 10:42 by VVG, 1383 阅读, 收藏, 编辑
摘要：
Minify 是用PHP5开发的应用，通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件，移除一些不必要的空格和注释，进行gzip压缩，并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像，不过Minify可以合并任何你想要合并的JavaScript和CSS文件。一般情况下，网站速度的瓶颈都在前端，而最关键的就是资源的加载速度，但是大多数浏览器都有单个域名并发请求数限制，所以如果一个页面中存在很多的资源，比如CSS和JavaScript文件，那么明显会降低网站的加载速度，比较好处理方式就是 阅读全文
在服务端合并和压缩JavaScript和CSS文件[转]
2012-03-08 10:35 by VVG, 408 阅读, 收藏, 编辑
摘要：
Web性能优化最佳实践中最重要的一条是减少HTTP请求，它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URI以及性能问题，这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致，少量的网页会根据实际情况采取本地合并，这些合并中相当多的是有选择地手动完成，每次新的合并都需要重新在本地完成并上传到服务器，比较的随意和繁琐，同样文件的压 阅读全文
使用ANT对Js/Css文件进行合并和压缩处理 [转]
2012-03-07 20:58 by VVG, 3262 阅读, 收藏, 编辑
摘要：
使用ANT对Js/Css文件进行合并和压缩处理Tag：javascript css ant减少HTTP请求是优化网站速度的一个重要手段, 所以对javascript/css两种文件进行压缩或合并都是非常必要的.这里介绍利用ANT来自动进行文件合并和压缩.3.1. javascript文件合并在开发阶段常常会把javascript文件分成几部分来写, 比如模块式的开发或多人合作, 或者使用一些外部库. 在生产环境下将比较小的文件合并成一个可以减少HTTP请求的次数, 从而达到优化的目的.这里假设你对ANT有一定了了解, 如果没有可以参考[ANT简单介绍].Example 1: 例子比如现在需要把 阅读全文
垂直居中的几种实现方法
2012-03-01 16:26 by VVG, 306 阅读, 收藏, 编辑
摘要：
用过 Fireworks / PhotoShop 的人应该都知道，在画布中将一个页面模块居中是多容易的事，可如果是垂直居中，前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持（确切来说是提供不全）。今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路：一、利用 position 和负边距利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明：/* 代码实现： * 设定宽度和高度，父节点为 position:relative; CSS是这样写的: */.selector { position:abso... 阅读全文
CSS3 border-image的使用方法
2012-02-29 15:48 by VVG, 514 阅读, 收藏, 编辑
摘要：
一、border-image的兼容性border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅 Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息 了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些demo页面，要在 Firefox3.5+，chrome或Safari3+浏览器下才可以看到效果。二、熟悉border-image的一些特性我们可能对于CSS2中的background属性比较熟悉，例如：b 阅读全文
js正则函数match、exec、test、search、replace、split使用介绍集合
2012-02-27 21:16 by VVG, 329 阅读, 收藏, 编辑
摘要：
match 方法使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。stringObj.match(rgExp)参数stringObj必选项。对其进行查找的 String 对象或字符串文字。rgExp必选项。为包含正则表达式模式和可用标志的正则表达式对象。也可以是包含正则表达式模式和可用标志的变量名或字符串文字。其余说明与exec一样，不同的是如果match的表达式匹配了全局标记g将出现所有匹配项，而不用循环，但所有匹配中不会包含子匹配项。例子1：function MatchDemo(){ var r, re; // 声明变量。 var s = "The rain.. 阅读全文
前端优化之图片优化自动化[转]
2012-02-23 21:49 by VVG, 416 阅读, 收藏, 编辑
摘要：
前端图片优化介绍随着前端页面越来越复杂，尤其是一些社区型的页面中，图片成了页面中不可或缺的资源，并且随着产品功能的叠加图片大小越来越多。以下是几个网站的图片所占的比重。由于图片是二进制文件，并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小。所以图片优化主要是选择合适的图片格式，在不降低图片质量的情况下去掉图片里的元数据信息。常用的一些优化方案目前图片优化使用比较多的主要是下面几种方式：选择合适的图片格式，如：png代替gif，尽量使用png8png使用pngout优化，jpg使用jpgtran通过yahoo的smush进行通过google的page spe 阅读全文
让你的网站融入HTML5的元素[转]
2012-02-22 10:05 by VVG, 277 阅读, 收藏, 编辑
摘要：
我们已经看过许多关于HTML 5的文章了，但是，对于Web开发人员来说，最主要需要知道的是：我现在可以用上HTML 5来做些什么，我怎么开始使用它?本文将带您了解如何在你的站点上使用HTML 5。 已经有许多文章是关于HTML 5的了，例如“HTML 5时代来临”和“HTML 5会如何改变网络”之类的，但是对于Web开发人员来说，最主要需要知道的是：我现在可以用上HTML 5来做些什么，我怎么开始使用它?好消息是现在已经有不少的HTML 5里的东西可以使用了。 但是，开始你就必须要明白一件事情，你需要知道你的受众如何，否则的话你就不该使用HTML 5。假如你的站点的访问大部分人都是在使... 阅读全文
DOCTYPE声明对JS获取窗口宽度和高度的影响【转】
2012-02-08 11:11 by VVG, 464 阅读, 收藏, 编辑
摘要：
【摘注】：以下说法不准确，不是有没有DOCTYPE声明，而是不同的DOCTYPE声明对js的处理有影响。在没有DOCTYPE声明的情况下:document.body.clientWidthdocument.body.clientHeight为当前窗口的宽度/高度;在DOCTYPE声明以后document.body.clientWidthdocument.body.clientHeight为整个页面的宽度/高度;document.documentElement.clientWidthdocument.documentElement.clientHeight为当前窗口的宽度/高度;同样增加DOCT 阅读全文
[转]编写出色CSS代码的13个建议
2011-12-19 17:17 by VVG, 281 阅读, 收藏, 编辑
摘要：
CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：?*{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同，Res... 阅读全文