[JavaScript] 성능 비교

in Devlog on JavaScript, Devlog

DOM이 다시 그리는 횟수를 줄여야 합니다. DOM은 element를 추가하고, 사이즈 변경, 위치등의 변경사항이 있을 때마다 다시 그리게 됩니다. DOM의 변경으로 다시 렌더 트리를 재생성 하는 과정을 Reflow, 재생성된 렌더 트리를 다시 그리는걸 Repaint(or Redraw)라 합니다. DOM이 변경될때마다 다시 그리게 되므로 이과정을 최소화 하여야 합니다. 이런 행위가 반복되면 속도가 느려지게 됩니다.

Continue reading

[JavaScript] Chart.js

in Devlog on JavaScript, Devlog, Chart

Data

labels: ['1회차', '2회차', '3회차', '4회차', '5회차', '6회차', '7회차'],
  datasets: [
    {
      label: 'hotping.com/',
      fill: false,
      lineTension: 0,
      backgroundColor: 'red',
      borderColor: 'red',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'red',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 5,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40]
    },

Continue reading

Pagination