Hi, I’m Adam Lu.

让javascript不阻断网站

我们知道如果把javascript放在外联标签里面不管是在ie67还是ff都会阻断网站的下载，虽然ie8, safari4以及chrome浏览器已经让Javascript并行下载，但依然还在阻断图片和iframe的下载，详情请看steve souders的这篇文章“Loading Scripts Without Blocking” ，其中也介绍了六种可以让javascript不阻断网站的方法：

    * XHR Eval - Download the script via XHR and eval() the responseText.
    * XHR Injection - Download the script via XHR and inject it into the page by creating a script element and setting its text property to the responseText.
    * Script in Iframe - Wrap your script in an HTML page and download it as an iframe.
    * Script DOM Element - Create a script element and set its src property to the script’s URL.
    * Script Defer - Add the script tag’s defer attribute. This used to only work in IE, but is now in Firefox 3.1.
    * document.write Script Tag - Write the <script src=”"> HTML into the page using document.write. This only loads script without blocking in IE.

其中通过创建一个script标签并且将其src设为script的URL是一个比较常见的技巧，并且当script下载完成后给其加一个callback函数，兼容ie和ff的代码如下： 继续阅读 »

通过HTML组件存储数据

我们在编写JS脚本的时候有时会给HTML的标签加一些属性，如

element.addEventListener(’click’, function(e){
this.rel += ‘ clicked’ + ‘(’ + e.clientX + ‘ ,’ + e.clientY + ‘)’;
});

这样可能就是侵入javascript的了，尽管HTML5里面加了一些属性比如data-remote=true是判断是否使用ajax来加载的，这对后端工程师可以酌情采用。

另外James Padolsey又给出了另一种方法，就是把JSON数据放到注释里面，写了一个commentData函数，源码如下： 继续阅读 »