目次

先端工程化浅析

フロントエンドアニメーションはこのように遊ぶことができます

とともにフロントエンド性能

を最適化する.

フロントエンドエンジニアリングの浅い分析

一、先端工程化とは何か.目標は先端分野で、技術の絶えず進歩と経験の次第に蓄積した各種方案を利用して、プロジェクトの開発、テスト、メンテナンス段階で出会った低効率と煩雑な問題を解決する.2.技術は実践であり、異なる時期に異なる技術が工程化思想を担う.3.原因はプロジェクトの開発、テスト、メンテナンス段階で効率を高める二、規範化1.バージョン管理と開発プロセス規範2.作成された仕様:スクリプト、スタイル、ディレクトリ構造git、gitflow

 ：
git pull
git commit
git push 
git checkout// 

三、モジュール化1.cssモジュール化解決スタイル生成規則により、scoped、css in js、css modules、BEMの衝突を回避
個人的な思考:cssプリプロセッシング言語を用いてモジュール化する
2.jsモジュール化解決node.js、common.js、es modules-loader

require('http')
module.exports=x

import {} from ' ./a.js'
export function M(){return 1}

3.コンポーネント化はWebのトレンドであり、核心思想は分治である.高集約、低結合3.1 UIは、ホーム画面上のUIブロックとして、1つのコンポーネント3.2ロジックを主とする機能ロジックにカプセル化してもよいし、1つのコンポーネントにカプセル化してもよい
コンポーネント内にコンポーネントを含めることもできます
4.オートメーションコア:機械にできることは、人にやらせない.4.1自動化テスト4.2自動化配置4.3自動化初期化4.4自動化構築
総括:工程化の思想を持って考える

フロントエンドアニメーションはこのように遊ぶことができます

一、アニメーションの原理と実現1.タイマは、オブジェクトの属性2を変更する.新しいアトリビュートに基づいてアニメーションを再レンダリングするには
アニメーション種類:jsアニメーション、cssアニメーション、svgアニメーション
二、jsアニメーションの利点:柔軟性、制御性、性能の欠点:使いやすさが悪い.キューブの回転

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);
      }
    });
  }
}
function update({target}, {timing}) {
  target.style.transform = `translate(${200 * timing.p}px, 0)`;
}

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

2.等速運動

function update({target}, {timing}) {
  target.style.transform = `translate(${200 * timing.p}px, 0)`;
}

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

3.平投げ運動

function update({target}, {timing}) {
  target.style.transform = `translate(0, ${200 * timing.p}px)`;
}

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

4.平投げ

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 op() {
    return Math.min(this.time / this.duration, 1.0);
  }
  get p() {
    return this.easing(this.op);
  }
}

function update({target}, {timing}) {
  target.style.transform = 
    `translate(${200 * timing.op}px, ${200 * timing.p}px)`;
}

5.ベッセル軌跡

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];
}

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),
});

フロントエンドのパフォーマンスを最適化

一、RALモデルはユーザーを中心とする.response 100~300 ms:10000 ms以上の軽微な察知:ユーザはターゲットを離れる:100 ms以内にユーザ入力に応答する
2.animationターゲット:10 msフレーム、アニメーションの高圧点で論理を処理しないでスムーズにする
3.idleターゲット:ページが100 ms以内にユーザーの入力に応答する確率を増加する
4.load目標:第一スクリーンロード接続3 G緩慢な中級移動機器5 s内にインタラクティブな内容を呈する第一スクリーンロードは2 s内で影響要素を完成すべき:ネットワーク速度ハードウェア解析javascript
ユーザー中心
二、工具編1.lighthouse 2.WebPageTest 3.chorme DevTools
三、実戦編1.ブラウザのレンダリングシーンjs/css>計算スタイル>レイアウト(オプション)>ペイント(オプション)>レンダリングレイヤマージ2.ブラウザの実行メカニズム1 DOMツリーの構築:レンダリングエンジンはHTMLドキュメントを解析し、まずラベルをDOMツリーのDOMノード(js生成ラベルを含む)に変換してコンテンツツリーを生成する.②レンダリングツリーの構築:対応するCSSスタイルファイル情報(jsによって生成されたスタイルと外部cssファイルを含む)を解析し、これらのファイル情報とHTMLに表示される命令を解析してレンダリングツリーを構築する.③レイアウトレンダリングツリー:ルートノードから再帰的に呼び出し、各要素の大きさ、位置などを計算し、各ノードがスクリーンに現れるべき正確な座標を与える.④レンダリングツリーの描画:レンダリングツリーを巡り、UIバックエンドレイヤを使用して各ノードを描画します.
3.パフォーマンス最適化方向ロード:リソース効率、ピクチャフォント、キーレンダーパスレンダー:js最適化、大規模で複雑なレイアウトの回避、レンダーレイヤのマージ