<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. shell总结

    1. shell脚本的变量赋值 变量赋值语句中的等号左右不能有空格 即 a = 4 //错误 a=4   //正确 2. shell脚步的执行需要权限 chmod +x shell.sh ./shel ...

  2. 洛谷P2056 采花

    P2056 采花 52通过 99提交 题目提供者shengmingkexue 标签云端↑ 难度省选/NOI- 时空限制1s / 128MB 提交  讨论  题解 最新讨论更多讨论 求助莫队为什么被卡 ...

  3. 股票交易(bzoj 1855)

    Description 最近lxhgww又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,lxhgww预测到了未来T天内某只股票的走势,第i天的股票买入价 ...

  4. centOS 7 安装java sdk 并测试是否安装成功

    CentOS 6.X 和 7.X 自带有OpenJDK runtime environment  (openjdk).它是一个在linux上实现开源的Java 平台. 安装方式: 1.输入以下命令,以 ...

  5. kafka术语

    kafka 架构Terminology(术语) broker(代理) Kafka集群包含一个或多个服务器,这种服务器被称为broker Topic  每条发布到Kafka集群的消息都有一个类别,这个类 ...

  6. 基于 Intraweb 和 JQuery 的开发套件

    基于 Intraweb 和 JQuery 的开发套件 http://www.cgdevtools.com/ 开发速度无敌,界面也非常美. 我的web短板终于解决了.....!!!!..!!! 做一个小 ...

  7. centos 7 安装golang1.12.5

    本文主要介绍服务器端环境配置,开发环境是window的话可以参考 https://www.cnblogs.com/nickchou/p/10765743.html 方式一.用yum安装 1.用yum指 ...

  8. Python Challenge 第十二关

    这一关依旧只有一张图,右键源代码也没有任何注释,也用PIL处理过那张图但没任何头绪,没办法只有上网搜答案. 别人的博客里说,源代码里面图片的名字是 evil1.jpg,那肯定会有 evil2.jpg. ...

  9. 用Gson解析没有数据头的纯数组json字符串

    无数据头Json字符串 Json字符串只有数组,而次数组没有名字,如下 [ { "name": "zhangsan", "age": &qu ...

  10. react Native 运行报错之一 gradle-2.14.1-all解压失败的问题

    在react-native run-android  时 可能出现压缩包不成功的情况,原因是压缩包失败,需要手动解压到相应目录, 目录:C:\Users\Administrator\.gradle\w ...