• dom优化


    dom是什么?文档对象模型,用来操作html文档的,html的标签,节点(元素节点,文本节点,空白节点,注释节点),等等
    javescript由3部分构成,1,dom(操作html的,appendChild等等) 2,ECMA,(js的,,)3,bom浏览器对象模型(location等等)

    怎么优化dom性能?
    1.减少js操作dom,(把dom元素放到一个变量里,传变量)如for循环可以把str+='a',再for循环外innerHTML=str;
    2.innerHtml和dom方法法哪个好,,innerHTML方法稍微好(火狐下)dom方法好(谷歌下);所以分开来做,看需求。
    3.减少dom操作,1.用cloneNode()代替每次creatElement;
    2.把一堆集合变成局部变量,for循环里i<xx.length;改为a=xx.length;i<a;或者多次用到元素也变成变量var doc=document;
    3.元素节点,尽量用只获取元素节点的方法;(少用childNode,用children等具体点);
    4,选择器API,querySelect,querySelectAll('#UL li');IE8以上支持

    4.dom与BOM:重排,重绘
    1. 先其他操作,再appendChild,
    2.合并css样式操作,csstext可以合并多次操作(加宽高背景等);xx.style.csstext="100px;height:100px;background:red";
    3.利用缓存布局信息;(把每次用到的offsetLeft,offsetTop var=xx,xx++);
    4,文档碎片,creatDocumentFrame()--->收集文档碎片的袋子,oFrag.appendChild(oLi);
    5.事件委托
    6.DOM与前端模板(例如jquery的temp)的分离::逻辑与视图分离,提高整体性能,不是dom性能;

  • 相关阅读:
    Codeforce Round #215 Div2 C
    Facebook Hacker Cup 2014 Qualification Round
    Codeforce Round #214 Div2
    Codeforce Round #213 Div2
    FOJ 2013 11 月赛
    Codeforce Round #211 Div2
    Codeforce Round #210 Div2
    如何下载spring-framework
    [转]大型网站系统架构的演化
    sql查询,如何增加一列
  • 原文地址:https://www.cnblogs.com/zhangxinxin111/p/4724349.html
Copyright © 2020-2023  润新知