前端性能优化：使用Array.prototype.join代替字符串连接

来源：GBin1.com

有一种非常简单的客户端优化方式，就是用Array.prototype.join代替原有的基本的字符连接的写法。在这个系列的第一篇中，我在代码中使用了基本字符连接：

htmlStr += '<li>' + item.text + '</li>';

但是下面这段代码中，我用了优化：

var items = [];

ajaxResult.items.forEach(function(item) {
    // 构建字符串
    items.push('<li>', item.text, '</li>');
});

// 通过innerHTML设置列表内容
document.querySelector('ul').innerHTML = items.join('');

也许你需要花上一点儿时间来看看这个数组是做什么用的，但是所有的用户都从这个优化中受益匪浅。

下一篇，我们将谈谈在前端尽可能使用CSS动画

相关阅读：

• 前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入
• 前端性能优化：高频执行事件/方法的防抖
• 前端性能优化：网络存储的静态缓存和非必要内容优化
• 前端性能优化：使用异步加载，延迟加载依赖
• 前端性能优化：使用Array.prototype.join代替字符串连接

via 极客社区

来源：前端性能优化：使用Array.prototype.join代替字符串连接