性能优化之关于像素管道及优化（二）

• 2019 年 10 月 3 日
• 筆記

?????????????????????????????????????????????????????????????????????????????????????

????????????

?????????????(??)

• ???????????????? 100 ????????????????????????????????????????
• ?????? 500 ???????????????????? Loading?

??????

?????????????????? 16 ???1000 ?? / 60 ? = 16.66 ??/??? ???????????????????????? 10 ????????

???????????????????????????? ???????????????????????

???????????????????????????

???????

???????

s???????????????????????????

• JavaScript????????????????? JavaScript ???????????????? jQuery ? animate ???????????????????????????? DOM ????????? JavaScript??????????????????????????CSS Animations?Transitions ? Web Animation API?
• Style?????????????? CSS ???????????????????????????
• Layout???????? Style ???????????????????????????????????????????????????????????????????????????????????
• Paint??????????????????????????????????????????????????????????????????????????????????
• Composite?????????????????????????????????????????????????????????????????????????????????????????

?????????????????????????????????????????

?????????????????????????????????????????????????????????????????????????????????????????????????????? JavaScript?CSS ??????????????????????????????????

??????

JS/CSS —> Style —> Layout —> Paint —> Composite

???????????????????????????????????????????????????????????????????“????”???????????????????????????????????????????????????????

JS/CSS —> Style —> Paint —> Composite

????????????????“paint only”???????????????????????????????????????????????????

JS/CSS —> Style —> Composite

??????????????????????? transform ? opacity ????????????????????????????????????????????

???????????? CSS ??????????????????????

?????????????????????????????????????????????????????????????

????????????????????????

????

JS/CSS??????

???? JS ???????????????? JS ????????????????

• ???????? requestAnimationFrame ????? setTimeout ?? setInterval
• ?? JS ???????????????????????? Web Worker ?????
• ????????? DOM ?????????????????????
• ?? Chrome DevTools ? Timeline ? JavaScript ?????? JavaScript ???

??requestAnimationFrame

??????????????????????? setTimeout ?? setInterval ??????????????requestAnimationFrame ??????????????????

???????????

??????

????????????????????????????????????????????(Hz)? ?????????????????60Hz?

?????????????????????????????60??????????????????????????????? ???????????????????????????????????????????????????????16.7ms(1000/60?16.7)? ????????????????????????????????????????????????1?/??????????????????????????????????????????

????

?????????????????????????60????????????????????????????????????????????????????????????????????????????? ??????????????

?????60Hz????16.7ms????????????????????????????????1px?????????????????????????1px?????????????????????????????????????????????????????????????????????????????????????????????

setTimeout?setInterval

??????????????????setTimeout ?????????????????????????????????????????????seTimeout???????????????????????????? ?????????????

• setTimeout?????????????Javascript?? setTimeout ??????????????????????????????????????????????????? setTimeout ?????????????????????
• ??????????????????????????????????????? setTimeout ????????????????????????????????

??????????setTimeout?????????????????????????? ?????????????????

• ?0ms: ??????????setTimeout?????????

• ?10ms: ??????????setTimeout???????????left=1px?

• ?16.7ms: ??????????????????1px? setTimeout ??????????

• ?20ms: ??????????setTimeout???????left=2px;

• ?30ms: ??????????setTimeout???????left=3px;

• ?33.4ms:??????????????????3px? setTimeout??????????

• …

????????????????????left=2px????????????1px??????3px??????????????????????????

requestAnimationFrame

?setTimeout???requestAnimationFrame????????????????????????????????????60Hz,????????16.7ms????????????75Hz?????????????1000/75=13.3ms????????requestAnimationFrame????????????????????????????????????????????????????????????????????

?????requestAnimationFrame?????????

• CPU?????setTimeout??????????????????setTimeout ??????????????????????????????????????????????CPU????requestAnimationFrame???????????????????????????????????????????????requestAnimationFrame????????????????????????????????????CPU???

• ???????????(resize,scroll?)?????????????????????????requestAnimationFrame???????????????????????????????????????????????????????????????????????16.7ms?????????????????????

Web Worker

?? JavaScript ???????????????????????????????????????????????????? Web Worker?????????? DOM ???????????????????????????????????????????

????? Web Worker ???? DOM????????????????????????????????????????????????????????????? requestAnimationFrame ??????????????????????????????????????????????????????????????

????? JavaScript

???????????????????????????????? 10 ????????? offsetTop ??? getBoundingClientRect() ???????????????????????????????????????

???????????????????????????????????????????????????????????????????????????????????????????????

Style??????

????????????????? DOM ??????????????????????????????????????????????????????????????

??????????????

1. ???????????????????????????????? ID?
2. ????????????????????????????

?????????????????? 50% ?????????????????????????

????????????????????????

• ?????????
• ??????????????

?????????

???

.box:nth-last-child(-n+1) .title {    /* styles */  }

?? class ???????????? title ?????????????? N ?????? 1 ?? box ?????
?????????????????????????????????
??????????

.final-box-title {    /* styles */  }

????????????????????????????????????

????????

?????????

<div class="box"></div>  <div class="box"></div>  <div class="box b-3"></div>

???? css ???

.box:nth-child(3)  .box .b-3

??????????????????
?? .box:nth-child(3) ????? 2ms? .box .b-3 ????? 1ms???? 100 ????.box:nth-child(3) ?? 200ms?.box .b-3 ?? 100ms??????????

??????????????????????????????????????????????????????????????????

?????????? class????????????????????????????????????? BEM ?????

???? BEM

BEM??????????????????????????????????????????????????????????????????????

.list { }  .list__list-item { }

?????????????????????????????????????????????

.list__list-item--last-child {}

? sass ???????? BEM

.list {    &__list-item {      &--last-child {}    }  }

Layout????

????????????????????????????????????????
DOM ???????????????

????????????????

• ?????????
• ?? flexbox ???????
• ????????
• ??????

????????

???????Forced Synchronous Layout?????????? JavaScript ??????? Layout ??? CSS ???
?????????? offsetWidth ????????????????????????????????????????????????????/?????????
???????

????????????????

?? 1?

divs.forEach(function(elem, index, arr) {    if (window.scrollY < 200) {      element.style.opacity = 0.5;    }  });

?? window.scrollY ???? Layout??????????????? ????? scrollY?/ ???opacity??forEach ?????????????????????
?????

const positionY = window.scrollY;    divs.forEach(function(elem, index, arr) {    if (positionY < 200) {      element.style.opacity = 0.5;    }  });

???? scrollY ?????????????

?? 2?

divs.forEach(function(elem, index, arr) {    if (elem.offsetHeight < 500) {      elem.style.maxHeight = '100vh';    }  });

????????? offsetHeight??? maxHeight?

?????

if (elem.offsetHeight < 500) { // ??????    divs.forEach(function(elem, index, arr) { // ?????      elem.style.maxHeight = '100vh';    });  }

?? 3?

var newWidth = container.offsetWidth;    divs.forEach(function(elem, index, arr) {    element.style.width = newWidth;  });

?????????????

??????

???????????????

????????? click ????????????????

?????

const paragraphs = document.querySelectorAll('p');  const clickme = document.getElementById('clickme');  const greenBlock = document.getElementById('block');    clickme.onclick = function(){    greenBlock.style.width = '600px';      for (let p = 0; p < paragraphs.length; p++) {      let blockWidth = greenBlock.offsetWidth;      paragraphs[p].style.width = `${blockWidth}px`;    }  };

??????????

??????????? greenBlock.offsetWidth??????????????????????????? paragraphs[p].style.width??????????????????????? Layout ??????????????????

Details ??????Forced reflow is a likely performance bottleneck.?

????????

clickme.onclick = function(){    greenBlock.style.width = '600px';    const blockWidth = greenBlock.offsetWidth;      for (let p = 0; p < paragraphs.length; p++) {      paragraphs[p].style.width = `${blockWidth}px`;    }  };

???? greenBlock.offsetWidth?????????

Paint????

??????????????????????????????????????????

????????????????????????

• ? transform ? opacity ????????????????????
• ?????????????????
• ???(z-index)????????????????

Composite????

????????????????????????????????????????

?????????????????????????????????????????

• z-index ??????????????????
• ???? transform ? opacity ?????????????????????
• ?? will-change ? translateZ ????????

??

???????Paint???? ? Composite?????????????????????????????

?????? JavaScript ? CSS ?????????????

?????????????? Layout ??????????????? JavaScript ?? CSS?

??? JavaScript ???????????????????????

???????????????????????????????????????????????????????????????