前言

最近在做webapp速度优化,思考各种提高加载速度的办法.包括不限于localStorage本地cache文件,模块化加载等等.

• localStorage本地cahce文件是什么?

说这个先说模块化加载,webapp想要形成闭环一般是单页面的形式,页面切换通过监听hashchange event来监听页面切换,从而display各个页面.这样拥有更好的用户体验,但同时维护成本颇高,这个有点扯远了. 继续说说单页面,既然是单页面就需要把所有的静态文件给加载近来,包括css/js/front end template等,这样加载了很多冗余的文件,所以我们需要模块化加载了,我们不是简单的动态加载js,而且还要动态加载css&front end template,当然为了提高加载速度,减少HTTP request,当然要把它们以页面为单位编译在一起,推荐使用nodejs前端工业环境fis里面提供了很多方便的功能和组件,甚至可以自己扩展等.

conan

fis有一个特性可以在编译压缩时就可以根据require形成模块依赖关系表(hash map),然后我们可以根据这个表加载文件,而不是像一般的模块加载器,在浏览器里面来寻找依赖关系.

有了模块化加载就好了，之后可以做我们不使用jsonp而使用ajax,获取到文件字符串,做一个localStorage缓存,另外,fis可以把文件编译成包含md5码的文件名,这个md5码根据文件内容生成,我们就可以通过md5码来判断文件是否更新,从而线上获取还是本地获取了..

以上就是一点点优化心得了..

基本思路

然后我们继续回到主题,通过标记各个过程所耗费的时间,从而看到哪个点花费时间较长,做更加细致的优化.而不是盲目优化,也许想象的优化和实际的效果恰恰想法,我就遇到了这种问题,自以为是的优化是我最大的错误,这也是我写这篇文章的动机.希望更多人不要重蹈覆辙.

例如,以下几个过程

• cdn lookup+ connecting + sending+ waiting+ receiving,这些时间都可以在performance.timing对象里面找到,不过很多浏览器(browser)不支持.

• 然后就是页面的加载时间了,在head打一个时间戳

• css加载时间 然后在css前面加一个时间戳,可以统计css的加载时间,

然后页面初始化js时加一个时间戳

PAGE_WATCH.index.inintBefore = Date.now();

其他时间戳等等.

 //.....

在页面render之后就可以在控制台里面输出了.. //0个参数是打印所有,一个参数是get,2个参数是set,

 log = function(name, value) {
    var me = this;
    var maxLength = 2;
    if (!this.logData) {
    this.logData = [];
    this.totalCache = $.localStorage(me.ec.action + 'logData') || [];
    while (this.totalCache.length > maxLength) this.totalCache.shift();
    this.totalCache.push(this.logData);
    }
    if (name !== undefined && value !== undefined) {
    if (this.logData.length === 0 || this.logData[this.logData.length - 1][name] !== undefined) {
            this.logData.push({})
        }
            this.logData[this.logData.length - 1][name] = value;
        } else if (_.isString(name)) {
            var result = [];
            for (var i = 0; i < this.logData.length; i++) {
            if (this.logData[i][name] !== undefined) {
                result.push(this.logData[i][name]);
            }
        }
            console.log(name, result);
            return result;
        } else {
            this.totalCache.forEach(function(val, key) {
            console.table(val);
        });
        if (!this.onbeforeunload) {
                window.onbeforeunload = this.onbeforeunload = function() {
                    var mean = 0;
                    var len = 0;
                    me.logData.forEach(function(val, key) {
                    if (!isNaN(+val[me.ec.action + ' totoal'])) {
                    len++;
                    mean += val[me.ec.action + ' totoal'];
                    }
                    });
                    mean = mean / len;
                    me.logData[me.logData.length - 1][me.ec.action + ' totoal'] = me.logData[me.logData.length - 1][me.ec.action + ' totoal'] + '-mean:' + mean;
                    me.logData[me.logData.length - 1][me.ec.action + ' totoal'] = Math.round(me.logData[me.logData.length - 1][me.ec.action + ' totoal']);
                    $.localStorage(me.ec.action + 'logData', me.totalCache);
                }
            }
        }
    }]

结束语

无论是开发还是优化最好是根据数据来开发,这样开发出来的网站才能又快又性能帮帮..