循环时的dom操作
<body>
<div id="resText"></div>
<div id="reshtml"></div>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type: "get",
url: "test.json",
data:{flag:"wap-mobile",mid:"m123456"}, //可选参数
dataType: "json",
success: function(data){
console.log(data);
//每次插入DOM (此方法不可取)
var mylist1 = $("#resText");
var l = data.result;
console.log(l);
for (var j=0;j<l.length;j++) {
console.log(data.result[j].brand_name);
//var mylist1 = $("#resText"); 不能在此获取dom、否则length为多长则取多少次！ 不可取
mylist1.append("<li>"+data.result[j].brand_name+"</li>"); //每次插入DOM
} //DOM已创建，只是改变值 （该方法可取）
var mylist2 = $("#reshtml"),
listli = "";
var l = data.result;
console.log(l);
for (var j=0;j<l.length;j++) {
console.log(data.result[j].brand_name);
listli +="<li>"+data.result[j].brand_name+"</li>";
}
mylist2.html(listli); }
});
}); </script>
</body>
test.json数据：
{
"result":[
{
"brand_id": "6394",
"brand_name": "雪花秀/SULWHASOO",
"brand_mainpage_pic": "img/6394.png"
},
{
"brand_id": "6435",
"brand_name": "爱丽小屋/ETUDE HOUSE",
"brand_mainpage_pic": "img/6435.png"
},
{
"brand_id": "6676",
"brand_name": "A.H.C",
"brand_mainpage_pic": "img/6676.png"
}
]
}
==========================================================================
减少DOM操作：
虽然javascript性能上有了很大的提升，但是DOM操作还是很耗费资源的，需要减少对DOM操作。当在一个页面中插入大量的元素的时候，尤其重要。例如：
<div id="elem" ></div>
// 不好的方式
//var elem = $('#elem');
//for(var i = 0; i < 100; i++){
// elem.append('<li>element '+i+'</li>');
//} // 好的方式
var elem = $('#elem' ),
arr = [];
for(var i = ; i < ; i++){
arr. push('<li>element ' +i+'</li>' );
}
elem. append(arr. join('' ));
将所有的元素缓存起来一次插入性能上会有所提升，因为只触发页面一次重绘。对于CSS样式属性也是同样的道理。
更多资源：前端页面卡顿？可能是DOM操作惹的祸，你需要优化代码
循环时的dom操作的更多相关文章
- 页面性能优化和高频dom操作
一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如下几点: 访问和修改DOM元素 修改DOM元素的样式,导致重绘或重排 通过对DOM元素的事件处理,完成与用 ...
- 高频dom操作和页面性能优化（转载）
作者:gxt19940130 原文:https://feclub.cn/post/content/dom 一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如 ...
- 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- 前端页面卡顿？或是DOM操作惹的祸，需优化代码
文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...
- webform（九）——JQuery基础（选择器、事件、DOM操作）
JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
- 为什么DOM操作很慢
转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...
- jquer 事件，选择器，dom操作
一.jQuery简介 jQuery 是一个 JavaScript 库.(其实就是js,就是封装了,语法上有些不一样) jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- JQuery（选择器、事件、DOM操作）
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
随机推荐
- 【HDU 3746 Cyclic Nacklace】
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
- 【CCF】JSON查询
#include<iostream> #include<cstdio> #include<string> #include<cstring> #incl ...
- 获取浏览器的homepage
主要知识点:跨进程访问数据 首先修改浏览器源码:BrowserSettings.java private static String getSDMCDefaultSharedPreferencesNa ...
- char与byte的区别
很多初学者(包括我,已经学了一年多java了)肯会对char和byte这两种数据类型有所疑惑,相互混淆,今天特地查了好多资料,对byte和char两种数据类型进行了总结和比较,先将结果与大家分享: b ...
- 【05】js异步编程理解
1.概念 同步:一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的.同步的.异步:每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务, ...
- Bzoj 3145 - [Feyat cup 1.5]Str
bzoj 3145 - [Feyat cup 1.5]Str Description 给你两个长度\(10^5\)级别的串\(S, T\) 求\(S,T\)的最长模糊匹配公共子串 模糊匹配 : 至多一 ...
- （二） Spring项目的搭建
传统的项目搭建,是将所依赖的第三方jar包复制到项目的类路径下.但是,这样带来的问题是,无法更好的对这些jar包进行动态管理. 目前主流的构建工具有:Ant.Maven.Gradle.以Maven为例 ...
- input输入框与元素间有间隙
<div class="container"> <button>1</button> <button>2</button> ...
- JavaScript文本收缩展开 showdetail
原文发布时间为:2009-11-15 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- GridView数据导入Excel/Excel数据读入GridView
原文发布时间为:2008-10-16 -- 来源于本人的百度文章 [由搬家工具导入] 效果图： 解决方案：页面增加一个按钮，单击事件添加如下方法：protected void Button1_Clic ...