入门游戏开发

分类： javascript

  • 减少重复劳动：node之初体验

    自node横空出世来，业界充满了各种流言，众说纷纭。在性能、高并发方面如数家珍的对node称赞不已。但公司的业务在node上的尝试却很少，一来是新的东西，需要探索，稳定性有待考验；二来，既然已经有成熟的框架，而且能够轻车路熟的用起来，为何就要选择node。而node对大多数后台的开发来说语法上就是一道屏障，虽然屏障浅显，但习惯C++不愿去尝试新的东西，况且node没让他们觉得多牛逼。 （更多…）

  • JS本地缓存方案

    Seajs-localstorage作为一个seajs的插件，本质上是为了模拟Html5自身的application cache，因为application cache有其先天不足，所以才有了这个插件。出于对优化前端的性能考虑，就打算用JS本地缓存试试水，本文且就其源码做一些分析以及其实践经验总结。

    （更多…）

  • 图片文件本地缓存

    随着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函数

    可以配合图片的懒加载使用

    稍加改变，加上版本号，可以控制图片的改版发布了。