JS字符串拼接优化
// 请把以下用于连接字符串的JavaScript代码修改为更高效的方式 var htmlString = ‘ < div class=”container” > ’ + ‘ < ul id=”news-list” > ’;
for (var i = 0; i < NEWS.length; i++) {
htmlString += ‘ < li > < a href=”’ +NEWS[i].LINK + ‘” > +NEWS[i].TITLE + ‘ < /a > < /li > ’;
}
htmlString += ‘ < /ul > < /div > ’;
考点有两个:
- JavaScript字符串的连接机制。
- 大规模的循环体是重点优化对象
先看第一点,字符串的连接机制
var str ;
str = 'this is a string';
str = str + ',another string.';
对于这个连接操作JS的处理机制是:
(1)新建一个临时字符串,
(2)将新字符串赋值为 str + ',another string.' ,然后返回这个新字符串
(3)并同时销毁原始字符串
所以字符串的连接效率较低。提高效率的办法是用数组的join函数,使用join代替字符串拼接这个技巧对于IE6、7有显著性能提升,同时对现代浏览器,没有太过明显的性能损耗
第二点,大规模的循环体是主要的优化对象
在JavaScript中,我们可以使用for(;;)
,while()
,for(in)
三种循环,事实上,这三种循环中for(in)的效率极差,因为它需要查询散列键,只要可以,就应该尽量少用。for(;;)
和while循环,while循环的效率要优于for(;;)
,因为for(;;)
结构的问题,需要经常跳转回去。常用的循环优化都会将循环倒过来,最常用的for循环和while循环都是前测试循环,而如do-while这种后测试循环,可以避免最初终止条件的计算,因此运行更快。
var arr = [1, 2, 3, 4, 5, 6, 7];
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
sum += arr[i];
} //可以考虑替换为: var arr = [1, 2, 3, 4, 5, 6, 7];
var sum = 0, l = arr.length;
do{
sum += arr[l];
}while(l--)
NEWS.length需要缓存,减少每次循环都去访问一次属性不然每次循环都要重新计算一次length
对NEWS,NEWS[i]使用局部变量是高效的:
var item =NEWS[i]。
NEWS[i].LINK - > item.LINK
NEWS[i].TITLE - > item.TITLE
经过上面两步优化,最终程序为
var htmlString=[];
htmlString.push( "< div class='container' > < ul id='news-list' > "); //此处要保持拼接的次序,所以采用i++而不是len--的书写方式
for(var i=0,len=NEWS.length; i<len;i++){
var item = NEWS[i];
}
htmlString.push( ‘ < /ul > < /div > ’);
htmlString=htmlString.join(“”);
JS字符串拼接优化的更多相关文章
- html转js字符串拼接
https://www.bejson.com/convert/html_js/ html转js字符串拼接
- 【javaScript】js出现allocation size overflow以及字符串拼接优化
字符串拼接长一点了,就出现了allocation size overflow异常! 先创建缓冲字符串数组,最后将数组转化为字符串 <script type="text/javascri ...
- Js 字符串拼接的两种方法
字符串拼接的两种方法 用数组的方法的好处是:避免变量重新定义.赋值 <!DOCTYPE html> <html lang="en"> <head> ...
- js 字符串拼接、截取、查找...
函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: let str=”020-88888888-03”; let arr=str.split(”-”); console ...
- js 字符串拼接
正常来说已经使用es6 的 模板了如`` //页面层 layer.open({ type: 1, content:`<div class="child_card"> & ...
- js 字符串拼接 html 累加 html 叠加
正常来说已经使用es6 的 模板了如`` //页面层 layer.open({ type: 1, content:`<div class="child_card"> & ...
- ajax 参数data问题 data中的 参数名 参数值为string 提交到后台后,会自动转换参数名相同的 类型 和 js字符串拼接
latlng"14.6005238,100.43635419999998"Cusid"accb5c1b-6aef-4f3b-a4eb-d60ea1ca5f54" ...
- js字符串拼接
1. 2. 3.
- 从字符串拼接看JS优化原则
来自知乎的问题:JavaScript 怎样高效拼接字符串? 请把以下用于连接字符串的JavaScript代码修改为更高效的方式: var htmlString ='< div class=”co ...
随机推荐
- Java_io体系之PipedWriter、PipedReader简介、走进源码及示例——14
Java_io体系之PipedWriter.PipedReader简介.走进源码及示例——14 ——管道字符输出流.必须建立在管道输入流之上.所以先介绍管道字符输出流.可以先看示例或者总结.总结写的有 ...
- MVC框架个人浅析
1.概述: 相信不少前端从业者,都会遇到MVC编程模式,现今多数轻量级网站用php作为后台交互,MVC编程模式用于JAVAWEB开发,应用类型以系统占多数(包括并不限于系统,电商网站,平台交互当然都能 ...
- INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES错误解决方法
在安装APK文件时出现类似INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES的提示,同时类似的提示如下: Android Launch! adb is run ...
- Linux下基于源代码方式安装MySQL 5.6
MySQL为开源数据库,因此能够基于源代码实现安装.基于源代码安装有很多其它的灵活性. 也就是说我们能够针对自己的硬件平台选用合适的编译器来优化编译后的二进制代码.依据不同的软件平台环境调整相关的编译 ...
- USB HID Report Descriptor 报告描述符详解
Report descriptors are composed of pieces of information. Each piece of information is called an Ite ...
- jQuery简介以及jQuery选择器
一 简介 1 定义:jQuery库是JavaScript的封装库 2 优点: 1) : 代码开源 2) : 选择器强大 3) : 完善的Ajax 4) : 浏览器兼容性高 5) : 文档完善(帮助文档 ...
- Android-版本与api对应关系图
Code name Version API level Lollipop 5.1 API level 22 Lollipop 5.0 API level 21 KitKat 4.4 - 4.4.4 A ...
- JS 匿名函数
一.声明: 1. 正常函数声明: //正常函数声明 function foo(p1, p2){ return p1+p2; } 2. 匿名函数声明: //匿名函数声明 var foo= functio ...
- 【转】C++成员函数的存储方式
[转] http://c.biancheng.net/cpp/biancheng/view/187.html 用类去定义对象时,系统会为每一个对象分配存储空间.如果一个类包括了数据和函数,要分别为数据 ...
- JS通用表单验证函数,基于javascript正则表达式
表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...