先来说说为什么要自动化。凡是要考虑到自动化时，你所做的工作必然是存在很多重复乏味的劳作，很有必要通过程序来完成这些任务。这样一来就可以解放生产力，将更多的精力和时间投入到更多有意义的事情上。随着前端开发不再是简单的作坊式作业，而成为一个复杂的工程时，还涉及到性能优化一系列工作等等，这时自动化已然是迫切的需求。
标签： 前端
-
扒一扒前端构建工具FIS的内幕
每次发版本都有个蛋疼的问题，同一个页面改版，不仅要保证发出去的页面不报错，而且得兼容现网的版本。最为传统的方法就是在资源文件后面加上一个随机参数
xxx.js?t=1234，但即使是这样也无法保证拉回的xxx.js是新文件。最为安全的方法是将文件名改为新的。面对多人开发、模块共用等问题，你会发现手动改文件名是一个非常搓的想法，程序员喜欢偷懒，这是天性。理想的状态可能是这样的：不需要去做多余的体力劳动，只需一个命令即可完成，从开发到提测，到最后的上线。
基于nodejs的构建工具还是比较多，诸如grunt，gulp，yeoman，fis等等。
经过一些日子的捣腾，现在FIS已经在团队跑起来了，完全避免了发版本的问题。但FIS带来的好处远不止这些，下一篇文章会讲到我是如何将FIS运用到项目中的，以及对性能优化带来的好处。各位看官，这次且随我看看FIS到底是个什么玩意儿。
-
web性能优化–缓存
雅虎的16条优化准则，作为前端开发工程师，都是耳熟能详，信手拈来。但很多时候也能难完全的做得到，一些准则跟工程原则是冲突的，难以落实起来。
JS文件放尾部，CSS文件放头部等，这些基本的优化点还是可以做到，但是有时候遇到网速慢的情况，会出现一段时间的白屏，从用户体验的角度来说，还是有提升的空间。 根据移动站点的特性，已经用户对页面的期待看来，用户在刚打开页面的时候可以接受旧的东西。 （更多…）
-
[译文]更快的javascript memoization
memoization虽然并不是什么新鲜事，但确实是一个非常有用的技术手段来缓存函数的计算结果，例如冗长的查找或昂贵的递归计算。
基本的原理是，如果你可以判断在一次运算之前，程序已经完成依赖一组特定的输入值的计算，那么计算结果可以直接返回，而不需重复计算一次。
memoization可以帮助优化的一些问题包括：递归、高速缓存的canvas动画和更一般意义上的重复计算。
-
图片文件本地缓存
随着html5不断的被得到支持，从性能优化的角度讲，减少http请求是非常重要的优化手段。
html5的新的接口localstorage，提供了更大的存储空间，大部分浏览器支持5M的容量，足够存储JS等脚本文件。这样依赖就能减少一些HTTP请求，提升速度。
但也可以存储一些改动频率较低的静态图片，方案是将图标进行编码，存储该文件的编码。下面直接看代码：
var setImageSrc = function(img, src){
var local = localStorage.getItem("src"); //用src作key，也可以换其他标记
if(local){
img.src= local;
}else{
img.src = src;
img.onload = function(){
var canvas = document.createElement('canvas')
ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0);
var data = canvas.toDataURL('jpg'); //注意，浏览器不一定支持jpg格式的转换,这时会自动降级到png格式
localStorage.setItem("src", data);
}
// 跨域
img.setAttribute("crossorigin","anonymous"); //关键属性
}
}
setImageSrc($('feedImg'),'http://test.com/img/header-logo.png');这样就可以存储一些静态图片，但大小是图片本身的两倍，主要应用canvas的toDataURL函数
可以配合图片的懒加载使用
稍加改变，加上版本号，可以控制图片的改版发布了。
-
webview的CORS跨域
在项目中遇到个问题，页面嵌入在webview中。正常浏览器的如UC浏览器、QQ浏览器中使用CORS跨域请求是没问题，但在webview中却拉取失败，照理都是同样的请求，应该不是后台的问题。catch到的错误是
INVALID_STATE_ERR: DOM Exception 11
然后google之，发现是zepto的一个bug，git上已经说明，应该下个版本会合并上。