作为开发，不仅仅是前端，优化总是你绕不开的事，我们的目标就是要产品变得更快。优化的对象不仅仅指产品本身，还有我们日常的开发流程。从加入团队到现在，大概有一半左右的时间花在了优化上，期间遇到了很多问题，回过头看，优化这件事情并不是那么简单，也是些很琐碎的事情，要打造一个无痛的开发流程，并且能够相对轻松的对产品持续优化真的不轻松。没有银弹，任何项目都要花很多时间和精力。但任何值得改善的地方能够有所提升都让我们觉得努力没白费。有时候只想懒一点，从枯燥的重复中解放出来。
分类： 技术
-
扒一扒前端构建工具FIS的内幕
每次发版本都有个蛋疼的问题，同一个页面改版，不仅要保证发出去的页面不报错，而且得兼容现网的版本。最为传统的方法就是在资源文件后面加上一个随机参数
xxx.js?t=1234，但即使是这样也无法保证拉回的xxx.js是新文件。最为安全的方法是将文件名改为新的。面对多人开发、模块共用等问题，你会发现手动改文件名是一个非常搓的想法，程序员喜欢偷懒，这是天性。理想的状态可能是这样的：不需要去做多余的体力劳动，只需一个命令即可完成，从开发到提测，到最后的上线。
基于nodejs的构建工具还是比较多，诸如grunt，gulp，yeoman，fis等等。
经过一些日子的捣腾，现在FIS已经在团队跑起来了，完全避免了发版本的问题。但FIS带来的好处远不止这些，下一篇文章会讲到我是如何将FIS运用到项目中的，以及对性能优化带来的好处。各位看官，这次且随我看看FIS到底是个什么玩意儿。
-
web性能优化–缓存
雅虎的16条优化准则，作为前端开发工程师，都是耳熟能详，信手拈来。但很多时候也能难完全的做得到，一些准则跟工程原则是冲突的，难以落实起来。
JS文件放尾部，CSS文件放头部等，这些基本的优化点还是可以做到，但是有时候遇到网速慢的情况，会出现一段时间的白屏，从用户体验的角度来说，还是有提升的空间。 根据移动站点的特性，已经用户对页面的期待看来，用户在刚打开页面的时候可以接受旧的东西。 （更多…）
-
wireshark语法
wireshark过滤支持比较运算符、逻辑运算符，内容过滤时还能使用位运算。如果过滤器的语法是正确的，表达式的背景呈绿色。如果呈红色，说明表达式有误。
-
减少重复劳动：node之初体验
自node横空出世来，业界充满了各种流言，众说纷纭。在性能、高并发方面如数家珍的对node称赞不已。但公司的业务在node上的尝试却很少，一来是新的东西，需要探索，稳定性有待考验；二来，既然已经有成熟的框架，而且能够轻车路熟的用起来，为何就要选择node。而node对大多数后台的开发来说语法上就是一道屏障，虽然屏障浅显，但习惯C++不愿去尝试新的东西，况且node没让他们觉得多牛逼。 （更多…）
-
图片文件本地缓存
随着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上已经说明，应该下个版本会合并上。