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

╰半橙微兮° 2022-01-13 22:09 165阅读 0赞

日期：2013-7-3  来源：[GBin1.com][]

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

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

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动画][CSS]

via [极客社区][Link 2]

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

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130703-front-end-performance-optimization-5/
[Array.prototype.join]: http://www.gbin1.com/technology/javascript/20130703-front-end-performance-optimization-5/title.jpg
[Array.prototype.join_Array.prototype.join]: http://www.gbin1.com/technology/javascript/20130703-front-end-performance-optimization-5/index.html
[Link 1]: http://www.gbtags.com/gb/share/1215.htm
[CSS]: http://www.gbtags.com/gb/share/1374.htm
[Link 2]: http://www.gbtags.com/gb/share/1369.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java字符串连接性能优化

在Java中，字符串连接主要通过以下几种方式实现： 1. 使用"+"操作符：如`str1 + str2` 2. 使用String.concat()方法：如`String.co

╰+哭是因爲堅強的太久メ/ 2024年10月09日 20:09/ 0 赞/ 88 阅读

相关 Java字符串连接性能优化实例

在Java中，字符串连接通常通过加号 (+) 进行操作。然而，这种简单的做法在处理大量数据或者频繁操作时，其性能并不理想。以下是一个性能优化的实例： ```java //

短命女/ 2024年10月08日 03:39/ 0 赞/ 66 阅读

相关 Java字符串连接性能优化案例

在Java编程中，字符串的连接通常使用`+`操作符或者`String.concat()`方法。然而，如果处理大量数据或者频繁进行连接操作，可能会存在性能问题。以下是一个优化

水深无声/ 2024年09月20日 18:36/ 0 赞/ 96 阅读

相关 Java字符串连接性能优化实战

在Java中，处理大量字符串并进行高效连接是一个常见性能问题。以下是一些性能优化的实战方法： 1. 使用StringBuilder或StringBuffer：这两个类都是线程

忘是亡心i/ 2024年09月19日 03:54/ 0 赞/ 71 阅读

相关 Java字符串连接性能优化策略

在Java中，字符串的连接主要通过`+`操作符或者`String.concat()`方法进行。针对性能优化，可以采取以下策略： 1. **使用StringBuilder或St

小咪咪/ 2024年09月17日 07:03/ 0 赞/ 93 阅读

相关 Java字符串连接性能优化问题

在Java中，字符串的连接主要通过`+`操作符或`String.concat()`方法实现。对于大规模数据的连接，可能会面临一些性能问题，以下是一些优化建议： 1. **使用

╰半夏微凉°/ 2024年09月12日 10:03/ 0 赞/ 92 阅读

相关 Java字符串连接性能优化案例

在Java编程中，字符串的连接是常见的操作。然而，如果频繁进行大字符串的拼接，原始的字符串连接方式（如+或.concat()）可能会出现性能瓶颈。以下是一些优化方案： 1

客官°小女子只卖身不卖艺/ 2024年09月12日 05:45/ 0 赞/ 110 阅读

相关 Java字符串连接性能优化示例

在Java中，字符串的连接通常使用`+`操作符。然而，如果频繁进行大字符串的连接，可能会导致性能问题。以下是一些性能优化的方法： 1. 使用StringBuilder或S

约定不等于承诺〃/ 2024年09月10日 07:12/ 0 赞/ 93 阅读

相关前端性能优化：使用Data URI代替图片SRC

日期：2013-7-6 来源：[GBin1.com][] ![前端性能优化：使用Data URI代替图片SRC][Data URI_SRC] 提升页面大小的效率，不仅仅是

素颜马尾好姑娘i/ 2022年10月02日 07:45/ 0 赞/ 144 阅读

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

日期：2013-7-3 来源：[GBin1.com][] [![前端性能优化：使用Array.prototype.join代替字符串连接][Array.prototype.

╰半橙微兮°/ 2022年01月13日 22:09/ 0 赞/ 166 阅读