循环时的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 文件中,其中包含了所有 ...
随机推荐
- Gate Of Babylon(bzoj 1272)
Description Input Output Sample Input Sample Output 12 HINT /* 容斥+lucas+乘法逆元 首先,看到有限制的只有15个,因此可以用容斥原 ...
- DataBinder.Eval值的判断
原文发布时间为:2009-04-10 -- 来源于本人的百度文章 [由搬家工具导入] 问:如何对<%# DataBinder.Eval(Container.DataItem,"Ly_R ...
- 图表插件echars的使用案例
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---36
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- 常用 vim 命令总结
学习 vim ,是需要经常使用的,而这些命令,是我这段时间最常用的命令,很有效率的提高的我的文本编辑效率.----------------------------------------------- ...
- JDBC加载驱动的方法+statement
加载驱动方法 1.Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver"); 2. DriverManager.r ...
- (21)Oracle表查询进阶
转到基本查询 一.多表查询 笛卡尔积:每张表的列数相加,行数相乘. 连接条件:得出笛卡尔积后需要用where条件筛选出正确的数据.连接条件至少需要n张表减1个 1.等值连接 连接条件为等号 selec ...
- TopCoder SRM 682 Div1 Problem 450 SuccessfulMerger (环套树 + 分类讨论)
题意 给定一个$n$个点$n$条边的无向图,现在要把这个图进行若干次操作,并选择一个点作为首都. 要求除首都外的任意两个点$u$, $v$,从$u$走到$v$必须经过这个首都. 操作为合并两个相邻的 ...
- Codeforces 777D Cloud of Hashtags(贪心)
题目链接 Cloud of Hashtags 题目还是比较简单的,直接贪心,但是因为我有两个细节没注意,所以FST了: 1.用了cin读入,但是没有加 std::ios::sync_with_stdi ...
- POJ 2492 A Bug's Life 并查集的应用
题意:有n只虫子,每次给出一对互为异性的虫子的编号,输出是否存在冲突. 思路:用并查集,每次输入一对虫子后就先判定一下.如果两者父亲相同,则说明关系已确定,再看性别是否相同,如果相同则有冲突.否则就将 ...