【2016-04-14】前端目录树加载速度优化

为什么80%的码农都做不了架构师？>>>   

项目中有个报表配置页面，左侧是所有报表的目录树，右侧是报表的配置。

本来很简单的页面，随着报表的增多，页面展示的速度越来越慢，到了今天终于不能忍了，于是优化~

chrome里看了下XHR请求的加载速度，500ms，感觉应该还能忍，在timeline里发现XHR返回后处理花了1.7s，这个处理过程报错两部分：

• ztree初始化；

• select2控件初始化：select2控件可以搜索ztree中所有报表节点

本来以为是数据量比较大，导致ztree初始化比较慢，但是官方给出的demo表示5000个节点初始化只要70ms，遂排除ztree太慢的可能。

于是开始优化剩下的部分代码，方法很简单，移到setTimeout里，使之成为异步的，select2的初始化先排队，先渲染页面。

使用setTimeout还踩了个坑：

setTimeout(function () {
    // init select2
}, 20);

这样的可以异步，但是下面的就不异步了：

setTimeout(initSelect2(), 20);
function initSelect2(){
    // init select2   
}

原因嘛很简单，因为setTimeout第一个参数是函数名，写成initSelect2()就变成自执行了，快被自己蠢哭了。

转载于:https://my.oschina.net/rathan/blog/659475