＜a＞中调用JS的方式和性能比对

前置基础

void关键字介绍

void是Javascript中的一个关键字，该关键字指定要运算一个表达式但不返回值（只会是undefined）。

void (expression)
void expression

表达式外侧的圆括号是选的，但是写上去是一个好习惯。

javascript:；

首先，可以通过javascript: 直接在表达式中执行js代码，javascript:;则是执行空语句的意思。
一般将其加在超级链接上，就可以防止链接跳转，并通过onclick事件来执行脚本。

<a href="javascript:;" onclick="javascript:alert('我能阻止页面跳转吗')">可以阻止跳转</a>

有人会说，我不用onclick直接将脚本写在href里面也是可以执行的呀！确实可以，但是有弊端，看后文讲解。

void(0)

等价于void (function(){0;})(),就是执行了一句毫无意义的脚本，表示我做事了，虽然这事毫无价值所言。

<a href="javascript:void(0);" onclick="javascript:alert('我能页面阻止跳转吗')">可以阻止页面跳转</a>

在某种意义而言，javascript:;与javascript:void(0);是等价的。

<a>标签中调用JS脚本常见用法与区别

直接通过href执行脚本

<a href="javascript:js_method()" >文本</a>

这是平台上常用的方法，但这种方法在传递this等参数时很容易出现问题，且javascript:协议作为<a>的href属性时不仅会导致不必要的触发window.onbeforeunload事件，在IE里面会使gif动画停止播放。还直接将js方法暴露在浏览器的状态栏。W3C标准不推荐在href里面执行javascript语句。

href为#

<a href="#" onclick="js_method()">文本</a>
<a href="#" onclick="js_method();return false;" >文本</a>

href=”#”,包含了一个位置信息，这个锚记又没写ID。而默认的锚是#top,也就是网页的顶端，所以点击后就默认跳转到页面顶部。可以通过return false;阻止其默认行为。

href为javascript:void(0)或者javascript:；

<a href="javascript:;" onclick="js_method()" >文本</a>
<a href="javascript:void(0)" onclick="js_method()" >文本</a>

前者href执行空脚本，后者执行无意义脚本，由onclick负责执行js函数，执行后还是在页面的当前位置。

据说javascript:void(0)这种写法开始是由一些写c的人，因为编写习惯而写的。后来有人将void函数去掉了，就有了比较简洁的写法javascript:;。不仅如此，从执行效率上说，javascript:;也是优于javascript:void(0)的。

关于<a>标签调用JS函数方法推荐（由上至下）

<a href="#" onclick="js_method();return false;" >文本</a>
<a href="javascript:;" onclick="js_method()" >文本</a>
<a href="javascript:void(0)" onclick="js_method()" >文本</a>

首先说下为什么要推荐使用不发生页面位置变化的方法，若非必要，尽量不要让页面发生滚动，页面滚动需要重新渲染页面帧，消耗性能。

其次，为什么return false;这种更优？点击链接后，首先执行的是onclick事件，再执行href，在onclick事件后直接返回false，则不再执行href里的代码。

至于为什么javascript:;优于javascript:void(0)，一个空语句，一个无意义语句，效果可想而知。