前端性能优化最佳实践 -凯发k8国际

元素，调用ajax获取json列表，然后使用javascript更新元素内容。通常，程序员会这么写：



var list = document.queryselector('ul');
ajaxresult.items.foreach(function(item) {
    // 创建
元素
    var li = document.createelement('li');
    li.innerhtml = item.text;
    // 
元素常规操作，例如添加class，更改属性attribute，添加事件监听等
    // 迅速将
元素注入父级
中
    list.apppendchild(li);
});



上面的代码其实是一个错误的写法，将
元素带着对每一个列表的dom操作一起移植是非常慢的。如果你真的想要 使用document.createelement，并且将对象当做节点来处理，那么考虑到性能问题，你应该使用documentfragement。

documentfragement 是一组子节点的“虚拟存储”，并且它没有父标签。在我们的例子中，将documentfragement想象成看不见的
元素，在 dom外，一直保管着你的子节点，直到他们被注入dom中。那么，原来的代码就可以用documentfragment优化一下：



var frag = document.createdocumentfragment();
ajaxresult.items.foreach(function(item) {
    // 创建
元素
    var li = document.createelement('li');
    li.innerhtml = item.text;
    // 
元素常规操作
    // 例如添加class，更改属性attribute，添加事件监听，添加子节点等
    // 将
元素添加到碎片中
    frag.appendchild(li);
});
// 最后将所有的列表对象通过documentfragment集中注入dom
document.queryselector('ul').appendchild(frag);



为documentfragment追加子元素，然后再将这个documentfragment加到父列表中，这一系列操作仅仅是一个dom操作，因此它比起集中注入要快很多。

如果你不需要将列表对象当做节点来操作，更好的方法是用字符串构建html内容：



var htmlstr = '';
ajaxresult.items.foreach(function(item) {
    // 构建包含html页面内容的字符串
    htmlstr  = '
'   item.text   '
';
});
// 通过innerhtml设定ul内容
document.queryselector('ul').innerhtml = htmlstr;



这当中也只有一个dom操作，并且比起documentfragment代码量更少。在任何情况下，这两种方法都比在每一次迭代中将元素注入dom更高效。

// 取自 underscorejs 实用框架
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callnow = immediate && !timeout;
        cleartimeout(timeout);
        timeout = settimeout(later, wait);
        if (callnow) func.apply(context, args);
    };
  }
// 添加resize的回调函数，但是只允许它每300毫秒执行一次
window.addeventlistener('resize', debounce(function(event) {
    // 这里写resize过程
}, 300));

define(function() {
    var cacheobj = window.sessionstorage || {
        getitem: function(key) {
            return this[key];
        },
        setitem: function(key, value) {
            this[key] = value;
        }
    };
    return {
        get: function(key) {
            return this.isfresh(key);
        },
        set: function(key, value, minutes) {
            var expdate = new date();
            expdate.setminutes(expdate.getminutes()   (minutes || 0));
            try {
                cacheobj.setitem(key, json.stringify({
                    value: value,
                    expires: expdate.gettime()
                }));
            }
            catch(e) { }
        },
        isfresh: function(key) {
            // 返回值或者返回false
            var item;
            try {
                item = json.parse(cacheobj.getitem(key));
            }
            catch(e) {}
            if(!item) return false;
            // 日期算法
            return new date().gettime() > item.expires ? false : item.value;
        }
     }
});

require(['storage'], function(storage) {
    var content = storage.get('sidebarcontent');
    if(!content) {
        // do an ajax request to get the sidebar content
        // ... and then store returned content for an hour
        storage.set('sidebarcontent', content, 60); 
    }
});

// 基本使用:  加载一部分amd格式的模块
c {
    dom.setelementcontent('.social-container', social.loadwidgets());
});
// 定义一个使用google analytics的模块，该模块是非amd格式的
define(["js!//google-analytics.com/ga.js"], function() {
    // return a simple custom google analytics controller
    return {
        trackpageview: function(href) {
            _gaq.push(["_trackpageview", url]);
        },
        trackevent: function(eventname, href) {
            _gaq.push(["_trackevent", "interactions", eventname, "", href || window.location, true]);
        }
    };
});
// 加载一个不带回调方法的非amd的js文件
c;
// 将javascript和css文件作为模块加载
c {
    prism.highlightall();
});
// 加载一个ajax请求的url
c {
    storage.set('sidebar', content, 60);
    dom.setelementcontent('.sidebar', content);
});

htmlstr  = '
'   item.text   '
';

var items = [];
ajaxresult.items.foreach(function(item) {
    // 构建字符串
    items.push('
', item.text, '
');
});
// 通过innerhtml设置列表内容
document.queryselector('ul').innerhtml = items.join(''); 

.myanimation {
    animation: someanimation 1s;
    transform: translate3d(0, 0, 0); /* 强制硬件加速 */
}

 
 
<-- 范例:  http://davidwalsh.name/demo/data-uri-php.php -->

/* 默认是为桌面应用加载图片 */
.someelement { background-image: ; }
 
@media only screen and (max-width : 1024px) {
    .someelement { background-image: ; }
}

function getuser(desiredusername) {
    var searchresult = ajaxresult.users.filter(function(user) {
        return user.username == desiredusername;
    });
 
    return searchresult.length ? searchresult[0] : false;
}
 
// 根据用户名获取用户
var davidwalsh = getuser("davidwalsh");
 
// 根据用户名获取另一个用户.
var techpro = getuser("tech-pro");

var userstore = {};
ajaxresult.users.foreach(function(user) {
    userstore[user.username] = user;
});

var davidwalsh = userstore.davidwalsh;
var techpro = userstore["tech-pro"];

• 使用:before和:after伪元素
• 延迟加载和呈现内容
• 使用事件委托，更简便的将节点转换成字符串存储

/* 使用web worker */
//  启动worker
var worker = new worker("/path/to/web/worker/resource.js");
worker.addeventlistener("message", function(event) {
    // 我们从web worker获取信息!
});
 
// 指导web worker工作！
worker.postmessage({ cmd: "processimagedata", data: convertimagetodatauri(myimage) });
 
/*  resource.js就是一个web workder */
self.addeventlistener("message", function(event) {
    var data = event.data;
 
    switch (data.cmd) {
        case 'process':
            return processimagedata(data.imagedata);
});
 
function processimagedata(imagedata) {
    // 对图像进行操作
    // 例如将它改成灰度
 
    return newimagedata;
}

// 主css文件(main.css)
@import "reset.css";
@import "structure.css";
@import "tutorials.css";
@import "contact.css";
 
// 然后在tutorials.css文件中，会继续有@import
@import "document.css";
@import "syntax-highlighter.css";

/* 以下全部写在一个css文件中 */
 
@media screen {
    /* 所有默认的结构设计和元素样式写在这里 */
}
 
@media print {
    /* 调整打印时的样式 */
}
 
@media only screen and (max-width : 1024px) {
    /* 使用ipad或者移动电话时的样式设定 */
}