<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操作的更多相关文章

  1. 页面性能优化和高频dom操作

    一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如下几点: 访问和修改DOM元素 修改DOM元素的样式,导致重绘或重排 通过对DOM元素的事件处理,完成与用 ...

  2. 高频dom操作和页面性能优化（转载）

    作者:gxt19940130 原文:https://feclub.cn/post/content/dom 一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如 ...

  3. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  4. 前端页面卡顿？或是DOM操作惹的祸，需优化代码

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

  5. webform（九）——JQuery基础（选择器、事件、DOM操作）

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  6. 为什么DOM操作很慢

    转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...

  7. jquer 事件，选择器，dom操作

    一.jQuery简介 jQuery 是一个 JavaScript 库.(其实就是js,就是封装了,语法上有些不一样) jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 ...

  8. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  9. JQuery（选择器、事件、DOM操作）

    一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...

随机推荐

  1. linux编程学习

    linux编程学习 工具篇 “公欲善其事,必先利其器”.编程是一门实践性很强的工作,在你以后的学习或工作中,你将常常会与以下工具打交道, 下面列出学习 C 语言编程常常用到的软件和工具. (一)操作系 ...

  2. 5-Dalvik垃圾收集机制Cocurrent GC

    Dalivik垃圾回收收机制Cocurrent GC简介和学习计划 导语: 在C/C++中,开发者需要手动地管理在堆中分配的内存,但是这往往导致很多问题. 1. 内存分配之后忘记释放,造成内存泄漏. ...

  3. Java EE 学习（4）：IDEA + maven 搭建 web（2）

    参考:http://www.bubuko.com/infodetail-1855067.html 现使用 Maven 创建项目:本节接Java EE 学习(3):IDEA + maven 搭建 web ...

  4. EasyUI-Calendar

    EasyUI-Calendar 日历篇 Calendar也是页面中经常用到的元素,easyui也为们提供了日历的组件,效果如下图所示: 使用方法如下所示: <div class="ea ...

  5. vim中代码注释与取消的两种方法

    一.灵活应用列操作 取消注释(删除列) 1.光标定位到需要注释的第一行的行首. 2.CTRL+v 进入"可视 块"模式,选取需要注释的其他多行. 3.d 删除,注释取消.   添加 ...

  6. 这一次，我连 web.xml 都不要了，纯 Java 搭建 SSM 环境!

    在 Spring Boot 项目中,正常来说是不存在 XML 配置,这是因为 Spring Boot 不推荐使用 XML ,注意,并非不支持,Spring Boot 推荐开发者使用 Java 配置来搭 ...

  7. eclipse启动Tomcat时报错：严重: Exception loading sessions from persistent storage

    我的项目工程是Spring+hibernate+structs  1.0,最近启动tomcat时多次遇到如下异常: 严重: IOException while loading persisted se ...

  8. centos7下使用wget命令安装mysql

    1.首先安装wget命令: yum -y install  wget 2.下载mysql wget http://repo.mysql.com/mysql-community-release-el7- ...

  9. 终端应用变身文件 MD5/SHA1 校验工具

    担心下载的文件被恶意篡改?没有找到 Mac 平台文件校验工具?其实 Mac OS X 系统中已经内置了“文件 MD5/SHA1 校验工具”,它就藏身于终端(Terminal)应用中! 打开终端应用,输 ...

  10. How To Install Oracle Forms 12c On Windows 7

    Below is the step by step guide to install Oracle Forms 12c on Windows 7. To install Oracle Forms 12 ...