<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. Vue中slot内容分发

    <slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性 <!DOCTYPE html> <html> <head> <meta ...

  2. javaScript 笔记(5) --- jQuery（上）

    这节整理整理 iquery.js 相关的内容... 目录 --- jQuery 语法 --- 文档就绪事件 --- jQuery 选择器 --- jQuery 事件 --- jQuery 效果 jQu ...

  3. 【01】iconfont的使用

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  4. 数据库一直显示"正在恢复"

    restore database [DataBase] with recovery ALTER DATABASE DataBase SET OFFLINE WITH ROLLBACK IMMEDIAT ...

  5. 用正则表达式把页面中的px全部替换成rem

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. [LeetCode] Maximum Depth of Binary Tree dfs,深度搜索

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  7. Android解析XML之SAX解析器

    SAX(Simple API for XML)解析器是一种基于事件的解析器,它的核心是事件处理模式,主要是围绕着事件源以及事件处理器来工作的.当事件源产生事件后,调用事件处理器相应的处理方法,一个事件 ...

  8. Linux(ubuntu)下手动安装 firefox 6 并且添加快捷方式图标

    Mozilla 正式发布了Firefox 6,如果你的电脑上还在用非常古老的版本么,赶紧过来更新下吧,由于官网上面只是提供了linux下的.bz2的压缩包,没有deb或者rmp格式,所以需要自己安装下 ...

  9. C#TreeView读取Xml，TreeView导出到Xml

    实现功能有1.根据Xml生成TreeView2.双击修改节点3.右键添加子节点或添加要节点4.右键删除当前选择的节点5.将修改后的TreeView重新生成Xml文档 其实这个主要是实现 了Xml生成T ...

  10. NOIP 2016 天天爱跑步 80分暴力

    题目描述 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.«天天爱跑步»是一个养成类游戏,需要玩家每天按时上线,完成打卡任务. 这个游戏的地图可以看作一一棵包含 个结点 ...