<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. df du 的区别

    https://blog.csdn.net/mike8825/article/details/51986405 https://www.cnblogs.com/scl1314/p/7534894.ht ...

  2. IntelliJ IDEA 使用技巧一览表

    IntelliJ IDEA使用技巧一览表 在使用 InelliJ IDEA 的过程中,通过查找资料以及一些自己的摸索,发现这个众多 Java 程序员喜欢的 IDE 里有许多值得一提的小窍门,如果能熟练 ...

  3. L#中 int.TryParse 有问题

    今天发现了一个 L# 的异常..因此记录一下 List<string> strList = new List<string>(); ; i<; ++i) { ; j< ...

  4. iOS之UITraitCollection

    UITraitCollection 为表征 size class 而生,用来区分设备.你可以在它身上获取到足以区分所有设备的特征. UITraitEnvironment 协议.UIContentCon ...

  5. cf 542E - Playing on Graph

    cf 542E - Playing on Graph 题目大意 给定一个\(n\le 1000\)个点的图 求经过一系列收缩操作后能否得到一条链,以及能得到的最长链是多长 收缩操作: 选择两个不直接相 ...

  6. Access数据库访问类 帮助类

    原文发布时间为:2009-10-28 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Data.OleDb; p ...

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

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

  8. 关于Struts2中param的作用

    1.页面传参与配置传参的区别: 如果页面Form表单的参数在Action类中有相应的setter方法,则会优先取页面Form表单传过来的值,如果页面没有该属性同名的参数,则会从配置文件中取同名的参数值 ...

  9. MySQL的配置文件无法修改的解决办法(Win8)

    问题描述      修改mysql5.7安装目录下my-default.ini发现不起作用: MySQL的版本是5.7,操作系统是window8.1.MySQL安装在 C:\Program Files ...

  10. 此时不应有 \Microsoft （转）

    原文转自 http://www.tuicool.com/articles/J7RFRz 下载boost库后,在cmd中运行bootstrap.bat ,输出 "此时不应有 \Microsof ...