前端性能优化:字符串的连接操作改进

在web开发中,避免不了字符串连接的操作,但字符串的连接操作性能高吗?

之前有不少文章说使用加号性能低下,建议使用数组的join操作。

测试代码:

var length = 300000;
    /*数组的 join*/
    function Test1() {
        var date1 = new Date().getTime();
        var t = [];
        for (var i = 0; i < length; i++) {
            t[i] = "name" + i;
        }
        arr.join("");
        var date12 = new Date().getTime();
        console.log("1Test" + ((date12 - date1)));
    }
    /*字符串 +操作*/
    function Test2() {
        var date1 = new Date().getTime();
        var t = "";
        for (var i = 0; i < length; i++) {
            t += "name" + i;
        }
        var date12 = new Date().getTime();
        console.log("2Test" + ((date12 - date1)));
    }

测试发现:在谷歌50中加号的操作比数组的join操作性能好,偏差两倍多。但在IE10中join操作性能比加号的操作性能好,偏差不到一倍。其实如果循环不是很大的话,偏差不是很明显。看来这个连接操作还是需要根据实际测试进行修改的。

微软参考文章

时间: 2024-10-14 21:55:01

前端性能优化:字符串的连接操作改进的相关文章

前端性能优化--DOM操作

缓存DOM对象 JavaScript的DOM操作可以说是JavaScript最重要的功能,我们经常要根据用户的操作来动态的增加和删除元素,或是通过AJAX返回的数据动态生成元素.比如我们获得了一个很多元素的数组data[],需要将其每个值生成一个li元素插入到一个id为container的ul元素中,最简单(最慢)的方式是: var liNode, i, m; for (i = 0, m = data.length; i < m; i++) { liNode = document.createE

前端性能优化:哪些DOM操作查询会引起刷新渲染树改变?

因为计算量与每次重排版有关,大多数浏览器通过队列化修改和批量显示优化重排版过程.然而,你可能(经常不由自主地)强迫队列刷新并要求所有计划改变的部分立刻应用.获取布局信息的操作将导致刷 新队列动作,这意味着使用了下面这些方法: ? offsetTop, offsetLeft, offsetWidth, offsetHeight ? scrollTop, scrollLeft, scrollWidth, scrollHeight ? clientTop, clientLeft, clientWidt

Web前端性能优化的9大问题

1.请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时,将

WEB前端性能优化小结

1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时

前端性能优化的七大手段

前面的话 本文将详细介绍前端性能优化的七大手段,包括减小请求数量.减小资源大小.优化网络连接.优化资源加载.减少重绘回流.使用性能更好的API和构建优化 减小请求数量 [合并] 如果不进行文件合并,有如下3个隐患 1.文件与文件之间有插入的上行请求,增加了N-1个网络延迟 2.受丢包问题影响更严重 3.经过代理服务器时可能会被断开 但是,文件合并本身也有自己的问题 1.首屏渲染问题 2.缓存失效问题 所以,对于文件合并,有如下改进建议 1.公共库合并 2.不同页面单独合并 [图片处理] 1.雪碧

前端性能优化分类

介绍 本文将详细介绍前端性能优化的七大手段,包括减少请求数量.减小资源大小.优化网络连接.优化资源加载.减少重绘回流.使用性能更好的API和构建优化 减少请求数量 [合并] 如果不进行文件合并,有如下3个隐患 1.文件与文件之间有插入的上行请求,增加了N-1个网络延迟 2.受丢包问题影响更严重 3.经过代理服务器时可能会被断开 但是,文件合并本身也有自己的问题 1.首屏渲染问题 2.缓存失效问题 所以,对于文件合并,有如下改进建议 1.公共库合并 2.不同页面单独合并 [图片处理] 1.雪碧图

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

2017前端性能优化清单

https://github.com/Findow-team/Blog/issues/11?utm_source=tuicool&utm_medium=referral 2017前端性能优化清单 你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具?有没有用过Brotli.Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?