Front end star 2020_ 4_ 11 course notes

Time:2020-10-31

Front end Engineering

  • Standardization

    • Git git flow

    • Compilation specification

  • modularization

    Core demand avoids variable pollution

    • CSS modularization
    • JS modularization
  • Componentization

    Encapsulation of UI and logic

  • automation

    Hand over repetitive and time-consuming operations to tools

    • Initializing cli
    • Building webpack
    • Test jest
    • Deploying Jenkins

JS animation

  • Animation, the native interface of JS
  • Of course, the various native implementations introduced by Yueying will be more flexible, because the essence is code implementation, and the mathematical formula QAQ didn’t want to copy down, but it is said that we should recycle the course qualification 5555 and copy it as a manual

General linear abstract interface of + +:

function update({target}, count) {
  target.style.transform = `rotate(${count++}deg)`;
}

class Ticker {
  tick(update, context) {
    let count = 0;
    requestAnimationFrame(function next() {
      if(update(context, ++count) !== false) {
        requestAnimationFrame(next);
      }
    });
  }
}

const ticker = new Ticker();
ticker.tick(update, {target: block});

General abstract interface angle time:

function update({target}, {time}) {
  target.style.transform = `rotate(${360 * time / 2000}deg)`;
}

class Ticker {
  tick(update, context) {
    let count = 0;
    let startTime = Date.now();
    requestAnimationFrame(function next() {
      count++;
      const time = Date.now() - startTime;
      if(update(context, {count, time}) !== false) {
        requestAnimationFrame(next);
      }
    });
  }
}

const ticker = new Ticker();
ticker.tick(update, {target: block})

General interface canvas:

function update({context}, {time}) {
  context.clearRect(0, 0, 512, 512);
  context.save();
  context.translate(100, 100);
  context.rotate(time * 0.005);
  context.fillStyle = '#00f';
  context.fillRect(-50, -50, 100, 100);
  context.restore();
}

class Ticker {
  tick(update, context) {
    let count = 0;
    let startTime = Date.now();
    requestAnimationFrame(function next() {
      count++;
      const time = Date.now() - startTime;
      if(update(context, {count, time}) !== false) {
        requestAnimationFrame(next);
      }
    });
  }
}

Implementation of timing:

class Timing {
  constructor({duration, easing} = {}) {
    this.startTime = Date.now();
    this.duration = duration;
    this.easing = easing || function(p){return p};
  }
  get time() {
    return Date.now() - this.startTime;
  }
  get p() {
    return this.easing(Math.min(this.time / this.duration, 1.0));
  }
}

class Ticker {
  tick(update, context, timing) {
    let count = 0;
    timing = new Timing(timing);
    requestAnimationFrame(function next() {
      count++;
      if(update(context, {count, timing}) !== false) {
        requestAnimationFrame(next);
      }
    });
  }
}

The following specific example is the mathematical formula, combined with the previous general interface, find a few examples to remember

Bessel trajectory:

Front end star 2020_ 4_ 11 course notes

function bezierPath(x1, y1, x2, y2, p) {
  const x = 3 * x1 * p * (1 - p) ** 2 + 3 * x2 * p ** 2 * (1 - p) + p ** 3;
  const y = 3 * y1 * p * (1 - p) ** 2 + 3 * y2 * p ** 2 * (1 - p) + p ** 3;
  return [x, y];
}// mathematical formula of trajectory

function update({target}, {timing}) {
  const [px, py] = bezierPath(0.2, 0.6, 0.8, 0.2, timing.p);
  target.style.transform = `translate(${100 * px}px, ${100 * py}px)`;
}

const ticker = new Ticker();
ticker.tick(update, {target: block}, {
  duration: 2000,
  easing: p => p * (2 - p),
});

Periodic motion: in fact, the timing of periodic motion changes

class Timing {
  constructor({duration, easing, iterations = 1} = {}) {
    this.startTime = Date.now();
    this.duration = duration;
    this.easing = easing || function(p){return p};
    this.iterations = iterations;
  }
  get time() {
    return Date.now() - this.startTime;
  }
  get finished() {
    return this.time / this.duration >= 1.0 * this.iterations;
  }
  get op() {
    let op = Math.min(this.time / this.duration, 1.0 * this.iterations);
    if(op < 1.0) return op;
    op -= Math.floor(op);
    return op > 0 ? op : 1.0;
  }
  get p() {
    return this.easing(this.op);
  }
}

Using promise to write continuous motion ticker is actually to use promise to do process control

class Ticker {
  tick(update, context, timing) {
    let count = 0;
    timing = new Timing(timing);
    return new Promise((resolve) => {
      requestAnimationFrame(function next() {
        count++;
        if(update(context, {count, timing}) !== false && !timing.finished) {
          requestAnimationFrame(next);
        } else {
          resolve(timing);
        }
      });      
    });
  }
}

The following is the application of promise trick

const down = lerp(setValue, {top: 100}, {top: 300});
const up = lerp(setValue, {top: 300}, {top: 100});

(async function() {
  const ticker = new Ticker();

  // noprotect
  while(1) {
    await ticker.tick(down, {target: block},
      {duration: 2000, easing: p => p * p});
    await ticker.tick(up, {target: block},
      {duration: 2000, easing: p => p * (2 - p)});
  }
})();

Front end performance optimization

1. Performance evaluation method

Rail model
Key indicators:

  • Respond to user input within 100ms
  • 10 ms animation
  • Idle time maximization of main thread idle
  • 1000ms interactive content display load
    chrome DevTools

2. Practical examples

For browser rendering process: how is the page displayed?

JS > style (the output of this step is the rendering tree) – > layout (calculate the output box model) > paint (rasterization) – > composite (render layer merging)

Layout and paint can not appear, so there will be various scenes

  • Use of flame chart
  • Load optimization

    • Resource efficiency optimization
    • Picture optimization
    • Font optimization
    • Key rendering path optimization
  • Rendering optimization

    • JS execution optimization
    • Avoid large and complex layout
    • Render layer merge

Recommended Today

GPS timing products, NTP time calibration, time synchronization server, Beidou time service equipment

GPS timing products, NTP time calibration, time synchronization server, Beidou time service equipment GPS timing products, NTP time calibration, time synchronization server, Beidou time service equipment Long term production and supply of Beijing Zhun Electronic Technology Co., Ltd. ahjzsz summary NTP network time server is a high-tech clock product with high precision, large capacity and […]