网页九大技巧【金冠53777】

作者:操作系统

巩固网页品质的九大手艺,网页九大技能

      第一条,DOM 的七个读操作(或三个写操作),应该放在一同。不要四个读操作之间,参预三个写操作。

  第二条,借使有个别样式是透过重排得到的,那么最好缓存结果。制止下贰遍使用的时候,浏览器又要重排。

  第三条,不要一条条地改变样式,而要通过转移 class,或许 csstext 属性,一遍性地更动样式。

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// good 
el.className += " theclassname";

// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

  第四条,尽量利用离线 DOM,并非心向往之的网面 DOM,来改动成分样式。譬如,操作 Document Fragment 对象,完结后再把那一个目的参与 DOM。再比如,使用 cloneNode (卡塔尔国方法,在仿制的节点上海展览中心开操作,然后再用克隆的节点替换原始节点。

  第五条,先将成分设为 display: none (必要 1 次重排和重绘),然后对那个节点实行 100 次操作,最后再过来呈现(须求 1 次重排和重绘)。那样一来,你就用三次重复渲染,代替了只怕高达 100 次的再一次渲染。

  第六条,position 属性为 absolute 或 fixed 的成分,重排的开销会相当的小,因为不用考虑它对其余因素的熏陶。

  第七条,只在供给的时候,才将成分的 display 属性为可以知道,因为不可知的元素不影响重排和重绘。其余,visibility : hidden 的因素只对重排有震慑,不影响重绘。

  第八条,使用设想 DOM 的脚本库,例如 React 等。

  第九条,使用 window.requestAnimationFrame (State of Qatar、window.requestIdleCallback (卡塔尔 那多个办法调解重新渲染。

 

一、window.requestAnimationFrame ()

  有局地 JavaScript 方法能够调和重新渲染,大幅度提升网页质量。

  当中最根本的,正是 window.requestAnimationFrame (卡塔尔方法。它能够将或多或少代码放到下三遍重复渲染时实行。

function doubleHeight (element) {
  var currentHeight = element.clientHeight;
  element.style.height = (currentHeight * 2) + 'px';
}
elements.forEach (doubleHeight);

  下面的代码应用循环操作,将种种元素的惊人都扩张生龙活虎倍。然而,每一次循环都以,读操作后边跟着三个写操作。那会在长期内接触大批量的双重渲染,显著对于网页性能特不利于。

  大家得以选拔window.requestAnimationFrame (),让读操作和写操作抽离,把具备的写操作放到下一回重复渲染。

function doubleHeight (element) {
  var currentHeight = element.clientHeight;
  window.requestAnimationFrame (function () {
    element.style.height = (currentHeight * 2) + 'px';
  });
}
elements.forEach (doubleHeight);

  页面滚动事件(scroll)的监听函数,就很切合用 window.requestAnimationFrame (卡塔尔(قطر‎ ,推迟到下三次重复渲染。

$(window) .on ('scroll', function() {
   window.requestAnimationFrame (scrollHandler);
});

  当然,最适用的场所仍旧网页动漫。上边是一个筋袖手阅览动漫的例证,成分每意气风发帧旋转 1 度。

var rAF = window.requestAnimationFrame;

var degrees = 0;
function update () {
  div.style.transform = "rotate (" + degrees + "deg)";
  console.log ('updated to degrees ' + degrees);
  degrees = degrees + 1;
  rAF (update);
}
rAF (update);

、window.requestIdleCallback ()

  还应该有多个函数 window.requestIdleCallback (State of Qatar,也能够用来调整重新渲染。

  它钦命唯有当朝气蓬勃帧的终极有空暇时间,才会实施回调函数。

requestIdleCallback (fn);

  下边代码中,唯有当前帧的周转时刻低于 16.66ms 时,函数 fn 才会施行。不然,就滞缓到下风华正茂帧,假诺下风度翩翩帧也还没空余时间,就滞缓到下下生龙活虎帧,依此类推。

  它还是能承当第4个参数,表示内定的微秒数。假若在钦点的这段时光之内,每风度翩翩帧都不曾空闲时间,那么函数 fn 将会强制实行。

requestIdleCallback (fn, 5000);

  上边包车型地铁代码表示,函数 fn 最晚会在 5000 皮秒之后实行。

  函数 fn 能够承担二个 deadline 对象作为参数。

requestIdleCallback (function someHeavyComputation (deadline) {
  while(deadline.timeRemaining () > 0) {
    doWorkIfNeeded ();
  }

  if(thereIsMoreWorkToDo) {
    requestIdleCallback (someHeavyComputation);
  }
});

  上边代码中,回调函数 someHeavyComputation 的参数是一个 deadline 对象。

  deadline 对象有二个办法和六本性质:timeRemaining (卡塔尔国 和 did提姆eout。

  (1)timeRemaining () 方法

  timeRemaining (卡塔尔(قطر‎方法重回当前帧还余下的纳秒。那几个法子只好读,不能够写,而且会动态更新。由此得以不断检查这一个性情,假若还应该有剩余时间的话,就不独有实行有个别任务。大器晚成旦那个脾性等于0,就把职务分配到下风流罗曼蒂克轮requestIdleCallback

  前边的示范代码之中,只要当前帧还恐怕有空闲时间,就穷追猛打调用 doWorkIfNeeded 方法。风华正茂旦未有空余时间,不过职务还还没全实行,就分配到下生机勃勃轮requestIdleCallback

  (2)didTimeout 属性

  deadline 对象的 didTimeout 属性会再次回到一个布尔值,表示钦点的光阴是或不是过期。这意味,假设回调函数由于指准时间过期而接触,那么您会获得八个结果。

  • timeRemaining 方法重返0
  • didTimeout 属性等于 true

  由此,借使回调函数执行了,无非是两种原因:当前帧有空闲时间,恐怕指依时期到了。

function myNonEssentialWork (deadline) {
  while ((deadline.timeRemaining () > 0 || deadline.didTimeout) && tasks.length > 0)
    doWorkIfNeeded ();

  if (tasks.length > 0)
    requestIdleCallback (myNonEssentialWork);
}

requestIdleCallback (myNonEssentialWork, 5000);

  上面代码确认保证了,doWorkIfNeeded 函数一定会在今后有些相比空闲的岁月(只怕在指依期间过期后)获得反复施行。

  requestIdleCallback 是叁个很新的函数,刚刚引进专门的学业,目前只有 Chrome 协助。

第一条,DOM 的八个读操作(或多少个写操作),应该放在一块儿。不要四个读操作之间,插手贰个写...

本文由金冠53777-金冠娱乐53777-Welcome发布,转载请注明来源

关键词: