javascript质量优化,有关javascript的质量优化

复制代码 代码如下:

repaint(重绘) ,repaint产生转移时,成分的外观被改换,且在未曾变动布局的情景下发生,如改换outline,visibility,background
color,不会耳濡目染到dom结构渲染。

repaint(重绘)
,repaint发生变动时,成分的外观被改成,且在并未有改观布局的情况下发生,如退换outline,visibility,background
color,不会听得多了就能说的详细到dom结构渲染。
javascript质量优化,有关javascript的质量优化。reflow(渲染),与repaint不一致就是她会影响到dom的布局渲染,同期他会触发repaint,他会转移她自个儿与具备父辈成分(祖先),这种支付是相当高昂的,导致品质减少是一定的,页面元素越来越多效果与利益越刚毅。
javascript质量优化,有关javascript的质量优化。何时爆发:

 repaint(重绘)
,repaint爆发变动时,成分的外观被转移,且在并未有改观布局的情形下发出,如改换outline,visibility,background
color,不会影响到dom结构渲染。

reflow(渲染),与repaint差别正是她会影响到dom的布局渲染,同期他会触发repaint,他会变动她本人与持有父辈成分(祖先),这种支付是极度昂贵的,导致品质减弱是早晚的,页面成分愈来愈多效果与利益越精通。

  1. DOM成分的增加、修改(内容)、删除( Reflow + Repaint)
  2. 仅修改DOM成分的书体颜色(独有Repaint,因为没有须求调度布局)
  3. 行使新的体裁或许修改任何影响因素外观的特性
  4. Resize浏览器窗口、滚动页面
    5.
    读取成分的少数质量(offsetLeft、offsetTop、offsetHeight、offsetWidth、
    scrollTop/Left/Width/Height、clientTop/Left/Width/Height、
    getComputedStyle()、currentStyle(in IE))
    怎么样幸免:
  5. 先将成分从document中删去,完结修改后再把成分放回原本的职位
  6. 将成分的display设置为”none”,完成修改后再把display修改为本来的值
    3.
    假若急需创建三个DOM节点,能够运用DocumentFragment成立完后一次性的投入document
      
    var fragment = document.createDocumentFragment();
    fragment.appendChild(document.createTextNode(‘keenboy test 111’));
    fragment.appendChild(document.createElement(‘br’));
    fragment.appendChild(document.createTextNode(‘keenboy test 222’));
    document.body.appendChild(fragment);
  7. 汇聚修改样式
      4.1尽也许少的更动成分style上的属性
      4.2尽恐怕通过修改className来修改样式
      4.3透过cssText属性来安装样式值
        element.style.width=”80px”;  //reflow
        element.style.height=”90px”; //reflow
        element.style.border=”solid 1px red”; //reflow
        以上就发生多次reflow,调用的越来越多产生就越来越多
        element.style.cssText=”width:80px;height:80px;border:solid 1px
    red;”; //reflow 
      4.4缓存Layout属性值
        var left=elem.offsetLeft; 多次选用left也就爆发三次reflow
      4.5设置元素的position为absolute或fixed
        成分脱离规范流,也从DOM树结构中脱离出来,在须求reflow时只必要reflow本人与下属成分
      4.6尽可能不要用table布局
        table成分一旦触发reflow就能够形成table里全数的任何成分reflow。在符合用table的地方,能够安装table-layout为auto或fixed,这样能够让table一行一行的渲染,这种做法也是为着限制reflow的震慑范围
      4.7幸免使用expression,他会每一回调用都会再度计算一回(包涵加载页面)

reflow(渲染),与repaint不一致正是她会影响到dom的构造渲染,同期他会触发repaint,他会转移她本人与拥有父辈成分(祖先),这种支付是充足高昂的,导致质量降低是无庸置疑的,页面元素更加的多效果与利益越生硬。

什么日期产生:

 

几时发生:
. DOM成分的丰盛、修改(内容)、删除( Reflow + Repaint)
. 仅修改DOM成分的书体颜色(独有Repaint,因为没有供给调治布局)
. 应用新的体制大概修改任何影响因素外观的属性
. Resize浏览器窗口、滚动页面
. 读取成分的一些质量(offsetLeft、offsetTop、offsetHeight、offsetWidth、
scrollTop/Left/Width/Height、clientTop/Left/Width/Height、
getComputedStyle()、currentStyle(in IE))

  1. DOM成分的增加、修改(内容)、删除( Reflow + Repaint)
  2. 仅修改DOM成分的书体颜色(独有Repaint,因为无需调度布局)
  3. 行使新的体制或然修改任何影响因素外观的习性
  4. Resize浏览器窗口、滚动页面
  5. 读取成分的少数属性offsetLeft、offsetTop、offsetHeight、offsetWidth、
    scrollTop/Left/Width/Height、clientTop/Left/Width/Height、
    getComputedStyle、currentStyle(in ie)

 

什么样幸免:
. 先将成分从document中去除,实现修改后再把元素放回原来的义务
. 将成分的display设置为”none”,完结修改后再把display修改为原来的值
.
假若须要创设几个DOM节点,能够采取DocumentFragment创造完后一回性的加入document
  

哪些幸免:

摘自 keenboy

var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode(‘keenboy test 111’));
fragment.appendChild(document.createElement(‘br’));
fragment.appendChild(document.createTextNode(‘keenboy test 222’));
document.body.appendChild(fragment);
. 聚集期维修改样式
  4.1尽恐怕少的修改成分style上的属性
  4.2尽量通过修改className来修改样式
  4.3因而cssText属性来设置样式值
    element.style.width=”80px”;  //reflow
    element.style.height=”90px”; //reflow
    element.style.border=”solid 1px red”; //reflow
    以上就发出数次reflow,调用的越来越多产生就更加的多
    element.style.cssText=”width:80px;height:80px;border:solid 1px
red;”; //reflow 
  4.4缓存Layout属性值
    var left=elem.offsetLeft; 数十三回使用left也就爆发叁次reflow
  4.5安装成分的position为absolute或fixed
    成分脱离标准流,也从DOM树结构中退出出来,在急需reflow时只供给reflow本身与麾下成分
  4.6不择手腕不要用table布局
    table成分一旦触发reflow就能够招致table里全体的别样元素reflow。在符合用table的场子,可以安装table-layout为auto或fixed,那样能够让table一行一行的渲染,这种做法也是为着限制reflow的影响范围
  4.7制止使用expression,他会每一遍调用都会另行总结一回(富含加载页面)

  1. 先将成分从document中剔除,达成修改后再把元素放回原位
  2. 将成分的display设置为”none”,完结修改后再把display修改为本来的值
    3.
    假设须求制造八个DOM节点,能够应用DocumentFragment成立完后三回性的加入document
      

)
,repaint产生变动时,成分的外观被改动,且在未曾变动布局的境况下发出,如更换outline,visibility,background
color,不会影响到do…

参考:

var fragment =
document.createDocumentFragment();

Yahoo! 质量程序员 Nicole Sullivan 在新型的篇章 《Reflows & Repaints: CSS
Performance making your JavaScript slow?》

fragment.appendChild(document.createTextNode(‘keenboy test
111’));

您也许感兴趣的篇章:

  • js品质优化
    如何更急迅加载你的JavaScript页面
  • JS质量优化笔记寻觅整理
  • JS 网址品质优化笔记
  • web质量优化之javascript品质调优
  • javascript模版引擎-tmpl的bug修复与质量优化深入分析
  • 关于Javascript加载实行优化的钻研告诉
  • js品质优化技艺
  • JavaScript品质优化之小知识总括
  • 客户端js品质优化小才能整理
  • JavaScript质量优化总括之加载与施行

fragment.appendChild(document.createElement(‘br’));

fragment.appendChild(document.createTextNode(‘keenboy test
222’));

document.body.appendChild(fragment);

  1. 聚焦修改样式 
      4.1尽只怕少的退换元素style上的属性 
      4.2竭尽通过修改className来修改样式
      4.3通过cssText属性来安装样式值
        element.style.width=”80px”;
     //reflow

    element.style.height=”90px”; //reflow

    element.style.border=”solid 1px red”; //reflow
    以上就发生数12回reflow,调用的越来越多爆发就愈来愈多
    element.style.cssText=”width:80px;height:80px;border:solid
1px red;”; //reflow 
  4.4缓存Layout属性值 
    var
left=elem.offsetLeft; 数十次选用left也就时有发生三遍reflow
  4.5装置成分的position为absolute或fixed
    成分脱离标准流,也从DOM树结构中剥离出来,在急需reflow时只要求reflow本身与下级元素
  4.6尽量不要用table布局
    table成分一旦触发reflow就能够招致table里全部的另外成分reflow。在符合用table的场子,能够安装table-layout为auto或fixed,那样能够让table一行一行的渲染,这种做法也是为着限制reflow的熏陶范围
  4.7幸免使用expression,他会每一遍调用都会重复计算三次(富含加载页面)

参考:

Yahoo! 品质工程师 Nicole
Sullivan 在新式的稿子 《Reflows
& Repaints: CSS Performance making your JavaScript
slow?》
     

 

 

 

 

 

亚洲城欢迎您 , 

 

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注