<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. UVALive 6319 暴力

    思路:直接vector暴力 #include<iostream> #include<vector> #include<cstring> #include<cs ...

  2. Fabric 和 Sawtooth 技术分析（下）

    http://blog.talkingdata.com/?p=6172 在前一篇文章(Fabric和Sawtooth技术分析(上))中,我们着重跟大家分享了 Fabric 相关的内容,在本篇文章中,我 ...

  3. Codeforces Round #362 (Div. 2) B 模拟

    B. Barnicle time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  4. 关于设置组件的state时遇到的一些问题

    在使用react-bootstrap的时候设置showModel的值来控制Model的显示与隐藏,但是setState这个函数是异步的. 当你进行数据更新的时候,接着执行函数获取这个模态框的dom是获 ...

  5. 【02】 Vue 之 数据绑定

    2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定. 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的.通俗点说就是,Vue对象的改变会直接影响到HTML的标 ...

  6. BZOJ【1639】: [Usaco2007 Mar]Monthly Expense 月度开支

    1639: [Usaco2007 Mar]Monthly Expense 月度开支 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 700  Solved: ...

  7. 用IHTMLDocument2接口获取页面上想要的数据，代替正则表达式

    原文发布时间为:2010-07-01 -- 来源于本人的百度文章 [由搬家工具导入] 1. 用 IHTMLDocument2::all 获得所有元素； 2. 用 IHTMLElementCollect ...

  8. 【CDockablePane】关于CDockablePane

    1.DockPane是CFrameWndEx框架窗口的函数,不能用于基于对话框的应用程序,也不能用于老版本VC,只能用于基于单文档和多文档的应用程序. 2.最佳变通实现办法:创建CFormView基类 ...

  9. Cflow使用详解【转】

    转自:http://blog.csdn.net/hanchaoqi/article/details/40922615 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近使用cflow,根据Cf ...

  10. 修复受损的linux引导

    想来楼主玩linux差不多近20年了,从redhat,mandrke,manjaro,汉化,听歌.看电视电影.上网.打游戏.配置打印机等,碰到的问题一一解决了,但是一直对装好linux后重新安装win ...