1. React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。これは、UI レベルでのソリューションのみを提供します。コンポーネント設計パターン、宣言型プログラミング パラダイム、および関数型プログラミングの概念に従って、フロントエンド アプリケーションをより効率的にします。
2. 仮想 DOM を使用して DOM を効果的に操作し、高レベルのコンポーネントから低レベルのコンポーネントへの一方向のデータ フローに従い、インターフェイスを独立した小さなブロックに分割するのに役立ちます。各ブロックはコンポーネントであり、これらのコンポーネントは結合され、ネストされ、ページ全体を構成します。
3. 機能: JSX 構文、単一項目データ バインディング、仮想 DOM、宣言型プログラミング、コンポーネント

2. Real diff アルゴリズムがどのように機能するのか教えてください。

1. diff アルゴリズムはパフォーマンスを節約するように設計されており、レベルをまたぐことなく、同じレベルと比較してパフォーマンスがより効率的です 2. 演算プロセスは主に 3 つの層に分かれています: ツリー層、
コンポーネント層、要素層
    1、ツリー層: ツリー層 DOM ノードのレベル間移動の操作は無視され、同じレベルの DOM ノードのみが比較され、ノードが存在しないことが判明すると、そのノードとそれ以降のすべての子ノードが直接削除されます
    。 diff は、階層比較のため、異なるタイプのコンポーネントに遭遇したときに、この異なるコンポーネントをダーティ コンポーネントとして直接判断し、このコンポーネントの下にあるすべての子ノードを置き換えます。このコンポーネントの仮想 DOM が変更されていないことがわかっている場合は、手動で使用できます。 , shouldComponentUpdate は diff が必要かどうかを判断するために使用され、これにより diff の効率とパフォーマンスがさらに向上します。
    3. 要素層: 同じレベルの下では、新しいノードに対して挿入操作を実行できます。冗長ノードに対しては削除操作を実行します。転置されたノード、移動の操作を実行します

3. React ライフサイクルのさまざまな段階について教えてください。それぞれの段階に応じた方法とは何でしょうか？

1. React ライフサイクルは主に 3 つのステージに分かれています: 作成ステージ、更新ステージ、アンインストールステージ
2. 作成ステージ: 
    1. コンストラクター: 状態を定義するか、いくつかのメソッドを保存するために使用されます; 
    2. getDerivedStateFromProps():将来使用される場合は、新しいオブジェクトを新しい状態として返すか、状態を
    更新する必要がないことを示す null を返す必要があります。 4.componentDidMount(): データ
    取得、イベント監視、およびその他の操作を実行するために使用されます
。更新フェーズ: 
    1. getDerivedStateFromProps(): 将来的に使用され、新しい状態として新しいオブジェクトを返すか、状態が無効であることを示す null を返す必要があります。 更新する必要があります。 2. shouldComponentUpdate: を通知するために使用されます
    。コンポーネント自体 現在の props と状態に基づいてコンポーネントを再レンダリングするかどうかを決定し、デフォルトで true を返します。 3. 
    render: クラス コンポーネントによって実装される必要があり、DOM 構造をレンダリングするために使用され、コンポーネントの状態にアクセスできるメソッドprop 属性
    4、getSnapshotBeforeUpdate: この定期関数はレンダリング後に実行され、DOM 要素は実行時に更新されていません。目的は、コンポーネントが更新される前に、コンポーネントのスクロール位置などの情報を取得することです。コンポーネントが更新された後、この情報に基づいて一部の UI 視覚状態を復元できます
    5.componentDidUpdate: データの取得、DOM スタイルの変更など、前後の props と状態の変化に応じて対応する操作を実行できます。 。
4.荷降ろし段階：
    ComponentWillUnmount: このメソッドは、コンポーネントがアンマウントされる前に、イベントをリッスンするための一部の登録をクリーンアップしたり、ネットワーク要求などをサブスクライブ解除したりするために使用されます。コンポーネント インスタンスがアンマウントされると、再度マウントされることはありませんが、再作成することのみが可能です。

4. React の仮想 dom についてのあなたの理解について教えてください。

1. 仮想 DOM は、js オブジェクトの形式を使用してページ DOM の入れ子関係をシミュレートします; 
2. 仮想 DOM は仮想 JavaScript オブジェクト ツリーです。図面の焦点は「仮想」と「JS オブジェクト」です。実際の Web ページのドキュメント ノードは 1 つずつ js オブジェクトに仮想化され、ツリー構造でメモリに格納されます。
3. 実現原理: JS を通じて Web ページのドキュメント ノードをシミュレートし、JS オブジェクト ツリー (仮想 DOM) を生成し、さらに実際の DOM ツリーを生成して画面に描画します。後でコンテンツが変更された場合、React はまったく新しい仮想 DOM ツリーを再生成し、その差分を以前の仮想 DOM ツリーと比較し、その差分をパッチにパッケージ化して実際の DOM に適用し、閲覧用に画面にレンダリングします。デバイス。

5. Reactフックについてのあなたの理解について教えてください。

1. フックは React 16.8.0 で追加された新しい機能/文法で、関数コンポーネントで状態やその他の React 機能を使用できるようにします。共通
フック: 
2. useState: クラス コンポーネントの状態と同様に、次のことが便利です初期化を定義します。データ、2 つのパラメーターを受け取ります。1 つはデータの初期化であり、もう 1 つはデータの変更です。メソッド
3、useEffect: 副作用関数、使用後にのみ副作用が発生します。2 つのパラメーターを受け取ります。1 つは関数です。 , もう 1 つは、監視対象のデータは [] にすることです。これは、一度だけ実行されることを意味し、パラメーターも渡すことができます。パラメーターが渡された後は、データが変更されたときにのみトリガーされます。書き込まれない場合は、それがトリガーされます。 4. useMemo 
: データ キャッシュ、コンポーネント間で通信するときに、親コンポーネントのデータが変更されると、更新されたデータがそのデータに関連しているかどうかに関係なく、それに応じてサブコンポーネントも更新されます。サブコンポーネントの更新操作を実行します。このとき、更新パフォーマンスが無駄になります。ysememo を使用してキャッシュし、不要な更新操作を減らすことができます。彼のキャッシュのパラメーターは文字列です。関数の場合は、
5. useRef: 入力ボックスのデータの変更を監視し、入力ボックスの値を取得できます。

6. React コンポーネント間で通信するにはどうすればよいですか?

React コンポーネントの通信とは、ある目的を達成するために、Value コンポーネントが特定の方法で情報を送信することを意味します
    方法: 
    1. 親コンポーネントが子コンポーネントに情報を送信する: React のデータの流れは一方向であるため、親コンポーネントが呼び出したときに、子コンポーネントの場合、パラメータはサブコンポーネント タグで渡され、サブコンポーネントは props 属性
    2 を通じて受け取ります。サブコンポーネントは親コンポーネントに情報を送信し、親コンポーネントは関数を親コンポーネントに渡します。 3. コンポーネント間の
    ブラザー転送: 親コンポーネントは、親コンポーネントを使用してデータ相互通信を実現する中間層として機能します。転送
    4、親コンポーネントは子孫コンポーネントに値を転送します。コンテキストによって提供されるコンポーネント通信の方法を使用して、データ共有を実現できます。プロバイダーコンポーネントは、値属性を子孫コンポーネントに渡します。 5. 非リレーショナルコンポーネントはデータを渡します
    。 : 
Redux

7. 管理コンポーネントと非管理コンポーネントについてのあなたの理解について教えてください。応用シナリオ?

1. 制御されるコンポーネント: React では、通常、変更可能な状態はコンポーネントの state プロパティに保存され、setState() を使用してのみ更新できますが、フォームをレンダリングする React コンポーネントは、後続のユーザー入力状況でそのフォーム内で何が起こるかを制御します。 React によって制御される入力フォーム要素の値が変更されるものを、制御コンポーネントと呼びます。簡単に言えば、setState の制御を受け取り、コンポーネントの状態はプロセス全体を通じて外部データに応答します
2. 制御されていないコンポーネント: フォーム データは DOM 自体によって処理されます。つまり、従来の HTML フォーム入力と同様に、setState() によって制御されず、入力された入力値は最新の値を表示し (ref を使用して DOM からフォーム値を取得します)、setState によって制御されません。初期化中に外部データを取得し、それ自体の状態を内部に保存します
アプリケーション シナリオ: 
    1. 制御されたコンポーネント: 必須の入力形式、1 つのデータの複数の入力、動的入力、送信時の検証の問題
    2. 制御されていないコンポーネント: 1 回限りの値 (送信)、検証提出時

8. Connect コンポーネントの原理について教えてください。

1. Connect は Redux と React を接続し、それをコンテナ コンポーネントの外層でラップし、状態を受け取り、上記のプロバイダによって提供されるストアにディスパッチし、それをコンストラクタに渡し、オブジェクトを返し、それをコンテナ コンポーネントに渡します。属性 2 の形式で
、Connect は高レベル関数であり、最初に mapStateToProps、mapDispatchToProps を渡し、次に Component 関数を返し、次に実際の Component をパラメータとして渡して新しいコンポーネントを返します。

9. React における jsx 構文シュガーの本質について話しますか?

1. Jsx の本質は、関数 React.createElement の文法糖です。すべての jsx 構文は、最終的に babel.js を通じて React.createElement に変換されます。 2. 3 つのパラメーター: type は
現在の要素のタイプを指し、config は jsx 属性を指しますはオブジェクトの属性と値の形式で格納され、子はタグに格納されるコンテンツです。
3. JSX 記述方法: Babel を導入し、script タグのタイプを text/bable に設定する必要があります。 Babel: jsx を React に変換する.createElement() 関数呼び出し

10. redux ミドルウェアについてのあなたの理解について教えてください。一般的に使用されるミドルウェアは何ですか? 実施原理は？

1. Redux ミドルウェアは、アプリケーション システムとシステム ソフトウェアの間にあるソフトウェアの一種で、システム ソフトウェアが提供する基本サービスを利用して、アプリケーション システムのさまざまな部分やネットワーク上の異なるアプリケーションを接続し、リソースの共有と機能の共有を実現します
。一般的に使用されるミドルウェア: redux-thunk は非同期操作に使用され、redux-logger はログ記録に使用されます 実装
原理
: すべてのミドルウェアは配列内でネストされて実行され、渡されたデータ型が判断され、最後にストアが実行されます。 、ミドルウェア内のミドルウェア API は getstate メソッドとディスパッチ メソッドを取得できます。

11. AMD、CMD、commonJS のモジュラー仕様の違いについて教えてください。

1. AMD: この仕様は非同期ロードモジュールです。最初にすべての依存関係を定義し、ロード完了後にコールバック関数で require(['xxx'], function(){}) を実行します。 2. CMD: 原理
function(require,exports,module){require('xxx')} を書くときに使用します3. 
commonJS: モジュールをロードするには require('xxx') を使用します
違い: 
    1. AMD と CMD の最大の違いは依存モジュールの実行タイミングです 処理が異なります、両方とも非同期ロードモジュールです
    2、AMDはフロントに依存します、jsは依存モジュールが誰であるかを簡単に知ることができ、すぐにロードします、CMDは最も近いものに依存します、モジュールを変更する必要があります文字列分析に変換
    3, commonJS はすべてのコードがモジュール スコープ内で実行されます, グローバル スコープを汚染しません. モジュールのロードは同期です. ロードが完了した後でのみ, 以下の操作を実行できます. requeire の値は出力値のコピーであり、モジュールの内容を変更してもこの値には影響しません。

12. package.json のバージョン番号のルールについて教えてください。

^: 左側のゼロ以外の数値を変更しない更新のみを実行します
~: ~0.13.0 が書き込まれている場合、npm update が実行されると、パッチ バージョンに更新されます
>: より高いバージョンを受け取ります指定されたバージョン
>= : 指定されたバージョン以上の任意のバージョンを受け入れます
<=: 指定されたバージョン以下の任意のバージョンを受け入れます
<: 指定されたバージョン未満の任意のバージョンを受け入れます
=: 正確なバージョンを受け取ります
-: バージョンを受け入れますバージョンの範囲
||: 結合されたコレクション
無署名: 指定された特定のバージョンを受信する
最新: 利用可能な最新のバージョンを使用する

13. React jsx を実際の DOM に変換するプロセスについて教えてください。

1. React.createElement または jsx を使用して反応コンポーネントを記述します。実際、すべての jsx コードは React.ccreateElement(...) に変換され、babel は変換プロセスを完了するのに役立ちます。2. createElement 関数は特殊な関数です
。 key や ref などの props を処理し、defaultProps を取得してデフォルトの props を割り当て、受信した子ノードを処理して、最終的に仮想 DOM オブジェクトを形成します。 3. ReactDOM.render は、バッチ処理を使用して、生成された仮想 DOM を指定されたコンテナーにレンダリングします
。トランザクションやその他のメカニズムは特定のブラウザ向けに最適化され、最終的には実際の DOM に変換されます。

14. @reduxjs/toolkit についてのあなたの理解について教えてください。反応 Redux との違いは何ですか?

1. React-redux は、React コンポーネントが redux ストアからデータを読み取り、ストアにオペレーションをディスパッチして状態を更新できるようにする公式の React UI バインディング レイヤーです。Connect や Provider などの API は、React と Redux の接続を支援するために提供されており、実装されたロジックはより厳密かつ効率的になります 2. 
@reduxjs/tookit は Redux のセカンダリ パッケージです ストアの作成とストアの更新の違い
    : 
    1 . Reduxjs/tookit は、react-redux よりも便利です. redux-devtools-extension が統合されており、追加の設定は必要ありません. 非常に便利です. 2. Reduxjs/tookit は immutable-js の機能を統合しています, インストール、設定は必要ありませ
    ん
    3. reduxjs/tookit は redux-thunk の機能を統合します。4. 
    reduxjs/tookit は型、アクション、およびリデューサーをまとめて新しいスライスを形成するため、使用が簡素化されます。

15. React レンダーメソッドの原理、いつトリガーされますか?

ReactではRender関数には2つの形式があります クラスコンポーネントではrenderメソッドを参照します 関数コンポーネントでは関数コンポーネント自体を参照します renderではjsxと書き、jsxはおなじみのjsに変換されます形式の場合、レンダリング プロセス中に、React は新しく呼び出された render 関数によって返されたツリーと古いバージョンのツリーを比較し、DOM を更新する方法を決定し、diff 比較を実行して DOM ツリーを更新します。 トリガー タイミング: 1. クラスコンポーネントが setState
    を呼び出して
        状態を変更する場合; 
        2. 関数コンポーネントが useState Hook を通じて状態を変更する場合; 
        3. クラス コンポーネントが再レンダリングされる場合; 
4.
        関数コンポーネントが再レンダリングされる場合; 5. コンポーネントが setState を呼び出して状態を変更する場合

16. React のパフォーマンスを最適化する手段は何ですか?

1. shouldComponentUpdate を通じて: state と props を比較して再レンダリングするかどうかを決定し、デフォルトで true を返し、レンダリングで false を返したくない 2. PureComponent: 
state と props の比較結果を比較することで実現します
3. React.memo:コンポーネントのレンダリングをキャッシュして、不必要な更新を回避します (関数コンポーネントのみ) 
4. インライン関数の使用を避けます。 render が呼び出されるたびに、新しい関数が再レンダリングされ、コンポーネント内に関数が作成され、イベントが実行されます。関数自体にバインドされる
5. React Fragments を使用して追加のマークアップを回避する
6. Immutable を使用する: レンダリングの数を減らす
7. 遅延ロード コンポーネント: コード分割機能を実現するためにサスペンス コンポーネントと遅延コンポーネントを使用する
8. イベント バインディング メソッド
9. Server-サイドレンダリング

17. ネイティブ JS でスロットリング機能と手ぶれ補正機能を実装するにはどうすればよいですか?

1. 関数スロットリング: 頻繁にトリガーしますが、コードを特定の時間内に 1 回だけ実行し
ます 2. 関数アンチシェイク: 頻繁にトリガーしますが、特定の時間内に実行条件がトリガーされない場合にコードを 1 回だけ実行します
3. 違い: 両方違いは、機能スロットルは、1 秒ごとにリクエストを送信するなど、一定の時間に特定のことを実行することです。手ぶれ補正機能は頻繁にトリガーされた後に 1 回だけ実行されます (どちらも頻繁にトリガーされることが前提です)
スクロール バーの位置を取得して次のアクションを実行したい
5. 手ぶれ補正アプリケーションのシナリオ: 入力ボックスの検索自動完了イベント、頻繁な「いいね」操作や「いいね！」のキャンセルなど。これらのアプリケーションシナリオは、機能スロットルによっても実現でき、頻繁に「いいね！」を操作したり、「いいね！」をキャンセルしたりするため、最後の操作結果を取得してサーバーに送信する必要があります。

18. koa のオニオンモデルについての理解について教えてください。

1. koa では、next() メソッドによってミドルウェアが 2 つの部分に分割され、next メソッドの上の部分が最初に実行され、下の方の部分は後続のミドルウェアの実行がすべて完了してから実行されます。オニオン モデルでは、各層は
ミドルウェアに相当し、エラー処理、セッション処理などの特定の機能を処理するために使用されます。処理順序は、最初に next() リクエスト、次に next() 関数の実行、そして最後にnext() の応答、つまり各ミドルウェアの処理機会は 2 つあります。
3. オニオン モデルの中心原則は、合成法を使用することです。

19. Webpack を使用してフロントエンドのパフォーマンスを最適化する方法について話しますか?

1. コードを圧縮します: 冗長なコード、コメントを削除し、コード記述を簡素化します。webpack の UglifyJsPlugin と ParallelUglifyPlugin を使用して JS ファイルを圧縮できます
2、cssnano (css-loader?minimize) を使用して css を圧縮します
3、CDN を使用して高速化できます。構築プロセス中に、参照された静的リソース パスを対応するパス上の CDN に変更します。各ローダーの出力パラメーターと publicPath パラメーターに webpack を使用して、リソース パスを変更できます。
4. ツリー シェーキング: コード内のアクセスされないフラグメントを削除します。これは、 Webpack 5 の開始時に
パラメーター --optimize-minimize を追加することで実現できます。
コード分割: ルートのディメンションまたはコンポーネントに従ってコードをチャンクに分割し、オンデマンドでロードしてブラウザーを最大限に活用できるようにします。キャッシュ
6. パブリック サードパーティ ライブラリの抽出: パブリック モジュール抽出用の SplitChunksPlugin プラグイン、
7. 頻繁な変更を長期間必要としないこれらのパブリック コードをブラウザー キャッシュを使用してキャッシュします。

20. WebSocket についての理解について教えてください。

1. 理解: webSocket は、OSI モデルのアプリケーション層に位置するネットワーク伝送プロトコルであり、単一の TCP 接続で二重通信を実行できるため、サーバーのリソースと帯域幅を節約し、リアルタイム通信を実現できます。クライアントとサーバーはハンドシェイクを完了するだけで、両者の間に永続的な接続を確立し、双方向のデータ送信が可能
です
    。 2.
    バイナリ フレーム (バイナリ フレーム構造を使用しており、構文とセマンティクスは HTTP と完全に互換性がなく、リアルタイム通信に重点を置いています) 3. プロトコル名 (ws および wss は、WebSoket プロトコルを表すために導入されています
    )それぞれ平文と暗号文、デフォルトのポートは 80 または 443 で、http とほぼ同じです) 
    4. ハンドシェイク (ハンドシェイク プロセスがあり、その後正式にデータを送受信します)

21. バインド、呼び出し、適用の違いは何ですか? バインドを実装するにはどうすればよいですか?

Call、bind、apply はすべて、関数の実行時に this ポイントを変更します。相違点
    : 
    1. apply は 2 つのパラメータを受け取ります。最初のパラメータは this ポイントで、2 番目のパラメータは関数によって受け取られ、渡されるパラメータです。配列として
    2 . Call メソッドの最初のパラメータも this によってポイントされ、パラメータ リストは後で渡されます
    3. Bind メソッドは call に似ています. 最初のパラメータも this によってポイントされ、パラメーターのリストは後で渡されます (このリストは複数の 2 番目のパスに分割できます)。bind は
this をバインドした後に
this 
    ! 
    = = 'function'){throw new TypeError("error")}
    パラメータを取得
    Const args = [...arguments].slice(1) 
    Fn = this 
    Return function Fn (){
呼び出しメソッドに応じて、別のバインディングを渡します値
    を返す fn.apply(Fn のインスタンス ? new fn(...arguments):context,args.concat(...arguments)) 
} 
}

22. 手ぶれ補正とスロットリングとは何ですか? 違いは何ですか? どうやって達成するのか？

スロットリング: n 秒以内に 1 回のみ許可されます。n 秒以内に繰り返しトリガーされた場合、有効になるのは 1 回だけです。
アンチシェイク: イベントは n 秒後に実行されます。n 秒以内に繰り返しトリガーされた場合、相違点
: 
    1. 関数アンチ - 一定期間の連続動作の後、コールバックは、clearTimeout と setTimeout を使用して処理されます; 関数スロットリング、一定期間の連続動作では、各イベントは 1 回だけ実行され、パフォーマンスを向上させるために高頻度のイベントで使用されます。 2. 機能アンチ
    シェイク 一定時間連続トリガーする時間に注意し、最後に 1 回だけ実行します。一方、機能スロットリングは 1 回に 1 回のみ実行されます。期間

23. リフローと再描画を理解するにはどうすればよいですか? どのような状況で発動するのでしょうか？

リフロー: レイアウト エンジンがさまざまなスタイルに従ってページ上の各ボックスの位置とサイズを計算します。 再
描画: ボックス モデルの位置、サイズ、その他のプロパティを計算した後、ブラウザーがそれぞれの特性に従ってトリガー タイミングを再描画します
。ボックス:
    リフロー: 表示される DOM 要素を追加または削除します。要素の位置が変更され、要素のサイズが変更され、テキストの変更や画像が置き換えられるなどのコンテンツが変更されます。ページのレンダリングが開始されると、ブラウザのウィンドウ サイズが変更され、 redraws 
    : リフローがトリガーされたときに再描画をトリガーする必要があります。さらに、色の変更、テキストの方向の変更、影の変更などがあります。

24. VUE ルーティングの原理は何ですか?

ルーティングはハッシュ モードとヒストリ モードの 2 つのモードに分けられます
原則:
    ハッシュ: URL のハッシュ値はクライアントの状態です サーバーにリクエストを送信するとき、ハッシュ部分は送信されず、その値の変化はブラウザ上にハッシュが表示されますので、ブラウザのアクセス履歴に記録を追加することで、ブラウザの戻る・進むボタンでハッシュの切り替えを制御したり、ハッシュ値を変更することでページをジャンプしたりすることができます。履歴モードでは、フロントエンド
    URL は実際のものと同じである必要がありますバックエンドへのリクエストを開始する URL は一貫しており、pushState と replaceState の 2 つの API を使用して URL の変更を操作および実現できます。ページを更新せずにブラウザの履歴を確認したり、popstateを使用してURLの変更を監視したりして、ページジャンプ機能を実現します

25. vueの差分アルゴリズムをご存知ですか？教えて？

Diff アルゴリズムは、同じレベルのツリー ノードを比較するための効率的なアルゴリズムです。同じレベル内でのみ比較が行われることと、レベルを超えて変更が比較されること、diff 比較のプロセスで両側からループが移動することの 2 つの特徴があります。比較の原則
: 
    1. データが変更されると、set メソッドは Dep.notify を呼び出してすべてのサブスクライバー ウォッチャーに通知し、サブスクライバーは patch を呼び出して実際の DOM にパッチを適用し、対応するビューを更新します
    。 updateChildren メソッドを呼び出して比較し、古い Vnode と新しい Vnode のすべての子ノードが比較されるまで、再帰的にレイヤーごとに下位に進みます。domDiff のプロセスは 2 つのツリーの比較に似ています。同じノードが見つかるたびに、その子ノードがレイヤーごとに比較されます。これは、深い再帰的トラバーサル比較のプロセスです。

26. キープアライブについてのあなたの理解について教えてください。

1. Keep-alive は vue の組み込みコンポーネントです。Keep-alive は、コンポーネントの切り替え中に状態をメモリに保持し、DOM (いわゆるコンポーネント キャッシュ) の繰り返しレンダリングを防止します。2. Keep-alive が動的コンポーネントをラップする場合
、コンポーネント インスタンスを破棄するのではなく、アクティブなコンポーネント インスタンス
3. キープアライブでは props 属性を設定できます: 名前が一致する場合にのみキャッシュされる文字列または正規表現を含めます; 4.
除外: 文字列または正規表現、任意名前 一致したコンポーネントはキャッシュされません、最大数、最大でキャッシュできるコンポーネント インスタンスの数

27. レスポンシブデザインとは何ですか? レスポンシブデザインの基本原則は何ですか? 実行する方法？

    レスポンシブ Web サイト デザイン: ネットワーク ページ デザイン レイアウトの一種で、ページの設計と開発は、ユーザーの行動や機器環境 (システム プラットフォーム、画面サイズ、画面の向きなど) に応じて対応して調整する必要があります。レスポンシブ デザイン:
    はい メディア クエリを通じてさまざまなデバイスの画面サイズを検出して処理します モバイル端末を処理するには、ページ ヘッダーにメタ ステートメント ビューポートが必要です 実装方法: 1. メディア クエリ: さまざまな種類のメディア条件を設定し、対応する条件
を
    与える対応する条件による メディア呼び出しに対応するスタイルシート
    2. パーセンテージ: ブラウザの幅または高さが変更されると、ブラウザの変更に応じてブラウザ内のコンポーネントの幅と高さをパーセンテージ単位で変更できます。式 3 の効果。
    vw/vh: vw はビュー ウィンドウを基準とした幅を表し、vh はビュー ウィンドウを基準とした高さを表します。どのレベルの要素でも、vw 単位の場合、1vw はビュー幅
    4 の 1 パーセントに等しくなります。rem: rem は、ルート要素 html に対する font-size 属性です。デフォルトでは、ブラウザのフォント サイズです。 1rem = 16pxの場合、16pxです。

28. クロスドメインの問題を解決するにはどうすればよいですか?

ブラウザの同一オリジン ポリシー制限によって引き起こされるクロスドメインの問題により、ブラウザが 1 つのドメイン名の Web ページから別のドメイン名のリソースをリクエストすると、ドメイン名、ポート、プロトコルの違いがクロスドメインになります。 -domain. 解決策: 1. jsonp クロスドメイン
ドメイン
    2 
    、Nginx リバースプロキシ
    3、Php エンド変更ヘッダー
    4、Document.domain は異なる Windows 間での相互アクセスと操作を実現
    5、Cors はクロスドメインを解決
    6、Window.name は異なるドメイン間のデータ転送を実現するためのブラウザの特性

29. Webpack のパッケージング速度を最適化するにはどうすればよいですか?

1. テンプレートでのローダーの使用を可能な限り減らし、ローダーの頻繁な実行の頻度を減らす
2. 開発テクノロジーの反復を継続する: node、yarn、npm、webpack は最新かつ最も安定したバージョンを維持する3.
プラグインはできるだけ少なく、信頼できるものにしてパフォーマンスを選ぶ さて、公式推奨プラグイン
4. Resolve パラメーターの合理的な設定
5. DllPlugin を使用して webpack のパッケージ化速度を上げる
6. パッケージ ファイルのサイズを制御する
7. スレッドローダー、パラレルウェブパック、ハッピーパックマルチプロセスパッケージ化

30. SPAの最初の画面の読み込み速度が遅い問題を解決するにはどうすればよいですか?

最初の画面の読み込み: ユーザーが入力した URL にブラウザが応答してから、最初の画面のコンテンツがレンダリングされるまでの時間。この時点で、Web ページ全体が完全にレンダリングされる必要はありませんが、Web ページ全体が表示される必要があります。現在のウィンドウに必要なコンテンツ 1. エントリ ファイルのサイズを削減します
    。異なるルートに対応するコンポーネントを異なるコード ブロックに分割します。ルートが要求されると、ルートは個別にパッケージ化されるため、エントリ ファイルは次のようになります。ワーカーのオフライン
    キャッシュ、localstroage の適切な使用
    3、UI フレームワークのオンデマンド ロード
    4、コンポーネントの繰り返しパッケージ化
    5、画像リソースの圧縮
    6、GZip 圧縮の有効化
    7、SSR の使用: サーバー側レンダリング、コンポーネントまたはページはサーバーを通じて HTML 文字列を生成し、再度ブラウザーに送信します。

31. React Router にはいくつのモードがありますか? 実施原理は？

2 つのモード: ハッシュ モードとヒストリー モード
    ハッシュの原理: ハッシュ値が変更されると、グローバル ウィンドウ オブジェクトの hashchange イベントがトリガーされます。したがって、ハッシュ モード ルーティングでは、hashchange イベントを使用して URL の変更を監視し、DOM 操作を実行してページ ジャンプの
    履歴原則をシミュレートします。つまり、HTML5 履歴インターフェイスの新しい PushState () メソッドと replaceState () メソッドを使用します。

32. ブラウザのアドレスバーにURLを入力してページが表示されるまでの手順は何ですか？

1. ブラウザは、要求された URL を DNS ドメイン名分析に送信し、実際の IP を見つけて、サーバーへの要求を開始します。 2.
バックグラウンド処理が完了した後、サーバーはデータを返し、ブラウザはファイル (HTML) を受信します。 、JS、CSS、画像など) 
3. ブラウザはロードされたリソース (HTML、JS、CSS など) を解析し、対応する内部データ構造 (HTML DOM など) を確立します; 4. 解析されたリソース ファイルをロードします
。ページをレンダリングして完了します。

33. JavaScript のデータ型について教えてください。収納の違い？

基本型: 数値、文字列、ブール、未定義、null、シンボル
複合型: オブジェクト、配列、関数
ストレージの違い: 
    1. 異なる場所: 基本データ型はスタックに格納され、参照型はヒープに格納されます
    。宣言 変数のメモリ アドレス割り当て: 対応する値は単純型の値スタックに格納され、ヒープを指すメモリ アドレスは参照データ型 3 のスタックに格納されます。単純基本型の割り当ては同じ値を生成します。 2 つのオブジェクトは異なるアドレスに対応し
    、複合型の割り当てでは、保存されたオブジェクトのメモリ アドレスが別の変数に割り当てられ、2 つの変数はヒープ メモリ内の同じオブジェクトを指します。

34. React Hooks についてのあなたの理解について教えてください。それはどのような問題を解決しましたか?

フックは React 16.8 の新機能です。
これにより、問題を解決するためにクラスを作成せずに状態やその他の React 機能を使用できるようになります。 
    1. コンポーネント内で状態関連のロジックを再利用および共有するのは困難です。
    2. ビジネスの変化により、関数コンポーネントをクラス コンポーネントに変更する必要があります
    。 3.複雑なロジックを持つコンポーネントは開発と保守が難しい コンポーネントが複数の無関係なローカル状態を処理する必要がある場合、各ライフサイクル関数には無関係なさまざまなロジックが含まれる可能性がある 4. クラス コンポーネントは既存のツールに基づいて最適化される いくつかの既存の問題 5. 新たな問題
    の
    出現フックの機能は、関数コンポーネントの機能を拡張し、クラス コンポーネントと同様の機能を備えています。日常的な使用では、フックを使用することでほとんどの問題が解決でき、コードの再利用メカニズムもあるので、フックを優先します。

35. 約束についてのあなたの理解について教えてください。

    1. Promise は、コミュニティによって提案および実装された非同期プログラミングの最初のソリューションであり、他の従来のソリューション (コールバック関数やイベント) よりも合理的かつ強力です。
    2. 非同期処理コールバックピラミッドの問題を解決するために Promise が生成される
    3. Promise オブジェクトの状態は外界の影響を受けない 一度変化した Promise の状態は再び変化しない この結果は任意のタイミングで取得できる4. Promiseコンストラクターは
    関数をパラメータとして受け取り、関数の 2 つのパラメータはresolveとrejectです。これらは JavaScript エンジンによって提供される 2 つの関数であるため、自分でデプロイする必要はありません。solve 関数の役割は、Promise オブジェクトの状態を「未完了」から「成功」(つまり、保留中から解決済み) に変更し、非同期操作が成功したときに呼び出して、非同期操作の結果を渡すことです。この関数の機能は、Promise オブジェクトの状態を「未完了」から「失敗」(つまり、保留中から拒否) に変更し、非同期操作が失敗したときに呼び出して、報告されたエラーを渡すことです。非同期操作をパラメータとして指定します。
    5. Promise インスタンスが生成された後、then メソッドを使用して、解決済み状態と拒否済み状態のコールバック関数をそれぞれ指定できます。

36. Webpack の共通ローダーについて教えてください。それはどのような問題を解決しましたか?

1. ローダーは、モジュールのソース コードを変換し、モジュールのインポートまたはロード時にファイルを前処理するために使用されます。
2. スタイルローダー: DOM のインライン スタイル タグ スタイルに CSS を追加します。
3. Caa-loader: CSS ファイルを渡します。から導入してcssコードを返す
4、Less-loader：処理レス
5、Sass-loader：sass処理
6、Postcss-loader：postcssを処理してcssを処理
7、File-loader：ファイルを出力ディレクトリに配布し、相対パスを返す
8、HTML-minify-loader: HTMLを圧縮

37. React のパフォーマンスを最適化する手段は何ですか?

1. shouldComponentUpdate を通じて: state と props を比較して再レンダリングするかどうかを決定し、デフォルトで true を返し、レンダリングで false を返したくない 2. PureComponent: 
state と props の比較結果を比較することで実現します
3. React.memo:コンポーネントのレンダリングをキャッシュして、不必要な更新を回避します (関数コンポーネントのみ) 
4. インライン関数の使用を避けます。 render が呼び出されるたびに、新しい関数が再レンダリングされ、コンポーネント内に関数が作成され、イベントが実行されます。関数自体にバインドされる
5. React Fragments を使用して追加のマークアップを回避する
6. Immutable を使用する: レンダリングの数を減らす
7. 遅延ロード コンポーネント: コード分割機能を実現するためにサスペンス コンポーネントと遅延コンポーネントを使用する
8. イベント バインディング メソッド
9. Server-サイドレンダリング

38. React の setState 実行メカニズムについて教えてください。

    コンポーネントの表示形式はデータの状態と外部パラメータによって決定でき、データの状態が状態であり、値の状態を変更する必要がある場合はseStateを通じて変更し、更新機能を実現します。コンポーネントの内部データ。SetState は同期データと更新データに分けることができます
    。非同期更新、コンポーネントのライフサイクルまたは反応合成イベントでは、setState は非同期、setTimeout またはネイティブ dom イベントでは、setState は同期です

39. Vue コンポーネント間の通信方法は何ですか?


この種の質問は、あなたがそれについて詳しく知っていることを示すために最初に分類されているため、私は最後まで答えられなかったり、聞き逃したりしましたが、面接官はコミュニケーションのコンポーネントの 4 つの主要なカテゴリ
(親と子、親子)を気にしません。理解
1. props と $emit 親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントは $emit を通じて親コンポーネントにデータを渡してイベントをトリガーします
2. $attrs と $listeners 
3. 中央イベント バス上の 2 つのメソッドは、親コンポーネントと子コンポーネント間のデータ転送を扱いますが、2 つのコンポーネントが親子ではない場合はどうなるでしょうか? この場合、中央イベント バスのアプローチを使用できます。新しい Vue イベント バス オブジェクトを作成し、bus.$emit を通じてイベントをトリガーし、bus.$on を通じてトリガーされたイベントをリッスンします。
4. 提供と注入 親コンポーネントのプロバイダーを通じて変数が提供され、子コンポーネントの inject を通じて変数が注入されます。サブコンポーネントの深さに関係なく、 inject が呼び出されている限り
、プロバイダ内のデータを注入できます。現在の親コンポーネントの prop 属性からデータを取得することだけに限定されるのではなく、親コンポーネントのライフサイクル内であれば、子コンポーネントはそれを呼び出すことができます。
5. v-model: 親コンポーネントが v-model を通じて子コンポーネントに値を渡すと、値の prop 属性が自動的に渡され、this.$emit( を通じて子コンポーネントの v-model バインディングが自動的に変更されます) 'input', val) 値を設定します
6、$parent と $children は
vue の Key 値の役割について説明します
vue の仮想 dom と diff アルゴリズムについて説明します
7、ボードキャストとディスパッチ
8. Vuex はコンポーネント間のデータ対話を処理します。ビジネス ロジックが複雑で、多くのコンポーネントがいくつかの共通データを同時に処理する必要がある場合、現時点では上記の方法はプロジェクトのメンテナンスに役立たない可能性があります。vuex のアプローチは次のとおりです。これらの公開データ データが抽出されると、他のコンポーネントがこの公開データを読み書きできるようになり、分離の目的が達成されます。

40. React ライフサイクルの落とし穴について教えてください。それを避けるにはどうすればよいでしょうか?

1. getDerivedStateFromProps は、アンチパターン コードを簡単に作成できるため、制御されたコンポーネントと制御されていないコンポーネントの区別が曖昧になります
。
3. 主にパフォーマンスの問題により、componentWillReceiveProps も非推奨としてマークされ、getDerivedStateFromProps に置き換えられます。
4. shouldComponentUpdate は、true または false を返すことによって、新しいレンダリングをトリガーする必要があるかどうかを決定します。主にパフォーマンスの最適化に使用されます。
5. 新しい非同期レンダリング メカニズムにより、componentWillUpdate も廃止マークが付けられており、推奨されません。元のロジックは、変換のために getSnapshotBeforeUpdate およびcomponentDidUpdate と組み合わせることができます。
6.componentWillUnmount 関数でイベントのバインドを解除したり、タイマーをキャンセルしたり、その他のクリーンアップ操作を忘れると、バグが発生しやすくなります。エラー境界処理を追加しないと、レンダリング中に例外が発生したときにユーザーには操作不能な白い画面が表示されるため、必ず追加してください

41. setState は調整フェーズで何を行いますか?

1. コード内で setState 関数を呼び出した後、React は受信パラメーター オブジェクトをコンポーネントの現在の状態とマージし、いわゆる調整プロセス (Reconciliation) をトリガーします。
2. 調整プロセスの後、React は比較的効率的な方法で新しい状態に従って React 要素ツリーを構築し、UI インターフェイス全体の再レンダリングを開始します; 3. React が
要素ツリーを取得した後、React は新しい状態を自動的に計算しますツリーと古いツリーのノードの違いを分析し、その違いに応じてインターフェイスの再レンダリングを最小限に抑えます; 
4. 差分計算アルゴリズムでは、React はどの位置が変更されたか、どのように変更されるべきかを比較的正確に知ることができます。すべての新しいレンダリングの代わりに、オンデマンドで更新します。

42. reduxの実現原理について話し、コアコードを書きますか？

1. アプリケーションの状態を状態に置き、ストアが状態を管理します。
2. Reducer の役割は、ストア内の対応する状態を更新するために新しい状態を返すことです
3. Redux の原則に従って、UI 層のすべての状態変更はアクションによってトリガーされる必要があります。アクションは に渡されます。対応するリデューサーが返され、リデューサーが戻ります。新しい状態によってストアに保存されている状態が更新され、状態の更新が完了します。 4. サブスクライブとは、ストアの
リスナー関数をサブスクライブすることです。サブスクライブされたこれらのリスナー関数は、各ディスパッチが開始された後に順次実行されます。 5.
ミドルウェアの追加が可能 投入されたディスパッチを書き換える

43. React合成イベントの原理は何ですか?

    React のイベントはすべて合成イベントです。すべての dom イベントを dom にバインドする代わりに、イベントはドキュメントに均一にバインドされます。トリガーされると、イベントはドキュメントにバブルして合成イベントをトリガーします。これは合成イベントであるため、したがって、e.stopPropagation を使用して停止することはできませんが、e.preventDefault を使用して停止します。
    合成イベント: すべてのタイプのイベントプラグインをループし、各イベント タイプに対応する異なるイベント プールを生成します。空の場合は、新しいイベント プールを生成し、以前のものを使用し、一意のキーに従って指定されたコールバック関数を取得し、コールバック関数で返します。パラメータ用。

44. なぜ反応要素には $$type 属性があるのですか?

目的は XSS 攻撃を防ぐことです。
    Synbol はシリアル化できないため、React は、$$typeof 属性があるかどうかによって、現在の要素オブジェクトがデータベースからのものであるか、独自に生成されたものであるかを判断できます。$$typeof 属性がない場合、react は要素の処理を拒否します。

45. reduxミドルウェアについてのあなたの理解を教えてください。一般的に使用されるミドルウェアは何ですか? 実施原理は？

    Reduxミドルウェアは、アプリケーションシステムとシステムソフトウェアの間にあるソフトウェアの一種で、システムソフトウェアが提供する基本サービスを利用して、アプリケーションシステムの各部や異なるアプリケーションをネットワーク上で接続し、リソースの共有や機能の共有を実現します
。 : redux-thunk は非同期操作に使用され、redux-logger はログ記録に使用されます 実装
原理: すべてのミドルウェアはネストされた実行のために配列に入れられ、渡されたデータ型を判断し、最後に store.dispatch、ミドルウェアを実行します 内部ミドルウェアAPI は getstate メソッドとディスパッチメソッドを取得できます。

46. イベントループについての理解について教えてください。

JavaScript はシングルスレッド言語です。つまり、同時に実行できることは 1 つだけですが、シングルスレッドがブロックするという意味ではありません。シングルスレッドのノンブロッキングを実現する方法はイベント ループです。すべての
タスクは、同期タスク、非同期タスクに分けられます。
    同期タスク: すぐに実行されるタスク。同期タスクは通常、実行のためにメイン スレッドに直接入ります。非同期タスク
    : Ajax ネットワーク リクエスト、setTimeout タイマー関数
    同期タスクはメイン スレッド、つまりメイン実行スタックに入り、非同期タスクはメイン スレッドに入ります。タスクキュー。実行後にメインスレッド内のタスクが空の場合、タスクキューに移動して対応するタスクを読み取り、実行のためにメインスレッドにプッシュします。そして、上記の処理を連続的に繰り返すことをイベントループと呼びます。

47. フロントエンドのクロスドメインソリューション?

1. Jsonp クロスドメイン: script タグを使用するクロスドメイン制限はありません。src 属性はコールバック パラメーターを含む get リクエストを送信し、サーバー インターフェイスはデータを返し、それをコールバック関数に入れてブラウザーに返します。 、ブラウザはそれを解析して実行し、フロントエンド データから取得します。
2. クロスドメイン リソース共有: ブラウザが XMLhttpRequest リクエストをクロスオリジン サーバーに送信できるようにし、ajax は同じオリジンでのみ使用できるという制限を克服します。
3 . Nginx プロキシ クロスドメイン
4. Node.js ミドルウェア プロキシ クロスドメイン
5. Localtion.hash +iframe クロスドメイン

48. 配列の一般的なメソッドと関数、少なくとも 15 個?

1. Array.join(): 配列内の要素を文字列に結合します。
2. Array.push(): 新しい要素を配列の最後の位置に追加します。
3. Array.splice(): の添字に従います。 array 配列の任意の位置に要素を追加または削除します 仮引数 1 は、配列の添字に従って要素の数を追加または削除することを意味します。
4. Array.slice(): 配列の添え字に従って新しい配列を切り取ります
5. Array.forEach(): この配列メソッドは 3 つの仮パラメータを受け取ります、最初の仮パラメータは配列内の各項目です、2 番目のパラメータは配列内の各項目の添字のインデックス。3 番目のパラメーターは配列そのものです。
6. Array.map(): ループし、新しい配列を格納するメモリ領域を割り当てて返します。
7. Array.filter(): 新しい配列を作成します。新しい配列内の要素はフィルター メソッドによってチェックされ、次に、配列はすべての要素の条件を満たすように変更されますが、元の配列は変更されません。
8. Array.reduce(): アキュムレータ (アキュムレータ) として関数を受け取り、配列内の各値 (左から右へ) が減少 (増分) し始め、最終的に値になります。
9. Array.every(): すべての配列値がテストに合格するかどうかをチェックします。
10. Array.some(): 配列値がテストに合格するかどうかを確認します。
11. Array.indexOf(): 配列内の要素値を検索し、その位置を返します。
12. Array.find(): 配列に合格した最初の配列テスト関数 要素の値
13、Array.pop(): 配列から最後の要素を削除します
。 14、Array.shift(): 最初の配列要素を削除し、他のすべての要素をより低いインデックスにシフトします。
15. Array.unshift(): 配列の先頭に新しい要素を追加し、古い要素を逆にシフトします。

49. vue の mixin についてのあなたの理解について教えてください。


1. Mixin は、メソッド実装を提供するオブジェクト指向プログラミング言語のクラスです。他のクラスは、そのサブクラスにならずに mixin のメソッドにアクセスできます。 2. Vue の Mixinは、Vue を配布するための非常に柔軟な方法です。コンポーネント
3. これは本質的に js オブジェクトであり、データ、コンポーネント、メソッド、作成されたものなど、コンポーネント内の任意の関数オプションを含めることができます。 4. 共有関数をオブジェクトの形式で mixins オプションに渡します
。コンポーネントが mixins オブジェクトを使用すると、mixins オブジェクトのすべてのオプションがコンポーネント自体のオプションに混合されます。

50. for...in ループと for...of ループの違いは何ですか?

1. For in と for of の両方をトラバースに使用できます
2. For in は配列のインデックス インデックスをトラバースし、for of は配列の要素値をトラバースします
3. For in はオブジェクトのトラバースに適していますが、もちろんこれも使用できます配列を走査しますが、いくつかの問題があります。for of は、数値、配列オブジェクト、文字列、およびイテレータ オブジェクトを含む他のコレクションを走査できます。 4. For in は、プロトタイプを含む、配列
の列挙可能なすべてのプロパティを走査します。For of は、配列内の要素のみを走査します。配列、プロトタイプの属性とインデックスは含まれません。
5. for in は常にオブジェクトのキー、または配列または文字列の添字を取得します。for of はオブジェクトの値、または配列または文字列の値を取得します。

51. Jsのデータ型を判断する方法は何ですか? 少なくとも 5 つ名前を付けますか? 違いは何ですか?

1. Typeof メソッド: 参照されるオブジェクトの型に関係なく、データ型を表す文字列を返し、Object を返します。 2. 
Instanceof メソッド: 構築型からデータ型を決定します。
3. Constructor メソッド: プロトタイプ オブジェクトの属性です。コンストラクターを指す
4. Object.prototype.toString メソッド: オブジェクト オブジェクトは [Object object] を返します。他の型は呼び出しが必要で、呼び出しに適用されます。
5. Jquery.type() メソッド

52. Object.defineProperty() についての理解について教えてください。

    1. Object.defineProperty() メソッドは、オブジェクトの新しいプロパティを直接定義するか、オブジェクトの既存のプロパティを変更して、このオブジェクトを返します。IE8は非対応です。
    2. 現在、オブジェクトには 2 種類の属性記述子があります: データ記述子とアクセス記述子
    3. データ記述子は値を持つ属性であり、書き込むこともできません; アクセス記述子は get によって定義されます 4. データ記述子
    値があり、書き込み可能であり、アクセス記述子は、一連の getter 関数と setter 関数によって記述される属性です。get の戻り値が属性値として使用され、set メソッドは唯一のパラメータを受け入れます。そして、パラメータの新しい値を割り当てます
    5. get または set メソッドを使用する場合、writable 属性と value 属性は使用できず、その逆も同様です。

53. Vue のカスタム命令を理解するためのアプリケーションシナリオは何ですか?

1. 命令システムは、コンピュータ ハードウェアの言語システムでもあり、機械語とも呼ばれ、システム プログラマから見たコンピュータの主な属性です 2. カスタム命令は、コンポーネント、バインド、挿入、更新、などのフック関数としても存在します
。 ComponentUpdated、unbind 
3 、シナリオ: フォームの繰り返し送信の防止、画像の遅延読み込み、ワンクリックのコピー機能

54. JavaScript のメモリリークのいくつかの状況について話しますか?

1. 予期しないグローバル変数
2. タイマーの解放を忘れた
3. 複数の参照、複数の変数が同じオブジェクトを参照している場合、一部の参照がクリアされない
4. クロージャの不正な使用
5. Console.log 出力情報メモリが解放されていない

55. 大きなファイルのアップロードを再開するにはどうすればよいですか?

大きなファイルをアップロードする場合、サーバーのデータ処理能力、リクエストのタイムアウト、ネットワークの変動などの変数がユーザー エクスペリエンスに影響するため、大きなファイルのアップロードには個別の処理を行う必要があります。アップロードされたファイルは、特定のサイズに応じて分割されます
。ファイル全体を複数のデータ ブロックに分割し、分割してアップロードします。アップロードが完了すると、サーバーはアップロードされたファイルを要約して元のファイルに統合します
。ダウンロードまたは再アップロードするときに、各部分がアップロードまたはダウンロードにスレッドを使用するか、ダウンロードされた部分が未完了の部分のアップロードまたはダウンロードを継続し始め、最初からアップロードとダウンロードを開始する必要がなく、ユーザーは時間を節約できますそして速度を上げます。
3. ブレークポイントからアップロードを再開するには、通常、サーバーが戻ってどこから開始するかを指示する実装方法と、ブラウザがそれを独自に処理する実装方法の 2 つがあります。

56. ネイティブ JS はプルアップ読み込みとプルダウンリフレッシュをどのように実装しますか?

プルアップの読み込みとプルダウンの更新はどちらもユーザーの操作に依存します
1. プルアップの読み込み: 
    1.scrollTop: スクロール ウィンドウの高さはウィンドウの上部からの距離であり、上にスクロールするにつれて増加します。初期値は 0 で、変化する値です
    2. clientHeight: 画面の表示領域の高さを示す固定値です; 
    3.scrollHeight: ページがスクロールできない場合にも存在します。 、scrollHeight は clientHeight と同じです。4.scrollHeight は、本文のすべての要素 (本文要素自体のパディングを含む) の合計長を表します。
下限式は次のとおりです。scrollTop + clientHeight >=scrollHeight 
2. プルダウン更新:
プルダウン更新の本質は次のとおりです。ページ自体が上部に配置されている場合、ユーザーはプルダウンする必要があります トリガーされたアクション
    1. ネイティブの touchstart イベントをリッスンし、その初期位置の値 e.touches[0].pageY; を記録します
    2. ネイティブの touchmove イベントをリッスンします現在のスライド位置の値と初期位置の値の差を記録して計算します。0 より大きい場合はプルダウンを意味します。CSS3 の translationY 属性を使用して、要素がジェスチャに追従して対応する差分を下にスライドさせます。また、設定も行います。許容される最大スライディング値; 3. 元の touchend イベントをリッスンし
    、要素がこの時点で最大値までスライドすると、コールバックがトリガーされ、同時にtranslateY が 0 にリセットされ、要素は初期値に戻ります。位置

57. デバイスピクセル、cssピクセル、デバイス非依存ピクセル、dpr、ppiの違いについて教えてください。

1. スケーリングなしの場合、1 CSS ピクセルは 1 デバイス非依存ピクセルに相当します。
2. デバイスピクセルは、画面によって生成された後は変更されませんが、デバイス非依存ピクセルは変更される仮想単位です。
3. オンPC 側、1 デバイス独立ピクセル = 1 デバイス ピクセル (100%、スケールなし) 
4. モバイル端末では、標準画面 (160ppi) で 1 デバイス独立ピクセル = 1 デバイス ピクセル
5. デバイス ピクセル比 (dpr) =デバイス ピクセル/デバイス非依存ピクセル
6. インチあたりのピクセル数 (ppi)、値が大きいほど、画像が鮮明になります。

58. BFC についてのあなたの理解について教えてください。

1. Bfc はブロックレベルの書式設定コンテキストです。これはページ内のレンダリング領域であり、独自のレンダリング ルールのセットがあります。 2. 
Bfc の目的は、外部の世界から完全に独立したスペースを形成することです。 -要素は外部要素に影響を与えません
3. Bfc はページ上で分離された独立したコンテナです コンテナ内の子要素は外部要素に影響を与えません、またその逆も同様です 4. Bfc の領域は領域と
重なりません浮遊要素の

59. TCP に 3 ウェイハンドシェイクと 4 ウェイハンドシェイクが必要な理由を教えてください。

3 ウェイ ハンドシェイクは信頼性の高いデータ伝送チャネルを確立するためのものであり、4 ウェイ ハンドシェイクはデータの受信後に接続が確実に閉じられるようにするためのものです。
1. 3 ウェイ ハンドシェイクとは、TCP 接続を確立するときに、クライアントとサーバーが合計 3 つのパケットを送信する必要があることを意味し、主な機能は、双方の受信および送信能力が正常であるかどうかを確認し、パケットを指定することです。準備
2. 4 回手を振るということは、tcp が接続を終了することを意味します, これには 4 回手を振る必要があります. サーバーはクライアントから切断メッセージを受信すると、すぐには接続を閉じませんが、最初に ACK パケットを送信してクライアントに通知します。 接続を閉じる要求を受信した後、サーバーからのすべてのメッセージが送信された後でのみ接続が切断されます。

60. フロントエンドのパフォーマンスを最適化する手段は何ですか?

1. リソースは圧縮およびマージされ、http リクエストが削減されます
2. 画像は png を使用して最適化され、サイズが小さくなります
3. 非コア コードは非同期でロードされます
4. ブラウザ キャッシュを使用して、リソース ファイルはローカルに保存されます次の呼び出しをキャッシュから直接取得できる
5. CDN を使用できる 負荷を分散し、パフォーマンスを向上させる
6. DNS の事前分析
7. Gzip コード圧縮を有効にする
8. 不要な Cookie を削減する

61. 浮いているフロントエンドをクリアする方法は少なくとも 3 つありますか?

1. 追加のラベル方法: クリアする必要がある浮動要素の前に空の div を置き、この空の div に属性 Clear を設定します。両方 2. 親要素のオーバーフロー属性を hidden または auto に設定します。
3. 
: after 擬似要素を使用してすべてのフローティング ラベルをクリアします -> フローティング ラベルの前にブロック レベルの要素を追加します

62. 強力なキャッシュとネゴシエーションキャッシュとは何ですか?

ブラウザが初めてリソースをリクエストした後、再度リクエストする必要がある場合、ブラウザはまずリソース キャッシュのヘッダー情報を取得し、次に Cache-Control に従ってローカル キャッシュ内でリソースの有効期限が切れているかどうかを判断し、有効期限が切れているかどうかを判断します。 。有効期限が切れていない場合、リソース情報はローカル キャッシュから直接取得され、ブラウザはサーバーからリソースを再リクエストしなくなります。有効期限が切れた場合は、リクエストを再送信し、リソースを再キャッシュする必要があります。 、キャッシュ時間を更新します。
1. 強力なキャッシュは、http リクエスト ヘッダーの Expires フィールドと Cache-Control フィールドによって制御されます。これらのフィールドは、リソースのキャッシュ時間を示すために使用されます。Expires は http1.0 の仕様であり、その値は GMT 形式の絶対時刻文字列です。
2. ネゴシエーション キャッシュは、キャッシュ リソースが利用可能かどうか、有効期限が切れているかどうかを判断するためにサーバーによって使用されます。サーバーはキャッシュ リソースが利用可能かどうかをブラウザに確認する必要があるため、両者は通信する必要があり、通信プロセスではリクエストを送信するため、サーバーがキャッシュ リソースが利用可能かどうかを確認できるようにヘッダーに特別な識別子が必要です。要求されたリソースをキャッシュしてアクセスできる

63. スタックとキューについてのあなたの理解について教えてください。応用シナリオ?

1. スタック (スタック) は、スタックとも呼ばれ、操作が制限された線形テーブルです。テーブルの最後に挿入と削除操作のみを実行する線形テーブルに限定されます
。先入れ後出しの原則、最初に入力されたデータはスタックの一番下にプッシュされ、最後のデータはスタックの一番上にあります。データを読み取る必要がある場合、データはスタックからポップされます。 3. キューはスタックと
非常によく似ています。キューは特別な線形テーブルです。特別な特徴は、テーブルのフロントエンド (フロントエンド) でのみ削除操作を許可することです。 )、テーブルのバックエンド (後部) で操作を挿入します
。最初にキューから削除されるため、キューは先入れ先出しとも呼ばれます。 5. シナリオ
: スタックは関数呼び出しや再帰、およびコンパイラが入力構文を分析するとき、キューはバイナリ ツリーを走査するときに使用できます。

64. git rebase と git merge についての理解について教えてください。違い？

1. バージョン管理に git を使用するプロジェクトでは、機能の開発が完了し、master ブランチにマージされるとき、git merge と git rebase の 2 つの方法があります。 2. git rebase と git merge はどちらも同じ効果があります
。どちらも、あるブランチの送信を別のブランチにマージしますが、原則が異なります。
3. git merge は、現在のブランチを指定されたブランチにマージします: git merge xxx; git rebase は、ブランチをマージするか、指定されたコミットにマージします: git rebase -I < commit> 
4. merge によってブランチをマージすると、マージ コミットが追加され、2 つのブランチの履歴がリンクされます; rebase はブランチ全体を別のブランチに移動し、すべてのブランチを効果的に統合します。

65. git でよく使われるコマンドを教えてください。

1. git status: ウェアハウスの現在のステータス、変更が加えられたかどうかを追跡します。
2. git diff Novel.txt: 変更されたコンテンツ操作を表示します。
3. git reflog: バージョン番号を表示します
。 4. git log:提出履歴
5. git restart --hard バージョン番号: そのバージョン番号にシャトルします。
6. git checkout -- Novel.txt: ワークスペースの変更を破棄できます。
7. rm ファイル名: ファイルを削除します (未作成のファイル) 
8. git rm ファイル名 : リポジトリ内のファイルを削除します。9 
、 git ブランチ dev : dev ブランチを作成します。
10、 git ブランチ -a : ブランチとそれが現在どのブランチにあるかを表示します。
11、 git checkout dev : dev ブランチ
12 に切り替え、git merge dev: 現在のブランチを dev ブランチとマージしてマージします。

66. Vueコンポーネント通信?

コンポーネント通信とは、特定の目的分類を達成するために、送信者が特定の媒体を介して特定の形式で情報を受信者に送信することを意味します。
親コンポーネントと子コンポーネント間の通信、兄弟コンポーネント間の通信、祖父母と子孫間の通信、非リレーショナル間の通信vue には 8 つの従来の通信スキーム
があります。
    1. props を介して: サブコンポーネントは props 属性を設定し、受信側の親コンポーネントによって渡されるパラメータを定義し、親コンポーネントはサブコンポーネント タグを使用してリテラルを渡します。 2. トリガー$emit を介したカスタム
    イベント: 子コンポーネントは $emit を介してカスタム イベントをトリガーし、$emit の 2 番目のパラメーターは渡された値であり、親コンポーネントはリスナーをバインドして子コンポーネントによって渡されたパラメーターを取得します 3、使用参照
    :親コンポーネントは子コンポーネントを使用するときに ref を設定し、親コンポーネントは子コンポーネント ref 
    4 を設定することによってデータを取得します。 EventBus: 中央イベント バス EventBus を作成し、兄弟コンポーネントは $emit、$emit 2 番目を通じてカスタム イベントをトリガーします。パラメータは渡された値です。
別の兄弟コンポーネントは、$on 
    5、$parent、または $root を通じてカスタム イベントをリッスンします。: 共通の祖先 $parent または $root を通じて通信ブリッジを構築します。
    6、attrs とリスナー: バッチ ダウン属性 $ attrs を設定します。 $listeners には、親スコープ内のプロパティとして認識 (および選択) されない属性バインディング ( class と style を除く) が含まれます。内部コンポーネントは v-bind="$attrs" を通じて渡すことができます。
    7. Provide と Inject: 祖先コンポーネントで Provide 属性を定義し、渡された値を返し、子孫コンポーネントでの Inject を通じてコンポーネントによって渡された値を受け取ります
    8 . Vuex: 共有変数を格納するコンテナと同等の機能

67. vuex についてのあなたの理解について教えてください。その原理の核となるコードを書きますか?

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターン + ライブラリです。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態が予測可能な方法で変化することを保証します。
vuex の 5 つのコア属性: 状態、ゲッター、ミューテーション、アクション、モジュール
    1、状態: ストア データ、ストア状態; ストアをルート インスタンスに登録した後、this.$store.state を使用してアクセスします; vue 内のデータに対応します; ストア データ モードは応答性が高く、vue コンポーネントはストアからデータを読み取ります。データが変更されると、コンポーネントもそれに応じて更新されます。
    2. Getter: ストアの計算されたプロパティと考えることができ、その戻り値は依存関係に従ってキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。
    3. ミューテーション: Vuex ストアの状態を変更する唯一の方法は、ミューテーションを送信することです。
    4. action: 非同期操作が含まれており、突然変異を送信することで間接的に状態を変更します。
    5. module: ストアをモジュールに分割します。各モジュールには状態、突然変異、アクション、ゲッター、さらにはネストされたサブモジュールがあります。

68. プロップとステートの類似点と相違点は何ですか? render メソッドはどのような状況で実行されますか?

相違点: 
1. プロパティはコンポーネント内で変更できませんが、状態はコンポーネント内で変更できます。
2. 自己コンポーネントのプロパティは親コンポーネントから変更できますが、自己コンポーネントの状態は親コンポーネントから変更できません。親コンポーネント
同じ点: 
1. props と state どちらも HTML にエクスポートされた生データです。
2. props と state は両方とも決定的です。作成するコンポーネントが同じ props と state の組み合わせである場合 3. 異なる出力を生成する場合、何か間違ったことをしたに違いありません 4. props と state の両方がレンダリングの更新をトリガーします 5 両方
の
.propsと state は純粋な JS オブジェクトです (typeof を使用して判断します。結果はオブジェクトです) 6. props と state の初期値は
、どのような状況で
親コンポーネントから実行できますか? 
    1. クラスコンポーネントが setState を呼び出して状態を変更するとき
    2. 関数コンポーネントが useState Hook を通じて状態を変更するとき
    3. クラスコンポーネントが再描画されるとき
    4. 関数コンポーネントが再描画されるとき

69. React の 2 つの新しいフック関数は何ですか? 削除された遺書シリーズとの違いは何ですか？

React の 2 つの新しいライフサイクル フック関数? 
1. 
getDerviedStateFromProps の関数: props から派生状態を取得します。
2. 
getSnapshotBeforeUpdate の関数: コンポーネントが更新される前にスナップショットを取得します。通常は、componentDidUpdate と組み合わせて使用されます。getSnapBeforeUpdate の戻り値は、3 番目のパラメーターとしてコンポーネントDidUpdate に渡されます。
実際、その中心的な機能は、更新前に dom 情報を記録し、レンダーが dom を変更する前に、それをcomponentDidUpdate に渡すことです。
2. React の新しいライフサイクルによりフック関数は削除されましたか? 
1.componentWillMount 
2.componentWillReceiveProps 
3.componentWillUpdate
概要
    1.componentWillMount で実行する必要があること (一部のデータ初期化操作はこのフックで処理する必要があります)、コンストラクターとComponentDidMount も実行できます。さらに良いことに、このメソッドは廃止されました。
    2. 不安定性のために getDerivedStateFromProps に置き換えられているため、componentWillReceiveProps の実際の動作は名前と一致しません; 
    3. 同じ理由で、componentWillUpdate は getSnapshotBeforeUpdate に置き換えられます。

70. CDNの特徴と意義は何ですか?

1. CDN は、コンテンツ配信ネットワークを意味します。これは、世界中のエッジ サーバーに分散された、既存のネットワークに基づくインテリジェントな仮想ネットワークです。基本的な考え方は、データ送信の速度と安定性に影響を与える可能性のあるインターネット上のボトルネックやリンクを回避し、コンテンツの送信をより速く、より安定させることです。
2. CDN とは、元のサーバーから他のサーバーにデータをコピーすることを意味します。ユーザーがアクセスすると、データ コンテンツを複製するサーバー上でアクセスできます。その目的は、ユーザーが必要なコンテンツをより速く、より適切に入手できるようにし、ネットワークの混雑を解決し、Web サイトにアクセスしたユーザーの応答速度を向上させることです。CDN アクセラレーションは低コストかつ高速であり、アクセス数が比較的多い Web サイトに適しています。
特徴: 
1. ローカル キャッシュの高速化: 企業 Web サイト (特に、大量の画像や静的ページを含む Web サイト) のアクセス速度が向上し、上記 Web サイトの安定性が大幅に向上します。
2. ミラーサービス：異なる事業者間の相互接続のボトルネックの影響を排除し、事業者間のネットワーク高速化を実現し、異なるネットワークのユーザーが良好なアクセス品質を確保できるようにします。
3. リモート アクセラレーション: リモート アクセス ユーザーは、DNS ロード バランシング テクノロジに基づいてキャッシュ サーバーをインテリジェントかつ自動的に選択し、リモート アクセスを高速化するために最速のキャッシュ サーバーを選択します。
4. 帯域幅の最適化: サーバーのリモート ミラー キャッシュ サーバーを自動的に生成します。リモートユーザーがアクセスする際、キャッシュサーバーからデータを読み込み、リモートアクセスの帯域幅を削減し、ネットワークトラフィックを共有し、元のWEBサーバーの負荷を軽減できます。
5. クラスター攻撃対策: 広範囲に分散された CDN ノードとノード間のインテリジェントな冗長メカニズムにより、ハッカーの侵入を効果的に防止し、Web サイトに対するさまざまな DDoS 攻撃の影響を軽減し、同時により良いサービス品質を確保できます。

71. クロージャとは何ですか?またアプリケーションシナリオとは何ですか?

1. クロージャは他の関数の内部変数を読み取ることができる関数です 端的に言えば、クロージャは関数ですが、他の関数の中にあります。
2. JavaScript では、関数内のサブ関数のみがローカル変数を読み取ることができるため、クロージャは単純に「関数内で定義された関数」として理解できます。 応用シナリオ: 1. ブロックレベルのスコープを模倣: タイマー 2. 埋め込み
ポイント
    カウンター
    :製品で一般的に使用されるデータ収集方法のいくつか
    3. カリー化: 複数パラメータ関数を単一パラメータ関数に変換する方法

72. ブラウザカーネルについてのあなたの理解について教えてください。

コアは主にレンダリング エンジンと js エンジンに分かれます。
1. レンダリング エンジン: Web ページのコンテンツ (HTML、XML、画像など) の取得、情報 (CSS など) の整理、および Web ページの表示方法の計算を担当します。 Web ページを表示し、モニターまたはプリンターに出力します。ブラウザー カーネルが異なると、Web ページの構文解釈が異なるため、レンダリング効果も異なります。ネットワーク コンテンツを編集および表示する必要があるすべての Web ブラウザ、電子メール クライアント、およびアプリケーションには、カーネル
2、JS エンジンが必要です。JS エンジン: JavaScript を解析して実行し、Web ページ上で動的な効果を実現します
。当初、レンダリング エンジンと JS エンジンは明確に区別されていませんでした。その後、JS エンジンはますます独立するようになり、カーネルはレンダリング エンジンのみを参照する傾向がありました。

73. フロートをクリアする方法は何通りありますか? それぞれの長所と短所は？

フローティングをクリアする: 子要素のフローティングにより親要素の内側の高さが崩れる問題を解決するため
方法: 
1. 余分なラベルの方法 (最後のフローティング ラベルの後に、新しいラベルを追加し、clear:both を設定します)メリット：普及している 分かりやすく、より便利; デメリット：意味のないタグを追加、セマンティクスが貧弱
2.親にoverflow属性を追加（親要素にoverflow:hiddenを追加） メリット：コードが簡潔; デメリット：コンテンツが増加すると、自動改行なしでコンテンツが非表示になることが簡単です 3. after 疑似要素を使用して
フロートをクリアします 利点: クローズドフローティングの概念に準拠しており、構造セマンティクスが正しいです。短所: IE6-7 は疑似要素
4 をサポートしません。フロートをクリアするには前後の二重疑似要素を使用します。 長所: コードがより簡潔になります。短所: haslayout をトリガーするにはzoom: 1 を使用します。

74. アニメーションを手動で記述する必要がある場合、最小時間間隔はどれくらいだと思いますか?またその理由は何ですか?

ほとんどのモニターのデフォルト周波数は 60Hz、つまり 1 秒あたり 60 回リフレッシュするため、理論上の最小間隔は 1/60*1000ms = 16.7ms です。ブラウザのレンダリングとユーザー エクスペリエンスを考慮すると、0.1 ～ 0.3 秒の最小設定が最適です。

75. リアルDOMと仮想DOMの違いについて教えてください。長所と短所？


1. リアル DOM、リアル DOM とは、構造化テキストを抽象化したドキュメント オブジェクト モデルを意味します。ページ上に表示されるすべてのノードは、実際の DOM 構造です。 2. 仮想 Dom、本質的に JavaScriptオブジェクトの形式で存在します。仮想 DOM を作成する目的は
、ページ ビューに仮想ノードをより適切にレンダリングすることです。仮想 DOM オブジェクトのノードは、実際の DOM のプロパティに 1 つずつ対応します。4. 2 つの違いは次のとおりです。 DOM は組版と再描画の操作を実行
せず
    、実際の DOM は頻繁に再配置と再描画を行います。仮想 DOM
    の合計損失は「仮想 DOM の追加、削除、変更 + 実 DOM の差分の追加、削除、変更 + 組版と再描画」になります。実 DOM の完全な損失は、「実 DOM 完全な追加、削除、変更 + 組版と再描画」の
長所と短所ですか? 
    リアル DOM の利点: 使いやすい
    欠点: 
        1. 効率が低く、解析速度が遅く、メモリ使用量が多い
        2. パフォーマンスが悪い: リアル DOM を頻繁に操作すると、再描画やリフローが発生しやすくなる可能性がある仮想 DOM を使用する利点は
        次
    のとおりです。シンプルで便利 : 実際の DOM を使用して手動でページを完成させると、面倒でエラーが発生しやすく、大規模なアプリケーションではメンテナンスも困難です 2. パフォーマンス : 仮想 DOM を使用すると、頻繁な更新を効果的に回避でき
        ます3. クロスプラットフォーム
        : 仮想 DOM の助けを借りて、React はクロスプラットフォーム機能をもたらし、一連のコードが複数の端末で実行されます 欠点
    : 
        1. 一部のアプリケーションでは非常に高いパフォーマンスを発揮します要件があるため、仮想 DOM を極端な最適化の対象にすることはできません
        2. 初めて大量の DOM をレンダリングする場合、仮想 DOM の追加レイヤーの計算により、速度が通常よりわずかに遅くなります

76. Reactのイベント機構について教えてください。

1. React自体は、イベント登録、イベント合成、イベントバブリング、イベントディスパッチなどの一連の独自のイベントメカニズムを実装しています。本来のものとは異なりますが、これもブラウザベースのイベントメカニズムの下で完了します。
2. React に登録されたイベントは、最終的には React コンポーネントに対応する DOM ではなく、ドキュメントの DOM にバインドされます (メモリ オーバーヘッドが削減されるのは、すべてのイベントがドキュメントにバインドされ、他のノードにはバインディング イベントがないためです)。
React It は一連のイベント バブリング メカニズム自体を実装しているため、event.stopPropagation() が無効になります。
4. React は、トリガーされたコンポーネントからキューの形式で親コンポーネントにバックトラックし、JSX で定義されたコールバックを呼び出します。
5. React には独自の合成イベント SyntheticEvent があります。

77. ファイバーアーキテクチャについてのあなたの理解について教えてください。それはどのような問題を解決しましたか?

React Fiber は、Facebook が 2 年以上にわたって React に対して行った大きな変更と最適化であり、React のコア アルゴリズムを再実装したものです。
Reactでは主に以下のような動作が行われます。
    1. タスクごとに優先度が上がり、優先度の高いタスクは優先度の低いタスクに割り込むことができます。2. 非同期タスクを追加し
    て requestIdleCallback API を呼び出す ブラウザがアイドル状態のとき、
dom diff ツリーはリンク リストになります 1 つの dom は 2 つのファイバー (リンク リスト) に対応し、 2 つのキュー。どちらも中断されたタスクを見つけて再実行します。
    3. アーキテクチャの観点から見ると、Fiber は React のコア アルゴリズム (つまり、調整プロセス) を書き直したものです。 4.
    コーディングの観点からは、 Fiber は内部で定義されたデータ構造であり、Fibre ツリー構造のノード単位であり、React 16 の新しいアーキテクチャにおける仮想 DOM です。

78. React diff の原理は何ですか?

1. Vue と同様に、React は無効な Dom 操作を大幅に回避するために仮想 DOM の概念を導入し、ページの構築効率を大幅に向上させます。diff アルゴリズムは、新旧の仮想 DOM を比較することでより効率的に見つけることができます。 Dom の変更:
操作プロセスは主に 3 つの層に分かれています: ツリー層、コンポーネント層、要素層
    1、ツリー層: ツリー層は DOM ノードのレベル間移動の操作を無視し、同じ DOM ノードの比較のみを行います。 2. コンポーネント層: 同じタイプのコンポーネントが見つかった場合は、ツリーの差分に従って
    階層比較を実行します。コンポーネントの種類、異なるコンポーネントを直接判断する これはダーティコンポーネントであり、そのコンポーネントの下にあるすべての子ノードを置き換えます このコンポーネントの仮想 DOM に変更がないことがわかっている場合は、手動で使用できます 判断には shouldComponentUpdate が使用されますdiff が必要かどうか、これにより diff の効率とパフォーマンスがさらに向上します 3.
    要素レイヤー: 同じレベルより下位で、新しいノードの場合は挿入操作を実装でき、冗長ノードの場合は削除操作を実行できます。実行可能; 転置されたノードに直面して、移動操作を実行可能

79. CSSを使って三角形を実現するには？

1. 境界線: 幅と高さが 0 の要素を指定すると、その境界線の任意の値が直接交差し、この交差を使用して三角形を作成できます。つまり、ボーダー属性は三角形で構成されます。右向きの三角形が必要な場合は、ボーダーの左側を表示し、他の辺を透明に設定できます
。三角形を実現するには、グラデーションを背景画像と組み合わせる必要があります。グラデーションを使用して段階的に三角形を実装してみましょう。
3. クリップパス: クリップパスは、多角形 (または円、楕円など) を描画し、要素内に配置するために使用します。実際、ブラウザはクリップ パスの外側には何も描画しないため、表示されるのはクリップ パスの境界線です。
4transform: オーバーフローで回転: 三角形を描くために非表示にします

80. shouldComponentUpdate の機能は何ですか?

1. shouldComponentUpdate() の戻り値に従って、React コンポーネントの出力が現在の状態または props の変更によって影響を受けるかどうかを判断します。デフォルトの動作では、コンポーネントは状態が変化するたびに再レンダリングされます。
2. React での props と state 値の変更により、コンポーネントが再レンダリングされます。shouldComponentUpdate を使用するのは、不要なレンダリングのレンダリングを減らすことです。ブール値を返し、仮想 DOM を比較して、実際の DOM 更新が必要かどうかを確認します。

81. git rebase と git merge についての理解について教えてください。違い？

1. git を使用してバージョン管理を行っているプロジェクトで、機能の開発が完了し、master ブランチにマージする場合、git rebase と git merge が使用されます 2. どちらも同じ機能です: ブランチのマージを送信
する別のブランチですが、原則が異なります
3. Git merge は、現在のブランチを指定されたブランチにマージします: git merge xxx; git rebase は、指定されたコミットにマージします: git rebase -I <commit > 4. マージによってマージされたブランチ
A マージ コミットが追加され、2 つのブランチの履歴がリンクされます。リベースによってブランチ全体が別のブランチに移動され、すべてのブランチのコミットが効果的に統合されます。

82. redux を使用するプロセスにおいて、定義されたアクションタイプの継続的な重複を防ぐにはどうすればよいですか?

ES6 では、一意の値を表す新しいプリミティブ データ型 Symbol が導入されています。
    新しいコマンドを Symbol 関数の前に使用することはできません。使用しないと、エラーが報告されます。これは、生成された Symbol がオブジェクトではなくプリミティブ型の値であるためです。Symbol 関数は、主にコンソールに表示したり文字列に変換したりするために、Symbol インスタンスの説明を表す文字列をパラメータとして受け入れることができます。区別しやすくなります。

83. React の仮想 dom について話しますか? 仮想 dom 計算時の diff と key の関係は何ですか?

1. 実際、これは実際の DOM を抽象化したレイヤーにすぎません。ツリーは JavaScript オブジェクト (VNode ノード) に基づいており、オブジェクトの属性はノードを記述するために使用されます。最後に、ツリーは次のようにマッピングできます。一連の操作を通じて実際の環境を再現します。仮想 DOM を作成すると、ページ ビューに仮想ノードをより適切にレンダリングできるため、仮想 DOM オブジェクトのノードが実際の DOM のプロパティに 1 つずつ対応します。2. Web ドキュメントをシミュレートします。 JS を介してノードを接続して
JS オブジェクト ツリー (仮想 DOM) を生成し、次に別の手順を実行して実際の DOM ツリーを生成し、それを画面に描画します。後でコンテンツが変更された場合、React はまったく新しい仮想 DOM ツリーを再生成し、その差分を以前の仮想 DOM ツリーと比較し、その差分をパッチにパッケージ化して実際の DOM に適用し、閲覧用に画面にレンダリングします。デバイス。
仮想 DOM が計算されるときの diff と key の関係は次のとおりです。
    1. React は 2 つの仮想 DOM ツリーを同時に維持する必要があります。1 つは現在の DOM 構造を表し、もう 1 つは React の状態が変化し、変更しようとしているときに生成されます。再レンダリングされる。React は、これら 2 つのツリーの違いを比較して、DOM 構造を変更するかどうか、および変更方法を決定します。このアルゴリズムを Diff アルゴリズムと呼びます。
    2. key 同じレベルのノードが、現在のレベルでの位置が変更されたときに、同じレベルの他のノードに固有のキー属性を追加する場合。React diff アルゴリズムが古いノードと新しいノードを比較した後、同じキー値を持つ新しいノードと古いノードが見つかった場合は、移動操作を実行します (その後、元の戦略に従ってノードの奥深くまで進んで比較および更新します)元の戦略に従って古いノードを削除する代わりに、新しいノードを作成する操作。これにより、間違いなく React のパフォーマンスとレンダリング効率が大幅に向上します。

84. React の props.children は、map 関数を使用してトラバースするため、例外が表示されます。なぜですか? どのように横断すればよいでしょうか?

1. 現在のコンポーネントに子ノードのデータ型がない場合は未定義です
2. 子ノードのデータ型がある場合はオブジェクトです。
3. 子ノードが複数ある場合は配列になります ノードが複数ある場合のみmapメソッドを直接呼び出すことができます Reactでは子ノードオブジェクトを安全に横断できるreact.children.map()メソッドを提供しています。

85. immutable.js についてのあなたの理解について教えてください。

1. Immutable.js は、React のパフォーマンスの最適化に使用されます。
2. React で immutable を使用すると、ページの不必要なレンダリングを減らすことができ、React のような詳細な比較をレンダリングする必要がありません。 3. immutable は直接的かつ迅速に実行できます
。 4. Immutable は、不変です
。コンピュータでは、一度作成されると変更できないデータを指します。Immutable
オブジェクトの変更や追加、削除は、新しい不変オブジェクトを返す Immutable
実装の原則は、永続データ構造 (永続データ構造) です。
    1. データ構造を使用してデータを保存します
    。 2. データが変更されると、オブジェクトが返されますが、新しいオブジェクトはメモリを無駄にせずに以前のデータ構造を使用できる

86. Redux はもともと同期型ですが、なぜ非同期コードを実行できるのですか? 実現原理とは何ですか？ミドルウェアの実装原理は何ですか?

1. Redux-thunk は非同期操作をサポートするミドルウェアです
2. 非同期操作を実行するには、まずサンクをダウンロードし、そのサンクを使用して非同期操作を実行する必要があります 非同期操作をサポートしています ディスパッチと getState を使用できますデータまたは状態を取得する 3. 
Redux は状態管理ライブラリです. Redux のコアは 3 つの部分: ストア、アクション、リデューサーです. 
4. ディスパッチを通じてタスクのアクションに送信し、アクションで Promise オブジェクトを返します。 5.リデューサー
内で型とデータを渡すことによる解釈

87. reduxにおける同期アクションと非同期アクションの最大の違いは何ですか?

1. 同期アクション: ディスパッチ関数の実行後、対応するリデューサーの純粋な関数が直ちに実行されます。リデューサーの実行後、状態はすぐに変化します。このとき、store.getState 関数を使用して最新の状態値を取得します。 2 
. 非同期アクション: 原則として、redux は非同期アクションのソリューションを提供しません。非同期アクションは、サードパーティのミドルウェア ソリューション (redux-thunk など) に依存する必要があります。非同期アクション (本質的にはディスパッチの機能) をディスパッチした後、ターゲット状態はすぐには応答しませんが、状態がいつ応答するかを決定するのは非同期関数内のロジックに依存します。
3. 違い:
    まず、redux とreact-redux を区別します。Redux は他のフレームワークでも使用できる別個のモジュールですが、react-redux はデータを管理するための React のために生まれました。
    Redux の設計思想: Web アプリケーションはステートマシンであり、ビューとステートは 1 対 1 対応し、すべてのステートはオブジェクトに格納されます

88. redux-saga と redux-thunk の違いと使用シナリオは何ですか?

1. redux-thunk のコードを使用して、関数を返すと、ストアは返された関数を呼び出し、使用できるディスパッチを公開します。redux-thunk のプロセス全体では、非同期タスクの実行が完了するのを待ち、その後ディスパッチを呼び出し、ストアに移動してリデューサー 2 を呼び出します。redux-saga のコードを使用すると、アクション タイプ
が私たちのディスパッチの は、reducer に含まれていないため、redux-saga のリスナー関数 takeEvery がそれをリッスンし、非同期タスクが結果 (ディスパッチと同等) を持ったときに put メソッドを実行し、ディスパッチを再度トリガーします。
redux-saga のプロセス全体では、アクションとリデューサーが実行された後、リデューサーに次のようなアクションの違いがあるかどうかが判断されます。 
    1. redux-thunk と redux-saga の非同期タスクを処理するタイミングが異なります。redux-saga の場合、2. redux アクションに基づいて、非同期タスクを個別に処理するために async アクションのブランチが再度オープンされました 3. 
    Saga は基本的に独自に非同期イベント監視メカニズムをセットアップしており、その量私自身の経験から言えば、redux-thunk はよりシンプルで、redux 自体とより密接に関連しています。

89. 通常の for ループが forEach ループより効率的であるのはなぜですか?

1. for ループとは、ループ内のコードを添字を介して繰り返し実行するもので、インデックスを介して要素を取得することができ、強力な機能を持っています。
2. forEach() ループ メソッドを使用して、配列の各要素を呼び出し、その要素をコールバック関数に渡します。一部の foreach は拡張 for ループとも呼ばれ、forEach は実際には for ループの特別に簡略化されたバージョンです。forEach ループは、空の配列に対してコールバック関数を実行しません。
相違点: 
    1. 走査: for ループは順番に走査し、forEach は反復子イテレータを使用して走査します。
    2. データ構造: for ループは要素にランダムにアクセスし、foreach は順次リンク リスト内の要素にアクセスします。
    3. パフォーマンス: arraylist の場合、順序どおりです。 for ループを使用すると順番にアクセスでき、速度は比較的高速ですが、foreach ループを使用すると、for ループよりもわずかに遅くなります。LinedList の場合、これは単一リンク リストであり、for ループは読み取るたびに最初の要素から次のフィールドを読み取る必要があり、非常に時間がかかります。foreach を使用すると、現在のノードを直接読み取ることができ、データが高速になります。

90. モバイル端末向けの1ピクセルソリューションとは何ですか?

モバイル Web 開発では、UI デザインのドラフトで境界線を 1 ピクセルに設定します。フロントエンド開発プロセス中に border: 1px が表示される場合、テストでは一部のモデルでは 1px が太くなり、よりクラシックなモバイルであることがわかります。ターミナル.1px ピクセルの問題
解決策: 
1. 10 進数: 0.5px、ブラウザが間違いなくサポートするのが遅いと思います; 現時点では、使用できる場合はハッキングできます; 2. シャドウ、ボーダーイメージのソリューションは推奨されませ
ん
3. 背景画像とズームはプロジェクト内で一緒に使用できます。たとえば、単一の線にズームを使用し、背景画像を使用して 4 つのフレームをシミュレートします。まあ、角を丸くしたい場合は、できることは何もありません4.
変換クラスと疑似クラスの使用をお勧めします

91. フレックスボックスのスケーリングメカニズムとは何ですか?

1. フレックス ボックスの項目設定 flex-grow 属性は、項目の拡大率を定義します。デフォルト値は 0 です。値が大きいほど拡大が強くなり、負の値はサポートされません。 -shrink
属性はアイテムの収縮率を定義します。デフォルト値は 1 です。値が大きいほど、縮小が強くなります。負の値もサポートされていません。3. flex-basis 属性は、アイテムが占める主軸のスペースを定義します
。余分なスペースを割り当てる前の項目。ブラウザはこの属性に従って主軸が冗長であるかどうかを計算します。デフォルト値は auto で、これはプロジェクトの元のサイズです。

92. vue の mixin についてのあなたの理解について教えてください。

1. Mixin はメソッド実装を提供するオブジェクト指向プログラミング言語のクラスです 1. 他のクラスはサブクラスを呼び出すことなく mixin 内のメソッドにアクセスできます 2. Vue の Mixin は Vue コンポーネントの再利用可能なディストリビューションです 機能 3. 本質的
に
はjs オブジェクトには、データ、コンポーネント、メソッド、作成済みなど、コンポーネント内の任意の関数オプションを含めることができます。 4. 
public 関数をオブジェクトの形式で mixins オプションに渡します。コンポーネントが mixins オブジェクトを使用する場合、 mixins オブジェクトのすべてのオプションはコンポーネント自体のオプションに混合されます

93. for...in ループと for...of ループの違いは何ですか?

for in と for of はどちらもトラバーサル 1 に属します。for 
in トラバーサルの場合の配列のインデックス インデックス、for のトラバーサル
2 の場合の配列の要素値は、for in の方がオブジェクトのトラバースに適しており、配列をトラバースすることもできます。いくつかの問題が発生します; for of 配列、オブジェクト、および反復子オブジェクトを含むその他のコレクション
3. for in は常にオブジェクトのキーまたは配列または文字列の添え字を取得します; for of はオブジェクトの値または配列の値を取得しますまたは文字列

94. パブリッシュ/サブスクライブモデルとは何ですか?そのコア実装コードを作成しますか?

1. パブリッシュおよびサブスクライブ モード: サブスクライバー (Subscriber) はイベント登録 (Subscribe) を通じてサブスクリプション イベントをディスパッチ センター (トピック) に送信し、ディスパッチ センター (トピック) はサブスクライバーの登録情報 (コールバック関数) を保存します。イベントが発生すると、発行されたメッセージがイベント発行 (Publish) によってディスパッチ センターに送信され、ディスパッチ センターはサブスクライバーがイベントに登録したメッセージを一律に処理します (登録時にコールバック関数を実行します)。 2. 実装: // パブリッシュ サブスクリプション モードをインスタンス化します
。
    複数の新しいイベント分離を実現できます。通常は 1 つのプロジェクトで十分です
    const pub1 = new Pubsub() 
    // 呼び出し例
    pub1.topic("on-sleep) // スリープ状態のサブスクリプション トピックを作成します
    / /student 1 スリープをサブスクライブ
    pub1.subscribe("on-sleep",(a)=>{ 
        console.log("sleep") 
        console.log(a) 
    }) 
    //Student 2 がスリープ コールバックをサブスクライブするのは、
    pub1 とは異なります。 submit("on-sleep",(a)=>{ 
        console.log("sleep2") 
        console.log(a) 
    }) 
 
    setTimeout(()=>{ 
        //もう時間が迫っているので、時間になったことを知らせます寝るため！
        pub1.publish("睡眠中",{info:"もう寝る時間です！"}) 
    },2000)

95. ビューポートについてのあなたの理解について教えてください。

1. ブラウザでは、表示されている領域がビューポートです
2. PC 側のページでは、レイアウト ビューポートとビジュアル ビューポートは同じであるため、ビューポートを区別する必要はありません 3. ただし、モバイル
ではモバイル端末の場合、モバイル端末上の Web ページ ウィンドウは比較的小さいことが多く、大きな Web ページをモバイル端末に完全に表示できることが期待されるため、レイアウトのビューポートは表示されるビューポートとは異なります。 、
モバイル端末のレイアウト ビューポートはビジュアル ビューポート
5 より大きいため、モバイル端末ではビューポートを 3 つの状況に分けます
    : 1. レイアウト ビューポート (レイアウト ビューポート) 
    2. ビジュアル ビューポート (ビジュアル レイアウト) 
    3. 理想ビューポート (理想的なビューポート) レイアウト)

96. useEffect についての理解について教えてください。どのライフサイクルをシミュレートできますか?

1. フック関数 useEffect を使用して、コンポーネントの副作用を実現します。useEffect(desired action, [コンポーネント状態のリスト]); 2 番目のパラメーターは、配列である useEffect 呼び出しのタイミングを処理するために使用され、配列はコンポーネント状態のリストです。
2. useEffect は、componentDidMount をシミュレートします。useEffect の 2 番目のパラメーターが空のリストに渡されると、ライフサイクル関数コンポーネント DidMount をシミュレートするのと同じになります。この副作用は、コンポーネントが初めて UI をマウントするときに 1 回だけ呼び出されます。これを使用して、コンポーネントが初めてマウントされるときのシミュレーション、API へのアクセス、およびデータの取得を行います。
3. UseEffect は、componentDidUpdate をシミュレートします。 useEffect を使用するときに 2 番目のパラメーターを指定しない場合、ライフサイクル関数componentDidUpdate をシミュレートすることと同じになります。レンダリングが終了するたびに呼び出されます。
4. useEffect は、componentWillUnmount をシミュレートし、コンポーネント WillUnmount をシミュレートする useEffect 内の関数を返します。

97. React の setState と replaceState の違いについて話しますか?

1. setState は、状態オブジェクトの設定に使用されます。
2. 2 つのパラメータ: nextState、現在の状態とマージされる、設定される新しい状態、コールバック、オプションのパラメータ、コールバック関数。この関数は、setState が正常に設定され、コンポーネントが再レンダリングされた後に呼び出されます。
3. nextState と現在の状態をマージし、コンポーネントを再レンダリングします。setState は、React イベント ハンドラーおよびリクエスト コールバックで UI 更新をトリガーするための主なメソッドです。
4. replaceState() メソッドは setState() に似ていますが、このメソッドは nextState の状態のみを保持し、nextState にない元の状態は削除されます
。 set、現在の状態stateを置き換えます。コールバック、オプションのパラメータ、コールバック関数。この関数は、replaceState が正常に設定され、コンポーネントが再レンダリングされた後に呼び出されます。
-------------------------------------------------- -
----------- 
1. setState は Object.assign に相当する状態の一部を変更するもので、上書きするだけで元の状態は縮小されません。 state; 
2. replaceState は、元の状態を完全に置き換えることです。これは、値を割り当てることと同じで、元の状態を別のオブジェクトに置き換えます。新しい状態の属性が削減されると、その状態はその状態に存在しなくなります。

98. React における onClick バインディングの動作原理について話しますか?

コンポーネント要素を onClick イベントにバインドすると、
1. React がまずイベントを登録し、ドキュメントにイベントを一律に登録します
2. コンポーネントの固有の表現キーに従ってイベント関数を格納します
3. 統一した指定、 dispatchEvent コールバック関数
4 . ストレージ イベント コールバック: 反応は、クリック イベントをオブジェクトに保存します。コールバック関数内のストレージは、キーと値のペアの形式でオブジェクトに保存されます。キーはコンポーネントの一意の識別子 ID です。 、値に対応するイベントはコールバック関数であり、コンポーネントを通じてキーは対応する関数に戻ることができます。

99. 垂直マージン統合とは何ですか? 合併後の状況について教えてください。

1. 垂直マージンを結合: 2 つのマージンが交わるとマージンが形成され、結合されたマージンの高さは、結合された 2 つのマージンの高さの大きい方に等しくなります 2. 注: 通常のみ ブロックの垂直マージン
のみ文書フロー内の -level 要素はマージされ、インライン ボックス、フローティング ボックス、または絶対配置の間のマージンはマージされません。 状況: 1. 隣接する要素の縦方向のマージンがマージされる場合: 上の要素が下のマージンを
持つ
場合下の要素に上マージンがある場合、それらの間の垂直方向の間隔は、下端と上端の合計ではなく、2 つのうちの大きい方になります。この現象は外側マージンと呼ばれます
。マージ: 親要素に上部のパディングとボーダーがない場合、親要素の上のマージンは子要素の上のマージンとマージされ、マージされたマージンは 2 つのマージンの中央になります。大きい方、つまり、上マージン親要素は 0 であり、親要素もマージされます。
解決策: 親要素に対して 1 ピクセルの上境界線または上部内側のマージンを定義できます。

100. 参照型としての useEffect の依存関係をどのように扱うか?

1. 「use-deep-compare-effect」を使用します。詳細な比較を実行できます。使用方法は非常に簡単です。「use-deep-compare-effect」から useDeepCompareEffect をインポートし、元の useEffect を useDeepCompareEffect に置き換えるだけです。
2. 上記の問題を解決するには、useRef フックを使用することもできます。useRef の機能は、レンダリング サイクル全体でデータを保存することです。 3. useRef を使用して、
以前のデータを保存します。useEffect の依存関係は参照タイプであり、これが呼び出されます。 obj が変更されるたびに関数が実行されますが、実行関数には追加の判定があり、prevObj は最後のレンダリングでの obj の値であり、prevObj のキーと今回の obj のキーを比較し、条件が満たされた後に他の操作を実行します。会った

101. React の createPortal をご存知ですか?その使用シナリオについて話しますか?

1. ポータル。子ノードを親コンポーネントの外部に存在する DOM ノードにレンダリングします。
2. ReactDOM.createPortal(child,container)
最初のパラメータ (child) は、要素、文字列、フラグメントなどのレンダリング可能な React 子要素です。2 番目のパラメータ (コンテナ) は DOM 要素です。
2. ポータルは、フロー外のコンポーネント、特に位置: 絶対および位置: 固定のコンポーネントに適しています。モーダルボックス、通知、警告、goTopなど。

バージョン 2.0 (更新内容)

1. イベントループについてのあなたの理解について教えてください。

1. イベントループとは、JavaScriptにおける非同期イベントやコールバック関数を処理するための仕組みで、タスクキューからタスクを取り出し、タスクキューが空になるまで実行し続けるJavaScript実行環境のループです。2. イベントループの動作原理: a. 同期コードを実行し、非同期操作をタスクキューに入れる b. メインスレッドタスクがアイドル状態のとき、イベントループはタスクキューにタスクがあるかどうかを確認します c. タスクキューがある場合は、タスクキューにタスクがあるかどうかを確認します。 a. タスクを取り出して実行 d. タスク完了後、再びタスクキューを確認し、b と c の操作を繰り返す 3. イベントループは JavaScript の非常に重要な概念であり、JavaScript が非同期操作や非同期操作を処理できるようになります。プログラムのパフォーマンスとユーザーエクスペリエンスが向上します。

2. BOM についてのあなたの理解を教えてください。一般的な BOM オブジェクトについて何を知っていますか?

1. BOM はブラウザオブジェクトモデルを指し、コンテンツとは独立してブラウザウィンドウと対話するオブジェクトを提供します 2. その機能は、戻る、進む、更新する方法、ブラウザの変更方法など、ブラウザと対話することです、スクロールバーがスクロールし、ブラウザのブランドバージョン、画面解像度 3、ウィンドウなどの顧客情報が取得されます: BOM の中心となるオブジェクトは、ブラウザのインスタンスを表すウィンドウです。ブラウザでは、ウィンドウオブジェクトブラウザウィンドウのインターフェイスとグローバルオブジェクトという 2 つの役割を持ちます。したがって、グローバルスコープで宣言されたすべての変数と関数は、ウィンドウオブジェクトのプロパティとメソッドをプログラムします。 4. ローカル: 5. ナビゲーター: メインブラウザのプロパティを取得し、ブラウザの種類を区別するために使用されます。多くの属性があり、互換性はより複雑です 6. 画面: 純粋にクライアントの機能情報、つまり、ピクセル幅やピクセル高さなど、ブラウザウィンドウの外側に表示されるクライアントの情報を保存します。オブジェクトは主に操作に使用されます。ブラウザ URL の履歴。パラメータを通じて指定された URL に転送、逆方向、またはリダイレクトできます。

3. ブラウザのカーネルとは何ですか?またその違いは何ですか?

一般的なブラウザカーネルは次のとおりです。

Trident カーネル: Microsoft によって開発されたブラウザカーネルで、主に Internet Explorer ブラウザで使用されます。

Gecko カーネル: Mozilla Firefox ブラウザのカーネルであり、他のブラウザでも採用されています。

WebKit カーネル: Apple が開発したブラウザカーネルで、主に Safari ブラウザや Chrome ブラウザで使用されます。

Blink カーネル: WebKit カーネルに基づいて Google が開発したブラウザカーネルで、主に Chrome ブラウザと Opera ブラウザで使用されます。5. 相違点: 1. 主な理由は、レンダリングエンジンが異なるため、ブラウザのパフォーマンス、互換性、セキュリティなどに違いが生じることです。2. Trident カーネルは、CSS と JavaScript の処理が比較的遅い 3. Gecko カーネルは、セキュリティとプライバシー保護にさらに注意を払う 4. WebKit カーネルは、レンダリング速度が速く、互換性が高いことで有名 5. Blink カーネルは、パフォーマンスと安定性の向上に優れています。

4. ブラウザのプログレッシブエンハンスメントとグレースフルデグラデーションの違いについて教えてください。

1. ブラウザーのプログレッシブエンハンスメントとグレースフルデグラデーションは、異なるブラウザーやデバイス間の互換性の問題を解決するように設計されています。さまざまなブラウザやデバイスの機能に適応するための高度な機能とインタラクティブな効果 3. プログレッシブ拡張では、古いブラウザであっても、前方互換性を重視します 4. グレースフルデグラデーション Web サイトやアプリケーションを設計および開発するときに、最初に実現を考慮することを意味します高度な機能とインタラクティブな効果を強化し、これらの機能をサポートしていない古いブラウザーやデバイスに適応するための要件を段階的に減らします。

5. Web サイトのパフォーマンスを最適化するためのソリューションは何ですか?

1. HTTP リクエストの数を最小限に抑えます: js、css などをマージします。 2. ファイルを圧縮します: CSS、JavaScript、HTML およびその他のファイルを圧縮して、ファイルサイズを削減し、Web ページの読み込み速度を向上させます。3. 画像の最適化: 適切な画像形式を使用し、画像サイズを圧縮し、画像の数を減らし、Web ページの読み込み速度を向上させます。4. CDN 高速化: CDN (コンテンツ配信ネットワーク) を使用して Web サイトのアクセス速度を高速化し、Web サイトのコンテンツを世界中のサーバーに配信し、ユーザーが最も近いサーバーからコンテンツを取得できるようにします。5. キャッシュの最適化: ブラウザーのキャッシュとサーバーのキャッシュを使用して、繰り返しのリクエストを減らし、Web サイトのアクセス速度を向上させます。6. フロントエンドの最適化: HTTP リクエストを減らし、CSS スプライトを使用し、JavaScript ファイルやその他のテクノロジーをマージして、ページの読み込み時間を短縮します。7. データベースの最適化: データベースクエリステートメントを最適化し、インデックスを使用し、データベースクエリ時間を短縮し、Web サイトのアクセス速度を向上させます。8. サーバーの最適化: 高性能サーバーを使用し、サーバー構成を最適化し、Web サイトのアクセス速度を向上させます。9. 冗長なコードを削除する: 無駄なコードを削除し、ページサイズを削減し、Web サイトのアクセス速度を向上させます。10. レスポンシブデザイン: レスポンシブデザインを使用すると、Web サイトをさまざまなデバイスや画面サイズに適応させて、ユーザーエクスペリエンスを向上させることができます。

6. Link と @import の違いは何ですか?

1. Link と @import はどちらも外部リソースの導入に使用されます 2. 違い: 1. 読み込み順序が異なります: Link タグはページの読み込みと同時に外部リソースを読み込みますが、@import はページの読み込み後にのみ読み込みます。ページが読み込まれます。外部リソースを読み込みます 2. 異なる互換性: リンクタグはすべてのブラウザでサポートされていますが、@import は一部の古いバージョンのブラウザではサポートされていない場合があります 3. 異なるスコープ: リンクタグを使用してさまざまな種類のリソースを導入できます、CSS、JavaScript、画像などを含みますが、@import は CSS ファイルの導入にのみ使用できます。 4. 異なる優先順位: Link タグの優先順位は @import の優先順位よりも高いため、同じスタイルシートに両方のメソッドがある場合使用すると、Link は @import のスタイルをオーバーライドします。

7. BFC についての理解を教えてください。発動条件は何ですか?

1. BFC はブロックレベルの書式設定コンテキストであり、要素が特定のルールに従ってレイアウトおよびレンダリングされる独立したレンダリング領域を指します 2. BFC の特徴: 1. 内部要素が垂直方向に次々に配置されます
    垂直の流れを形成
します
    2. BFC エリアはフローティング要素と重なりません
    3. BFC エリアは外部要素のマージンと重なりません
    4. BFC エリアはフローティング要素を含むことができます
    5. BFC エリアは要素が覆われないようにすることができます親要素の境界線による
3. トリガー条件: 
    1. ルート要素またはルート要素を含む要素
    2. 浮動要素の float が none に等しくない
    3. 絶対配置位置が絶対または固定である
    4. 表示がinline-block、table-cell、table-caption、flex、inline-flex 
    5. オーバーフローが表示されないブロックレベル要素

8. null と未定義の違いは何ですか?

1. js では、null と unknown はどちらも値が存在しないことを意味します。 2. 違い: 1. 未定義は、変数が宣言されているが値が割り当てられていないこと、またはオブジェクトのプロパティが存在しないことを意味します。 2. null は、変数に値が存在しないことを意味します。 null またはオブジェクトの値が割り当てられている属性には null の値が割り当てられている 3. 条件ステートメントでは、未定義と null の両方が false に変換されますが、比較演算子では動作が異なります。それ自体を含む任意の値と比較されますが、null は未定義とのみ比較され、true になります。

9. CSS 内の要素をドキュメントフローから分離するにはどのような方法がありますか? 測位方法とその違いは何ですか?

1. CSS の要素がドキュメントフローから離れるにはいくつかの方法があります。 1. フロート (フロート): 要素をドキュメントフローの外に移動して、他の要素と並べて表示できるようにします。2. 絶対配置 (位置: 絶対): 要素をドキュメントフローの外に移動し、最も近い位置にある祖先要素を基準にして配置します。3. 固定配置 (位置: 固定): 要素をドキュメントフローの外に移動し、ブラウザウィンドウを基準にして配置します。4. フレキシブルレイアウト (表示: flex): 親要素をフレキシブルコンテナとして設定することで、その子要素をドキュメントフローから切り離し、一定のルールに従って配置することができます。5. グリッドレイアウト（表示：グリッド）：親要素をグリッドコンテナとして設定することで、その子要素をドキュメントフローから切り離し、一定のルールに従って配置することができます。2. 配置方法は次のとおりです。 1. 相対配置 (位置:相対): ドキュメントフロー内の要素の位置を基準とした相対配置は、他の要素の位置に影響を与えません。2. 絶対配置 (position:Absolute): 配置は、最も近い位置にある祖先要素を基準に、または配置された祖先要素がない場合はドキュメントの body 要素を基準に実行されます。3. 固定配置 (位置: 固定): ブラウザウィンドウに対して相対的に配置され、ページがスクロールしても移動しません。

3. 違い: 相対配置と絶対配置の違いは、相対配置はドキュメントフローから切り離されないのに対し、絶対配置はドキュメントフローから切り離されることです。固定位置は絶対位置と似ていますが、ブラウザウィンドウを基準にして相対的に位置し、ページがスクロールしても移動しません。

10. 同期と非同期の違いは何ですか?

1. 同期と非同期とは、タスク処理中にタスクが異なる方法で実行されることを意味します。 2. 同期タスクとは、タスクが順番に実行されることを意味します。各タスクは、実行する前に、前のタスクの完了を待つ必要があります。同期実行では、 3. 非同期実行とは、タスクが順番に実行されず、それぞれのタスクが順番に実行されないことを意味します。タスクは独立して実行できます。前のタスクが完了するまで待ちます。非同期タスクの実行では、タスクの実行はノンブロッキングです。つまり、タスクの実行はタスクの完了を待たずに、次のタスクの実行を継続します。 4. 同期タスクと同期タスクの違い非同期はタスクの実行方法にあります。逐次実行に対して、非同期実行は前のタスクの完了を待たずに独立して実行されます。実際には、通常、非同期実行によりプログラムの応答速度と効率が向上します。

11. 疑似クラスと疑似要素の違いは何ですか? Css3 の新しいセレクターとは何ですか?

疑似クラスと疑似要素の違い: 1. 疑似クラスは、:hover、:active、:focus などの要素の特殊な状態を記述するために使用されますが、疑似要素は一部の要素を作成するために使用されます。 ::before 、 ::after など、ドキュメントツリーにないもの。2. CSS2 では、疑似クラスは単一のコロン (:) で表され、疑似要素は二重コロン (::) で表されます。3. 疑似クラスは任意の要素に使用できますが、疑似要素は一部の特定の要素にのみ使用できます。4. 疑似クラスはセレクター内のどこでも使用できますが、疑似要素はセレクターの最後の位置でのみ使用できます。CSS3 の新しいセレクターには次のものがあります。 1. 属性セレクター: [attr=value]、[attr~=value]、[attr|=value]、[attr^=value]、[attr$=value]、[attr *= value] 2. 疑似クラスセレクター: :nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:first-child、 :last-child、:first-of-type、:last-of-type、:only-child、:only-of-type、:not() 3. 疑似要素セレクター: ::before、:: after、 ::first-letter、::first-line、::selection 4. 組み合わせたセレクター: AB、A > B、A + B、A ~ B

12. Promise と async/await の違いについて教えてください。

Promise と async/await はどちらも非同期操作を処理する方法ですが、それらの間にはいくつかの違いがあります。

構文: Promise は、コールバック関数に基づく非同期プログラミングメソッドであり、.then() メソッドと .catch() メソッドを使用して非同期操作の結果を処理します。また、async/await は ES2017 で導入された非同期プログラミング手法であり、async および await キーワードを使用して非同期操作の結果を処理します。

読みやすさ: Promise と比較して、async/await は読みやすく理解しやすく、コードはより簡潔で明確です。

エラー処理: Promise では、エラー処理では、エラーをキャッチするために .catch() メソッドを使用する必要があります。async/await では、try/catch ステートメントを使用してエラーをキャッチできます。

チェーン呼び出し: Promise はチェーン内の複数の非同期操作を呼び出すことができますが、async/await は 1 つの非同期操作が完了した後にのみ次の非同期操作に進むことができます。一般に、async/await はより直観的で読みやすく、理解しやすい非同期プログラミング手法ですが、場合によっては Promise も非常に便利です。

13. 再配置と再描画の違いについて話しますか? 発動条件は何ですか？

リフローと再ペイントは、ブラウザがページをレンダリングする際の 2 つの重要な概念です。リフローとは、ページ上の要素のレイアウトが変更されたときに、ブラウザーが要素の位置とサイズを再計算し、ページのレイアウトを再配置する必要があることを意味します。リフローではページの再レイアウトと再レンダリングが行われ、比較的パフォーマンスを重視する操作になります。再描画 (リペイント) とは、ページ内の要素のスタイルが変更されたときに、ブラウザーが要素のスタイルを再描画する必要があることを意味します。再描画ではページのレイアウトは変更されず、要素のスタイルのみが再描画されるため、リフローよりもコストが低くなります。リフローをトリガーする条件は次のとおりです。 1. ページの最初のレンダリング 2. ブラウザウィンドウのサイズの変更 3. 要素の位置、サイズ、コンテンツの変更 4. 要素のスタイルの変更 5. トリガーの条件ページスクロール時の再描画には以下が含まれます: 1. 要素のスタイルが変更されます 2. 要素の背景色、境界線の色、テキストの色、およびその他の属性が変更されます 3. 要素の透明度が変更されます 4. 要素のテキストコンテンツが変更されます一般に、再配置や再描画はページに影響を与えるため、開発プロセス中に再配置や再描画が頻繁に行われることは避ける必要があります。JavaScript アニメーションの代わりに CSS3 アニメーションを使用するなど、合理的なレイアウト設計を通じてページのパフォーマンスを最適化できます。

14. Javascript はどのように継承を実装しますか?

1. プロトタイプチェーンの継承: 継承は、サブクラスのプロトタイプオブジェクトを親クラスのインスタンスオブジェクトにポイントすることによって実現されます。2. コンストラクターの継承: サブクラスのコンストラクターで親クラスのコンストラクターを呼び出すことによる継承の実現を指します。3. 組み合わせ継承: 合成継承とは、プロトタイプチェーンとコンストラクター継承を組み合わせた継承方法であり、実装方法は、サブクラスのコンストラクター内で親クラスのコンストラクターを呼び出し、親クラスのプロパティを継承し、サブクラスのコンストラクターのプロトタイプオブジェクトを呼び出すことです。 class は、メソッドを継承する新しい親クラスのインスタンスオブジェクトを指します。4. ES6 でのクラス継承: extends キーワードを使用して親クラスを継承し、super を使用して親クラスのコンストラクターとメソッドを呼び出します。

15. 厳密モードとは何ですか?また制限事項は何ですか?

厳密モードは、開発者がより堅牢なコードを作成できるように制限を強制する JavaScript の実行モードです。厳密モードでは、一部の危険な動作が禁止され、一部のエラーがスローされます。厳密モードの制限は次のとおりです。 1. 宣言されていない変数の使用は禁止されています。2. 変数、関数、関数パラメータの削除は禁止です。3. eval() 関数を使用して変数または関数を作成することは禁止されています。4. with文は禁止です。5. 関数内で argument.callee および argument.caller を使用することは禁止されています。6. 読み取り専用プロパティへの割り当ては禁止されています。7. 組み込みオブジェクトのプロトタイプを拡張することは禁止されています。8. 関数内で変数を繰り返し宣言することは禁止されています。Strict モードは、コードの先頭に「use strict」; を追加することで有効にできます。厳密モードでコードを記述すると、開発者は JavaScript のよくある間違いを回避し、コードの可読性と保守性を向上させることができます。

16. var arr = [1,2,3,4,5,6,7,8,9,10] など、配列の順序をすばやく乱すにはどうすればよいですか?

配列の最後の要素から始めて、配列を前方に走査します。

0 から現在の走査のインデックス値までの整数をランダムに生成します。

現在走査されている要素を、ランダムに生成されたインデックスに対応する要素と交換します。

配列の最初の要素が走査されるまで、手順 2 と 3 を繰り返しながら、配列を前方に走査し続けます。

17. Vueのカスタムコマンドフック機能とは何ですか? カスタムディレクティブで何をしましたか?

Vue のカスタム命令フック関数には、bind、insert、update、componentUpdated、unbind が含まれます。1.bind: 1 回だけ呼び出されます。初めて命令が要素にバインドされたときに呼び出されます。ここでは 1 回限りの初期化設定を行うことができます。2.inserted: バインドされた要素が親ノードに挿入されるときに呼び出されますが、親ノードの前に DOM に挿入することはできません。3. update: バインドされた値が変更されるかどうかに関係なく、バインドされた要素が配置されているテンプレートが更新されるときに呼び出されます。更新前後のバインド値を比較することで、不要なテンプレートの更新を無視できます。4.componentUpdated: バインドされた要素が配置されているテンプレートが更新サイクルを完了すると呼び出されます。5. unbind: 命令が要素からアンバインドされるときに 1 回だけ呼び出されます。以前、カスタムコマンドを使用して、外側の領域をクリックしてポップアップウィンドウを閉じる機能を実装しました。具体的な実装方法はバインドフック関数でドキュメントのクリックイベントをバインドし、クリックイベントが発生した際にクリックされた領域がポップアップウィンドウ内にあるかどうかを判定し、そうでない場合はポップアップウィンドウを閉じます。閉じています。アンバインドフック関数でイベントのバインドを解除します。

18. ページ A からページ B にジャンプし、コンポーネント A をキャッシュし、コンポーネント A からコンポーネント C にジャンプし、キャッシュをキャンセルします。どのように実現しますか?

1.キープアライブは、 to === "B" & from === "A" の場合、現在のページの BeforeRouter(to、from、next) を渡すことができます。 to = の場合、キープアライブのメタ内のパラメーターは true です。 == "C ” & from ===”A” キープアライブのメタのパラメータが false 2. ライフサイクル、this.router.meta を取得してページのメタのパラメータを変更し、キープアライブメタキャッシュ内のパラメータに従ってコンポーネントをアクティブ化するかどうかを決定します

19. Vue2 と Vue3 の応答性の原則と違いは何ですか?

1. Vue2 および Vue3 の応答原理は、Object.defineProperty に基づいています。データが変更されると、ビューの更新が自動的にトリガーされます。ただし、Vue3 は、Object.defineProperty の代わりに Proxy プロキシオブジェクトを使用して応答性の原則を最適化し、応答性の高いシステムをより効率的かつ柔軟にします。2. Vue2 の応答原理は、Vue オブジェクトをインスタンス化するときに、データ内の各プロパティを再帰的に走査し、各プロパティをゲッターとセッターに変換し、プロパティがアクセスまたは変更されると、ゲッターメソッドとセッターメソッドをトリガーするというものです。、応答性の高い更新が可能になります。3. Vue3 の応答原理では、Proxy プロキシオブジェクトを使用します。これにより、オブジェクトへのアクセスと変更操作をインターセプトできるため、応答性の高い更新が実現されます。Vue3 のリアクティブシステムは、通常のオブジェクトをリアクティブオブジェクトに変換できるリアクティブ関数もサポートしているため、開発者はリアクティブシステムをより柔軟に使用できます。4. 一般に、Vue3 の応答システムは Vue2 よりも効率的かつ柔軟ですが、使用方法にはいくつかの違いがあるため、開発者は適切に学習して調整する必要があります。

20. Vue はどのように権限管理を実装し、ボタンレベルの権限を実現するのでしょうか?

1. すべての権限をレベルに応じて第 1 レベルの権限と第 2 レベルの権限に分割し、相対ツリー番号を生成し、各権限の ID を取得して、各 ID をリストに入れ、外部キーをロールの権限に割り当てます。ボタンの権限は、各ボタンが処理メソッドにバインドされているため、ログインユーザーがボタンの権限メソッドに対応しないロール ID を返した場合、ボタンは非表示になります。

最初の週

21. Vue2 と Vue3 の差は 5 ポイント以上ありますか?

パフォーマンスの最適化: Vue3 は、コンパイラーの最適化、応答システムの最適化、仮想 DOM の最適化など、パフォーマンスの面で多くの最適化を実行し、Vue3 のパフォーマンスを Vue2 よりも高速化しました。

コンポジション API: Vue3 ではコンポジション API を導入しています。これは、コンポーネントロジックをより適切に整理して再利用できる新しい API スタイルで、コードがより明確になり、保守が容易になります。

TypeScript のサポート: Vue3 の TypeScript のサポートはより完全になり、型チェックとコードヒントの実行が向上し、コードの信頼性と保守性が向上します。

より優れた Tree-Shaking: Vue3 は、より最新の ES モジュール構文を採用しており、Tree-Shaking をより適切にサポートし、パッケージのボリュームを削減できます。

適応性の向上: Vue3 は Web およびモバイル端末への適応性が高く、PWA や SSR などのテクノロジーをより適切にサポートできます。

エラー処理の改善: Vue3 には、開発者がエラーを見つけて解決することを容易にするエラー処理メカニズムが導入されています。

22. Vue3におけるコンポーネント通信のプロセス[父から息子へ、息子から父へ]?

1. vue3 におけるコンポーネント通信のプロセスは、親から子への通信と息子から父への通信の 2 つの方法に分けられます
2. 父から子へ:
    親コンポーネントは props を介して子コンポーネントにデータを送信し、子コンポーネントは子コンポーネントにデータを送信します。コンポーネントは props を通じてデータを受け取ります。親コンポーネントはテンプレート内の子コンポーネントを使用し、v-bind 命令を通じてデータを子コンポーネントに渡すことができ、子コンポーネントは受信したデータ型とデフォルト値を props で宣言できます。親コンポーネントにイベントを送信し
ます
    。親コンポーネントは、v-on コマンドを通じて子コンポーネントによって送信されたイベントをリッスンし、子コンポーネントは $emit メソッドを親コンポーネントに渡すことができます。

23. 適用/呼び出し/バインドの原則は何ですか?

1. apply、call、bind はすべて、関数の実行コンテキストを変更するために JavaScript で使用されるメソッドです。2. allpy と call の関数は同じです。どちらも関数の実行コンテキストを変更します。つまり、関数内の this ポインタを変更します。両者の違いはパラメータの受け渡し方法にあります。apply は配列を次のように受け取ります。パラメータ、および呼び出しが複数のパラメータを受け取ります。 3、bind メソッドは関数の実行コンテキストを変更するためにも使用されますが、関数はすぐには実行されず、新しい関数が返されます。この新しい関数の this はバインドされた関数を指します。 object 4 の一般的な apply 、 call 、および binding は、いずれも関数の実行コンテキストを変更するために使用されるメソッドであり、それらの違いはパラメータと戻り値の受け渡し方法にあります。apply と call は関数をすぐに実行しますが、bind は新しい関数を返します。

24. プロトタイプとプロトタイプチェーンについての理解について教えてください。

1. プロトタイプは JavaScript の重要な概念であり、他のオブジェクトがプロパティやメソッドを継承できるようにするオブジェクトです。すべての JavaScript オブジェクトには、そのオブジェクトのプロパティとメソッドを定義するプロトタイプオブジェクトがあります。現在のオブジェクトでプロパティまたはメソッドが見つからない場合、JavaScript エンジンは、見つかるまでオブジェクトのプロトタイプオブジェクトを自動的に検索します。2. プロトタイプチェーンは、JavaScript で継承を実装する方法の 1 つであり、プロトタイプオブジェクトから構成されるチェーン構造です。オブジェクトが別のオブジェクトのプロパティまたはメソッドにアクセスする必要がある場合、JavaScript エンジンはプロパティまたはメソッドが見つかるまでプロトタイプチェーンを検索します。プロトタイプチェーン全体でプロパティまたはメソッドが見つからない場合は、unknown を返します。3. JavaScript では、各オブジェクトにはproto属性があり、そのオブジェクトのプロトタイプオブジェクトを指します。オブジェクトのプロパティまたはメソッドにアクセスすると、JavaScript エンジンはまずオブジェクト自体にプロパティまたはメソッドがあるかどうかを確認し、ない場合は見つかるまでプロトタイプチェーンを検索します。プロトタイプチェーン全体でプロパティまたはメソッドが見つからない場合は、unknown を返します。4. つまり、プロトタイプとプロトタイプチェーンは JavaScript における非常に重要な概念であり、オブジェクト間の継承とプロパティとメソッドの共有を実現するのに役立ちます。

25. ES6 の Generator についての理解について教えてください。

1. ES6 のジェネレーターは、実行中に一時停止して現在の状態を保存し、必要に応じて実行を再開できる特別な機能です。Generator 関数は、yield キーワードによる実行の一時停止と再開の機能を実装します。2. Generator 関数は非同期プログラミングに使用でき、yield キーワードを使用して非同期操作の実行を一時停止し、非同期操作が完了するまで待ってから続行できます。Generator 関数を使用してイテレータを実装することもできます。イテレータは、yield キーワードを通じて値を返し、次の呼び出しで実行を継続できます。3. さらに、Generator 関数はパラメーターを受け入れることもできます。このパラメーターは、Generator 関数を呼び出すときに渡すことができ、これらのパラメーターは関数内で使用できます。4. つまり、ジェネレーター関数は、非同期プログラミングやイテレーターなどの関数の実装に使用できる非常に強力なツールであり、コードの作成とメンテナンスを大幅に簡素化できます。

26. ブラウザのイベントループとnodeJsのイベントループの違いについて教えてください。

ブラウザイベントループと Node.js イベントループの間には、次のようないくつかの違いがあります。 1. ブラウザイベントループはシングルスレッドですが、Node.js イベントループはマルチスレッドです。2. ブラウザーのイベントループのタスクはマクロタスクとマイクロタスクに分割されますが、Node.js イベントループにはマクロタスクのみがあります。3. ブラウザーイベントループのマイクロタスクには Promise、MutationObserver、process.nextTick が含まれますが、Node.js イベントループには process.nextTick はありませんが、setImmediate があります。4. ブラウザーイベントループのマクロタスクには、スクリプト、setTimeout、setInterval、I/O、UI レンダリングなどが含まれますが、Node.js イベントループのマクロタスクには、I/O、タイマー、setImmediate などが含まれます。5. ブラウザーイベントループのタスク実行シーケンスは、最初にすべてのマイクロタスクを実行し、次にマクロタスクを実行します。一方、Node.js イベントループのタスク実行シーケンスは、最初にすべての I/O タスクとタイマータスクを実行します。次に、setImmediate タスクを実行します。一般に、ブラウザーのイベントループと Node.js のイベントループはどちらもイベント駆動型モデルに基づいていますが、実装方法とタスクの実行シーケンスが異なります。

27. ブラウザのキャッシュメカニズムについての理解について教えてください。

ブラウザーのキャッシュメカニズムとは、ブラウザーが Web ページにアクセスすると、一部の静的リソース (画像、CSS、JS など) をローカルにキャッシュし、次回同じ Web ページにアクセスしたときに直接キャッシュできることを意味します。ローカルキャッシュから読み取られるため、Web ページのパフォーマンスが向上し、読み込み速度とユーザーエクスペリエンスが向上します。1. ブラウザのキャッシュメカニズムには、強力なキャッシュとネゴシエーションキャッシュの 2 種類があります。2. 強力なキャッシュとは、ブラウザが初めてリソースをリクエストしたときに、リソースの有効期限 (Expires) または最大キャッシュ時間 (Cache-Control) をローカルに保存し、次回リクエストしたときに保存することを意味します。まず、ローカルキャッシュの有効期限が切れているかどうかを確認し、有効期限が切れていない場合は、サーバーにリクエストを送信せずに、リソースがローカルキャッシュから直接読み取られます。3. ネゴシエーションキャッシュとは、ブラウザが初めてリソースをリクエストしたときに、リソース識別子 (ETag または Last-Modified) をローカルに保存し、次のリクエストのためにサーバーにリクエストを送信し、サーバーが判断することを意味します。リソース識別子に従ってリソースを更新します。更新の有無にかかわらず、更新がない場合は 304 ステータスコードが返され、ブラウザはローカルキャッシュからリソースを直接読み取ります。4. ブラウザーのキャッシュメカニズムは、ネットワークリクエストを効果的に削減し、Web ページの読み込み速度とユーザーエクスペリエンスを向上させますが、リソースの更新が間に合わなくなる可能性もあります。問題を回避するには、開発中にキャッシュメカニズムを合理的に使用する必要があります。

28. ブラウザカーネルについてのあなたの理解について教えてください。

ブラウザカーネルは、レンダリングエンジンと JS エンジンの 2 つの部分に分けることができます。 1. レンダリングエンジン: Web ページのコンテンツ (HTML、XML、画像など) の取得、情報の整理 (CSS の追加など)、ウェブページの表示モードを計算し、モニターまたはプリンターに出力します。ブラウザカーネルが異なれば、Web ページの文法解釈も異なるため、レンダリング効果も異なります。したがって、適切なブラウザカーネルを選択することは、ブラウザのパフォーマンスとユーザーエクスペリエンスにとって非常に重要です。

29. Vue のレスポンシブ原則についてのあなたの理解を教えてください。

Vue の応答性の原則は、データハイジャックによって実現されます。Vue インスタンスが作成されると、Vue はそのすべてのデータを監視し、データが変更されると、Vue はビューを自動的に更新します。具体的な実装方法は次のとおりです。 1. Vue はインスタンス化中にデータオブジェクトをトラバースし、各プロパティをゲッター/セッターに変換します。これにより、プロパティがいつアクセスまたは変更されるかを Vue が監視できるようになります。2. データが変更されると、Vue は setter メソッドを通じて変更を監視し、データに依存するすべてのコンポーネントに更新するよう通知します。3. Vue は Dep クラスを使用してすべての依存関係を管理します。各データは Dep インスタンスに対応します。データが変更されると、Dep は更新するデータに依存するすべての Watcher インスタンスに通知します。4. Watcher インスタンスは Vue の重要な概念であり、コンポーネントがレンダリングされるときに作成され、データが変更されたときに更新するように通知されます。各 Watcher インスタンスは Dep インスタンスに関連付けられており、データが変更されると、Dep は関連付けられているすべての Watcher インスタンスに更新するように通知します。一般に、Vue の応答性の原則は、データハイジャック、Dep クラス、および Watcher インスタンスによって実現され、データの変更を自動的に監視し、ビューを更新できるため、開発プロセスが大幅に簡素化されます。

30. メソッド watch computed の違いは何ですか?

1. Vue.js ではデータ変更を監視するために Methods と watch の両方が使用されます 2. Methods は Vue.js のオプションであり、コンポーネント内のメソッドを定義するために使用されます。パラメーターを受け入れ、いくつかの操作を実行し、結果を返すことができます。コンポーネント内のデータが変更された場合、一部のデータを再計算する必要がある場合は、メソッド内で再計算して結果を返す必要があります。3. Watch は Vue.js の特別なオプションで、データの変更を監視し、一部の操作を実行するために使用されます。1 つ以上のデータの変更を監視し、データが変更されたときに指定されたコールバック関数を実行できます。データ変更時に非同期操作や複雑な計算を実行する必要がある場合は、watch を使用する必要があります。4. 違いは次のとおりです。 1. メソッドは、パラメータを受け入れ、一部の操作を実行し、結果を返すことができるコンポーネント内のメソッドを定義するために使用されます。また、watch はデータの変更を監視し、一部の操作を実行するために使用されますが、パラメーターを受け取ったり、結果を返したりすることはできません。2. メソッドは通常、属性の計算やイベントの処理などの単純な操作に使用されますが、ウォッチは通常、複雑な非同期操作や計算を処理する場合、または複数のデータ変更を監視する必要がある場合に使用されます。

Computed は Vue.js の計算属性であり、テンプレート内で呼び出すこともできますが、その実装はメソッドとは異なります。計算は依存関係のキャッシュに基づいています。つまり、依存データが変更された場合にのみ再計算されます。依存データが変更されていない場合、Computed はキャッシュ内の結果を直接返すため、パフォーマンスが向上します。

31. Virtual DOM についてのあなたの理解について教えてください。

仮想 DOM は、Web アプリケーションのパフォーマンスを最適化するために使用されるテクノロジーです。これは、実際の DOM の階層とプロパティをシミュレートする軽量の JavaScript オブジェクトであり、実際の DOM を直接操作する代わりにメモリ内で動作できます。仮想DOMが変更されると、実際のDOMと比較し、更新が必要な部分のみを更新するため、DOM操作の回数が減り、アプリケーションのパフォーマンスが向上します。Virtual DOM の利点は次のとおりです。 1. アプリケーションのパフォーマンスの向上: Virtual DOM は更新が必要な部分のみを更新するため、DOM 操作の数が減り、アプリケーションのパフォーマンスが向上します。2. アプリケーション開発の簡素化: 仮想 DOM はメモリ内で動作できるため、アプリケーションの開発とテストをより簡単に実行できます。3. アプリケーションの保守性の向上: Virtual DOM によりアプリケーションの開発とテストが容易になるため、アプリケーションの保守性が向上します。結論として、Virtual DOM は、Web アプリケーションのパフォーマンスと保守性の向上に役立つ非常に便利なテクノロジーです。

32. nextTick の理解と機能について教えてください。

1. nextTick は Vue.js の非同期メソッドであり、その機能は、次の DOM 更新サイクルが終了した後に、指定されたコールバック関数を実行することです。nextTick の主な機能は、データの更新直後に DOM 要素のサイズや位置を取得するなど、Vue.js が DOM を更新した直後にいくつかの操作を実行することです。2. nextTick の実装原理は、JavaScript のイベントループ機構を使用することです。Vue.js が DOM を更新すると、すべての DOM 更新操作がキューに入れられ、次のイベントループが実行されるまで待機します。nextTick メソッドは、指定されたコールバック関数をこのキューに入れ、次のイベントサイクルの実行を待ちます。3. NextTick は幅広い利用シーンがあり、例えば Vue.js の $nextTick メソッドを使用すると、DOM 要素のサイズや位置の取得など、DOM 更新直後に一部の操作を実行できます。さらに、Vue.js の nextTick メソッドを使用すると、データが更新された直後に更新されたデータを取得するなど、一部の非同期データ更新の問題も解決できます。4. つまり、nextTick は Vue.js の非常に重要な非同期メソッドであり、DOM が更新された直後にいくつかの操作を実行するのに役立ち、それによってアプリケーションのパフォーマンスとユーザーエクスペリエンスが向上します。

33. Webpack についてのあなたの理解について教えてください。

Webpack は、最新の JavaScript アプリケーションパッケージ化ツールです。複数の JavaScript ファイル、CSS ファイル、画像、その他の静的リソースを 1 つ以上のバンドルファイルにパッケージ化して、ブラウザーで簡単にロードして使用できます。

Webpack の主な機能は次のとおりです。 1. モジュール管理: Webpack は CommonJS、AMD、ES6 およびその他のモジュール仕様をサポートし、複数のモジュールを 1 つのファイルにパッケージ化できるため、HTTP リクエストの数が減り、ページの読み込み速度が向上します。2. コード変換: Webpack は、ES6、TypeScript、CoffeeScript などの高級言語をブラウザが認識できる JavaScript コードに変換できます。3. コード分割: Webpack は、アプリケーションを複数のチャンクに分割して、オンデマンド読み込みを実現し、ページ読み込み速度を向上させることができます。4. リソース管理: Webpack は、CSS、画像、フォントなどの静的リソースを処理し、それらを 1 つ以上のファイルにパッケージ化し、圧縮や最適化などの操作を実行できます。5. プラグインシステム: Webpack は、コード圧縮、ファイルコピー、HTML 生成などのさまざまな自動操作を実現できる豊富なプラグインシステムを提供します。つまり、Webpack は、開発者が JavaScript アプリケーションをより適切に管理およびパッケージ化し、開発効率とユーザーエクスペリエンスを向上させるのに役立つ非常に強力なツールです。

34. GET と POST の違いについて話しますか?

1. GET と POST は、HTTP プロトコルで一般的に使用される 2 つのリクエストメソッドです。 2. 相違点: 1. GET リクエストメソッドはリソースの取得に使用され、POST リクエストメソッドはデータの送信に使用されます。2. GET リクエストメソッドのデータは疑問符「?」で区切って URL に追加され、パラメータは「&」記号で区切られます。一方、POST リクエストメソッドのデータは URL に含まれます。リクエストの本文。3. GET リクエストメソッドのデータ送信量は通常 2KB 以下と小さいのに対し、POST リクエストメソッドのデータ送信量は比較的大きく、任意のサイズのデータを送信できます。4. GET リクエストメソッドのデータはキャッシュ、ブックマーク、ブラウザ履歴に記録できますが、POST リクエストメソッドのデータはキャッシュ、ブックマーク、記録されません。ブラウザ履歴記録レコードにあります。5. GET リクエストメソッドは URL 内にデータが公開されるためセキュリティが低く、傍受や改ざんが容易ですが、POST リクエストメソッドはデータが公開されないためセキュリティが高くなります。 URL 内では、リクエスト本文のデータのみが傍受および改ざんされる可能性があります。

35. HTTP と HTTPS の違いについて話します。HTTPS の暗号化原理は何ですか?

1. HTTPはハイパーテキスト転送プロトコルであり、データを送信するためのプロトコルであり、平文で送信されるため、データの盗聴や改ざんが容易です。2. HTTPS は、HTTP に基づいて SSL/TLS プロトコルを追加し、暗号化および認証テクノロジーによってデータのセキュリティを確保します。HTTPS では暗号化された送信が使用され、データの機密性と整合性を確保するためにデータ送信中に暗号化が実行されます。3. 具体的には、HTTPS はデータを送信する前に SSL/TLS ハンドシェイクを実行し、安全なチャネルを確立してからデータを送信します。SSL/TLS プロトコルでは、非対称暗号化と対称暗号化の 2 つの暗号化方式が使用され、非対称暗号化は安全なチャネルの確立に使用され、対称暗号化はデータ送信の暗号化に使用されます。4. SSL/TLS ハンドシェイクプロセス中に、サーバーは独自の公開キーをクライアントに送信します。クライアントは公開キーを使用して乱数を暗号化し、それをサーバーに送信します。サーバーは独自の秘密キーを使用して、乱数を復号化し、この乱数を使用して、暗号化されたデータ送信用の対称キーを生成します。5. HTTPSはHTTPに比べてセキュリティや機密性が高く、銀行やECサイトなど、ユーザーのプライバシーや機密情報を保護する必要があるWebサイトに適しています。

36. TCP ではなぜ 3 回のハンドシェイクが必要ですか?

TCP プロトコルでは、主に通信の双方が正常にデータを送受信できることを保証するために、接続を確立するために 3 ウェイハンドシェイクが必要です。具体的な理由は次のとおりです。 1. 最初のハンドシェイク: クライアントは接続要求セグメントをサーバーに送信し、サーバーは要求を受信した後、クライアントの要求が受信されたことを示す確認セグメントで応答します。2. 2 回目のハンドシェイク: クライアントのリクエストを受信した後、サーバーは確認メッセージセグメントをクライアントに送信し、クライアントのリクエストを受信し、クライアントと通信する準備ができていることを示します。3. 3 回目のハンドシェイク: サーバーから確認セグメントを受信した後、クライアントはサーバーに確認セグメントを送信し、サーバーから確認を受信し、サーバーと通信する準備ができていることを示します。4. スリーウェイハンドシェイクにより、通信の双方が正常にデータを送受信できるようになり、ネットワーク遅延やパケット損失による接続障害やデータ送信エラーを回避できます。同時に、3 ウェイハンドシェイクは、ネットワーク内の悪意のある攻撃や誤った情報によって引き起こされるセキュリティ上の問題を防ぐこともできます。

37. Proxy代理の原理について教えてください。

プロキシは、クライアントとサーバーの間の仲介者として機能する Web アプリケーションです。その原理は、クライアントとサーバーの間にプロキシサーバーを確立することです。クライアントはプロキシサーバーにリクエストを送信し、プロキシサーバーはそのリクエストをサーバーに転送します。サーバーが応答した後、結果がプロキシサーバーに返されます。そしてプロキシサーバーは結果をプロキシサーバークライアントに返します。

プロキシのワークフローは次のとおりです。 1. クライアントはプロキシサーバーにリクエストを送信します。2. プロキシサーバーはリクエストを受信し、サーバーにリクエストを転送します。3. サーバーはリクエストに応答し、結果をプロキシサーバーに返します。4. プロキシサーバーは結果を受信し、結果をクライアントに返します。

プロキシエージェントの役割には主に次のような側面があります。 1. アクセス速度の向上: プロキシサーバーはリクエストの結果をキャッシュし、次回同じリクエストが行われたときにキャッシュされた結果を直接返すため、アクセス速度が向上します。。2. アクセス制御: プロキシサーバーは、特定の Web サイトへのアクセスを制限したり、特定のクライアントのアクセスを制限したりするなど、クライアントのリクエストをフィルタリングおよび制御できます。3. クライアント情報の非表示: プロキシサーバーはクライアントの実際の IP アドレスを非表示にすることができるため、クライアントのプライバシーが保護されます。4. 負荷分散: プロキシサーバーは、要求を複数のサーバーに分散して負荷分散を実現し、サーバーのパフォーマンスと信頼性を向上させることができます。つまり、プロキシプロキシは、アクセス速度の向上、プライバシーの保護、負荷分散などの機能を実現できる非常に便利なネットワークアプリケーションです。

38. メモリリークの理解について話しますか? メモリリークはどのような状況で発生しますか?

メモリリークとは、プログラムの実行中に要求されたメモリ領域が正しく解放されず、システム内の利用可能なメモリが継続的に減少し、最終的にはプログラムのクラッシュやシステムのクラッシュにつながる現象を指します。メモリリークは通常、動的に割り当てられたメモリを解放しない、メモリを繰り返し解放する、すでに解放されたメモリを使用するなど、プログラム内の何らかの間違ったメモリ管理操作が原因で発生します。

メモリリークにはいくつかの種類があります。 1. メモリが動的に割り当てられた後に解放されない: プログラムは動作中に動的に割り当てられたメモリを使用しますが、使用後に解放されないため、メモリリークが発生します。2. 循環参照: 2 つ以上のオブジェクトが相互に参照する場合、オブジェクト間の参照関係が正しく処理されないと、メモリリークが発生します。3. ファイルが閉じられていない: プログラムがファイルを使用するときに、ファイルが適切に閉じられていないと、メモリリークが発生します。4. キャッシュがクリアされていない: プログラムがキャッシュを使用するときに、キャッシュが正しくクリーンアップされていないと、メモリリークが発生します。5. プログラムエラー: すでに解放されたメモリを使用したり、繰り返しメモリを解放したりするなど、プログラム内にいくつかの間違ったメモリ管理操作があり、メモリリークが発生します。

メモリリークはプログラムの実行速度を低下させ、場合によってはプログラムのクラッシュやシステムのクラッシュを引き起こすため、プログラム開発ではメモリ管理に注意を払い、未使用のメモリ領域を適時に解放する必要があります。

3週目

39. アロー関数と通常の関数の違いについて教えてください。

アロー関数と通常の関数の主な違いは次のとおりです。 1. アロー関数は独自の this を持たず、this は外側のスコープから継承されます。通常の関数の this は、関数の呼び出し時に動的にバインドされ、その値は関数の呼び出し方法に依存します。2. アロー関数は引数オブジェクトを使用できません。また、new キーワードを使用して呼び出すこともできません。通常の関数は、引数オブジェクトを使用することも、new キーワードを使用して呼び出すこともできます。3. アロー関数にはプロトタイプ属性がないため、コンストラクタとして使用できません。通常の関数をコンストラクターとして使用して、新しいオブジェクトインスタンスを作成できます。4. アロー関数の構文はより簡潔になり、関数本体内の return キーワードと中括弧は省略できます。通常の関数は値を返すために return キーワードを使用する必要があり、関数本体は中括弧で囲む必要があります。5. 一般に、アロー関数は単純な関数に適しており、コードがより簡潔で読みやすくなります。通常の機能はより柔軟で、さまざまなシナリオに対応できます。

40. SPAの最初の画面の読み込み速度が遅いのを解決するにはどうすればよいですか?

コードの最適化: コード内に冗長なコード、繰り返しコード、または不要なコードがないか確認し、コードの量を可能な限り削減し、コード構造とアルゴリズムを最適化してページの読み込み速度を向上させます。

画像の最適化: 画像が大きすぎる場合は、画像圧縮ツールを使用して画像を圧縮し、画像のサイズを小さくすることで、ページの読み込み速度を向上させることができます。

遅延読み込み: ページ上の写真やビデオなどのリソースについては、遅延読み込みテクノロジーを使用して、ユーザーが対応する位置までスクロールした場合にのみ読み込むことができるため、最初の画面の読み込み時間を短縮できます。

CDN アクセラレーション: CDN (コンテンツ配信ネットワーク) アクセラレーションサービスを使用して、静的リソースを世界中のサーバーに分散し、ページの読み込み速度を向上させます。

キャッシュの最適化: ブラウザーのキャッシュテクノロジーを使用して、ページ内の静的リソースをローカルにキャッシュし、次回の訪問時にキャッシュから直接読み取ることで、サーバーリクエストが削減され、ページの読み込み速度が向上します。

サーバーの最適化: サーバーの応答が遅い場合は、より高度に構成されたサーバーの使用を検討するか、負荷分散テクノロジを使用してリクエストを複数のサーバーに分散することで、ページの読み込み速度を向上させることができます。

41. Webpack の一般的なローダーについて話しますか? それはどのような問題を解決しましたか?

babel-loader: ES6/ES7/JSX およびその他の構文を ES5 構文に変換し、ブラウザーの互換性の問題を解決します。

css-loader: CSS ファイルを解析し、@import や url() などの依存関係を処理して、CSS ファイルを JS ファイルにパッケージ化できるようにします。

style-loader: CSS コードを HTML ページの <style> タグに挿入して、スタイルを有効にします。

file-loader: ファイルを出力ディレクトリにコピーし、ファイルパスを返すことで、ファイルパスの問題が解決されます。

url-loader: file-loader に似ていますが、指定されたサイズより小さいファイルを Base64 エンコードに変換して、HTTP リクエストを減らし、ページの読み込み速度を向上させることができます。

image-loader: 画像ファイルをロードして圧縮し、画像のロードが遅いという問題を解決します。

json-loader: JSON ファイルをロードし、JSON ファイル使用時の手動解析の問題を解決します。

xml-loader: XML ファイルをロードし、XML ファイル使用時の手動解析の問題を解決します。これらのローダーは、ブラウザーの互換性、ファイルパス、スタイルインジェクション、画像の読み込み速度などのさまざまな問題を解決するため、Webpack はさまざまな種類のファイルを処理して 1 つ以上の JS ファイルにパッケージ化できるため、アプリケーションプログラムのパフォーマンスが向上し、メンテナンス性。

42. SPA シングルページについてどのように理解していますか?その利点と欠点は何ですか? SPAアプリケーションをどのように実現するか？

SPA シングルページアプリケーションとは、アプリケーション全体が 1 ページのみであり、すべてのページコンテンツはデータを非同期にロードし、ページを動的に更新することによって実現されることを意味します。SPA アプリケーションは通常、フロントエンドフレームワーク (React、Angular、Vue など) を使用して実装されます。利点: 1. 優れたユーザーエクスペリエンス: SPA アプリケーションは、更新せずにページを切り替えることができ、ユーザーエクスペリエンスがよりスムーズになります。2. フロントエンドとバックエンドの分離: SPA アプリケーションはフロントエンドとバックエンドを分離でき、フロントエンドはページ表示と対話ロジックのみに重点を置き、バックエンドは API を提供するだけで済みます。インターフェース。3. パフォーマンスの向上: SPA アプリケーションは、ページの更新を減らし、サーバーの負荷を軽減し、パフォーマンスを向上させることができます。欠点: 1. 最初の画面の読み込みが遅い: SPA アプリケーションはすべてのフロントエンドコードとデータをロードする必要があり、最初の画面の読み込み時間が長くなります。2. SEO に優しくない: SPA アプリケーションにはページが 1 つしかないため、検索エンジンがページのコンテンツをクロールするのが難しく、SEO に優しくありません。3. ブラウザの互換性の問題: SPA アプリケーションは HTML5 のいくつかの新機能を使用する必要があり、ブラウザの互換性については高い要件があります。SPA アプリケーションを実装する方法: 1. フロントエンドフレームワークを使用する: React、Angular、Vue などのフロントエンドフレームワークを使用して、SPA アプリケーションを迅速に実装します。2. ルーティングライブラリを使用する: React Router や Vue Router などのルーティングライブラリを使用して、ページ更新の切り替えを実現します。3. AJAX テクノロジを使用する: AJAX テクノロジを使用すると、データを非同期にロードし、ページコンテンツを動的に更新できます。

43. Vue のコンポーネントとプラグインの違いは何ですか?

Vue のコンポーネントとプラグインの違いは次のとおりです。 1. コンポーネントは Vue の基本概念であり、Vue アプリケーションで再利用可能なコードブロックであり、UI コンポーネントまたはビジネスロジックをカプセル化するために使用されます。コンポーネントは Vue アプリケーション内で複数回使用でき、親コンポーネントから渡されたデータを受信したり、親コンポーネントにデータを送信したりできます。2. プラグインは Vue の拡張機能であり、Vue アプリケーションの機能を拡張するために使用されるオプションの機能モジュールです。プラグインは、グローバルメソッドまたはプロパティ、グローバルディレクティブまたはフィルター、および Vue インスタンスメソッドまたはミックスインを追加できます。3. コンポーネントとプラグインは異なる方法で使用されます。コンポーネントは、使用する前に Vue アプリケーションに登録する必要があります。コンポーネントは、Vue.component() メソッドまたは Vue.extend() メソッドを通じて登録できます。プラグインは、Vue.use() メソッドを通じてインストールすることも、Vue インスタンスで直接使用することもできます。4. コンポーネントとプラグインには異なるスコープがあります。コンポーネントは主に UI コンポーネントまたはビジネスロジックをカプセル化するために使用され、アクションの範囲は通常ローカルであり、特定のコンポーネント内でのみ使用されます。プラグインは主に Vue アプリケーションの機能を強化するために使用され、その作用範囲は通常グローバルであり、Vue アプリケーション全体で使用できます。

44. Vue コンポーネント間の通信方法は何ですか?

Vue コンポーネント間の通信方法は次のとおりです。 1. 親子コンポーネント通信: 親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントはイベントを通じて親コンポーネントにデータを渡します。2. 兄弟コンポーネントの通信: 共通の親コンポーネントを仲介として、データを兄弟コンポーネントに渡すことができます。3. クロスレベルコンポーネント通信: Provide/inject を使用してデータを下方向に渡すか、$parent/$root を使用して親コンポーネントを上方向に検索できます。4. 非親子コンポーネント間の通信: イベントバス (イベントバス) または Vuex を使用して、非親子コンポーネント間の通信を実現できます。イベントバスは、イベントを起動してリッスンするために使用できる空の Vue インスタンスです。Vuex は、データを一元管理し、コンポーネント間の状態共有を実現できる状態管理ライブラリです。

45. vueの差分アルゴリズムをご存知ですか？教えて？

Vue の差分アルゴリズムは効率的な仮想 DOM 比較アルゴリズムであり、前後の 2 つの仮想 DOM ツリーの差分を計算し、その差分を実際の DOM に適用して DOM 操作を最小限に抑えるために使用されます。Vue の差分アルゴリズムは両端比較戦略を採用しています。つまり、比較の回数をできる限り減らすために、古い仮想 DOM ツリーと新しい仮想 DOM ツリーの先頭と末尾から同時に比較を開始します。具体的には、Vue の差分アルゴリズムは次のステップに分かれています: 1. まず、古い仮想 DOM ツリーと新しい仮想 DOM ツリーのルートノードを比較します。ノードタイプが異なる場合は、ノード全体を直接置き換えます。ノードタイプが同じ場合は、次の手順に進みます。比較の次のステップに進みます。2. ノードの属性とイベントを比較し、変更があればノードの属性とイベントを更新します。3. ノードの子ノードを比較します。子ノードの数が異なる場合は、ノード全体の子ノードを直接置き換えます。子ノードの数が同じ場合は、次の比較ステップに進みます。4. 同じ位置にある子ノードについては、すべての子ノードが比較されるまで上記の手順を再帰的に実行します。5. 新しい仮想 DOM ツリーの冗長ノードについては実 DOM に直接追加し、古い仮想 DOM ツリーの冗長ノードについては実 DOM から直接削除します。上記の手順により、Vue の差分アルゴリズムは前後の 2 つの仮想 DOM ツリーの差分を効率的に計算し、その差分を実際の DOM に適用して DOM 操作を最小限に抑えることができます。

46. Virtual Domについて簡単に説明してください。

1. Virtual Dom は、ページの状態を仮想 DOM ツリーに抽象化するテクノロジーです。ReactやVueなどのフロントエンドフレームワークの中核技術の1つです。2. Virtual Dom の動作原理は、ページの状態が変化すると、フレームワークがまず新しい状態を新しい仮想 DOM ツリーに変換し、次に新しい仮想 DOM ツリーと古い仮想 DOM ツリーを比較して、両者の違いを調べ、最終的には更新が必要な部分のみを更新することで、不必要な DOM 操作が回避され、ページのパフォーマンスが向上します。3. Virtual Dom を使用する利点は、開発者がページの特定の実装の詳細を気にせずに、ページの状態管理に集中できることです。同時に、Virtual Dom は DOM 操作を減らすことができるため、ページのパフォーマンスと応答性を向上させることができます。

47. Vue3.0で使用されるComposition APIとVue2.xで使用されるOptions APIの違いは何ですか?

Vue3.0 で使用される Comboposition API は、Vue2.x で使用される Options Api とは次の点で異なります。 1. コードを編成する方法が異なります。Composition Api は関数ベースであるのに対し、Options Api はオブジェクトベースです。2. 強力な再利用性: コンポジション API はロジックの再利用をより適切に実現し、ロジックコードを関数にカプセル化して複数のコンポーネントでの再利用を容易にします。3. 型推論の向上: コンポジション API は、より多くの型推論を使用するため、TypeScript をより適切にサポートできます。4. コードの可読性の向上: コンポジション API はコードをより適切に整理し、コードをより明確で読みやすくし、オプション API での混乱と重複を減らすことができます。5. 応答性の向上：Composition API の reactive と ref は、応答性の高いデータをより適切に処理できるようになり、コードがより簡潔で理解しやすくなります。つまり、Composition API にはコードの編成、再利用性、型推論、コードの可読性、応答性において大きな利点があり、開発者が高品質の Vue アプリケーションを構築するのに役立ちます。

48. React の setState 実行メカニズムについて話しますか?

React では、setState はコンポーネントの状態を更新するために使用されるメソッドです。setState メソッドが呼び出されると、React は新しい状態オブジェクトを現在の状態オブジェクトにマージし、コンポーネントを再レンダリングします。具体的な実行メカニズムは次のとおりです。 1. setState メソッドを呼び出すと、React は新しい状態オブジェクトを更新キューに追加します。2. setState メソッドが同じイベントループ内で複数回呼び出された場合、React はこれらの更新を 1 つの更新に結合し、1 つの更新操作のみを実行します。3. setState メソッドがコンポーネントのライフサイクル関数およびイベントハンドラーで呼び出されると、React は更新をキューに追加し、現在のイベントループが終了した後に更新操作を実行します。4. setState メソッドが非同期操作で呼び出されると、React は更新をキューに追加し、次のイベントループで更新操作を実行します。5. 更新操作が実行される前に、React は更新キューを最適化し、重複した更新と無効な更新を削除してパフォーマンスを向上させます。要約すると、React の setState メソッドは、更新をキューに追加し、適切なタイミングで更新操作を実行する非同期操作です。setState メソッドを使用する場合は、コンポーネントのパフォーマンスを向上させるために、無限ループや不必要な更新を避けるように注意する必要があります。

49. React のクラスコンポーネントと関数コンポーネントの理解について話しますか? 違いは何ですか?

1. クラスコンポーネントと関数コンポーネントはどちらもコンポーネントを定義する方法です。2. クラスコンポーネントは、ES6 のクラス構文を使用して定義され、React.Component クラスを継承する必要があり、コンポーネントの jsx を返すための render メソッドを実装する必要があります。クラスコンポーネントは、状態メソッドとライフサイクルメソッドを使用して、コンポーネントの状態と動作を管理できます。コンポーネント 3. 機能コンポーネントは関数を使用して定義されます。必要なのは JSX を返すことだけです。機能コンポーネントは状態メソッドとライフサイクルメソッドを使用できませんが、React Hook を使用してコンポーネントの状態と動作を管理できます。相違点: 1. 文法: クラスコンポーネントクラス構文を使用し、関数コンポーネントは関数構文を使用します。2. 状態管理: クラスコンポーネントは状態を使用してコンポーネントの状態を管理できますが、関数コンポーネントは React Hook を使用して状態を管理する必要があります。3. ライフサイクル: クラスコンポーネントには、componentDidMount() やcomponentWillUnmount() などのライフサイクルメソッドがありますが、関数コンポーネントにはライフサイクルメソッドがありません。4. パフォーマンス: 機能コンポーネントは、React.Component クラスを継承して render() メソッドを実装する必要がないため、通常、クラスコンポーネントよりも軽量です。ただし、状態と動作を管理する必要がある場合、機能コンポーネントは React Hook を使用する必要がある場合があり、これがパフォーマンスに影響を与える可能性があります。

50. React Hooks についてのあなたの理解について教えてください。それはどのような問題を解決しましたか?

React Hooks は React 16.8 で導入された新機能で、クラスを作成せずに状態やその他の React 機能を使用できるようにします。React Hooks は次の問題を解決します。 1. コンポーネント間で状態ロジックを再利用するのは困難です。React Hooks は、カスタムフックと呼ばれる状態ロジックを共有する方法を提供します。2. 複雑なコンポーネントを理解することが難しくなります。React Hooks は、コンポーネントを小さな関数に分割し、それぞれが特定の機能に焦点を当てることができます。3. クラスコンポーネントのライフサイクルメソッドと状態ロジックの間の関係は直感的ではありません。React Hooks はライフサイクルメソッドと状態ロジックを分離できるため、コードの理解と保守が容易になります。4. Class コンポーネントの this バインディングの問題。React Hooks の機能コンポーネントにはこのバインディングの問題がないため、コードがより簡潔になり、保守が容易になります。要約すると、React Hooks は React コンポーネントを作成するためのよりシンプルかつ直感的な方法を提供し、コードの理解と保守を容易にします。

51. UseMemo と useCallback はどのようにパフォーマンスを向上させますか?また、アプリケーションシナリオは何ですか?

UseMemo と useCallback の両方を使用して、React コンポーネントのパフォーマンスを最適化できます。UseMemo は計算結果をキャッシュして計算の繰り返しを避けることができるため、コンポーネントのレンダリングパフォーマンスが向上します。その適用シナリオは次のとおりです。 1. API からデータを取得して複雑な計算を実行するなど、計算コストが高い値。2. サブコンポーネントのレンダリングを最適化して、不必要なレンダリングを回避します。3. レンダリングするたびに新しいオブジェクトや配列を作成しないようにします。UseCallback は関数をキャッシュして、レンダリングされるたびに新しい関数を作成することを回避できるため、コンポーネントのレンダリングパフォーマンスが向上します。その適用シナリオは次のとおりです。 1. 関数を props としてサブコンポーネントに渡すときに、サブコンポーネントの不必要なレンダリングを回避します。2. useEffectを使用する場合、関数参照の変更によるuseEffectの繰り返し実行を避けてください。3. useMemoを使用する場合、関数参照の変更によるuseMemoの二重計算を避けてください。

52. Vue-routerの実装原理は何ですか?

Vue-routerは、Vue.jsが公式に提供しているルーティング管理プラグインです。その実装原理には主に以下の側面が含まれます。 1. Vue.js のコンポーネント開発の考え方に基づいて、ルーティングルールがコンポーネントに抽象化され、コンポーネントのネストと切り替えを通じてページジャンプとリフレッシュが実現されます。2. HTML5 History API を使用して、pushState メソッドと replaceState メソッドを通じてブラウザの URL アドレスを変更し、フロントエンドルートのジャンプとリフレッシュを実現します。3. Vue.js の応答性の高いデータバインディングメカニズムを使用して、ルーティング情報を Vue インスタンスの data 属性に保存し、ウォッチを通じてルーティングの変更を監視して、ルーティングの動的な更新と応答を実現します。4. beforeRouteEnter、beforeRouteUpdate、beforeRouteLeaveなどのVue.jsのライフサイクルフック機能を使用してルートのインターセプトと制御を実装し、ルート権限管理とページの動的ロードを実現します。つまり、Vue-router の実装原理は、Vue.js のコンポーネント開発アイデアとレスポンシブデータバインディングメカニズムに基づいており、HTML5 History API と Vue.js ライフサイクルフック機能を使用してフロントエンドルーティングジャンプを実現します。、リフレッシュ、インターセプト、コントロール。

53. コンポーネントをパッケージ化して、異なるプロジェクト間で使用するにはどうすればよいですか?

さまざまなプロジェクトで使用するコンポーネントをパッケージ化するには、次の手順に従います。 1. パッケージ化するすべてのコンポーネントを含む別個のコンポーネントライブラリプロジェクトを作成します。2. コンポーネントライブラリプロジェクトで、コンポーネントごとに個別のフォルダーを作成し、そのフォルダーにコンポーネントのすべてのコードとスタイルを含めます。3. 各コンポーネントフォルダーで、index.jsコンポーネントクラス、スタイル、その他の依存関係など、コンポーネントに必要なすべてのコンテンツをエクスポートするファイルを作成します。4. コンポーネントライブラリプロジェクトで、webpack などのパッケージ化ツールを使用して、すべてのコンポーネントを 1 つの JavaScript ファイルにパッケージ化します。5. コンポーネントライブラリプロジェクトを npm または他のパッケージマネージャーに公開して、他のプロジェクトが使用できるようにします。6. 他のプロジェクトでは、npm installコマンドを使用してコンポーネントライブラリをインストールします。7. コンポーネントを使用する必要があるファイルに、必要なコンポーネントをインポートして使用します。

54. vue、react、angular の違いは何ですか?

Vue、React、Angular はすべて、シングルページアプリケーション (SPA) および動的 Web アプリケーションを構築するための最新の JavaScript フレームワークです。それらの違いは次のとおりです。 1. Vue.js は軽量のフレームワークで、学習と使用が簡単で、小規模なプロジェクトに適しています。React.js は、大規模なプロジェクトに適した、より高い柔軟性とカスタマイズ性を提供するライブラリです。Angular は、大規模なエンタープライズレベルのプロジェクトに適した、多くの機能とツールを提供する完全なフレームワークです。2. Vue.js のテンプレート構文は、よりシンプルかつ直感的で、理解と保守が簡単です。React.js は JSX 構文を使用するため、より多くの学習と理解が必要です。Angular は HTML と TypeScript を使用するため、より多くの学習と習熟が必要です。3. Vue.js は仮想 DOM と非同期レンダリングを使用するため、パフォーマンスが向上します。React.js も仮想 DOM を使用しますが、パフォーマンスを向上させるために手動で最適化する必要があります。Angular は、双方向のデータバインディングと大量の依存関係注入を使用するため、パフォーマンスが比較的劣ります。4. Vue.js と React.js はどちらもオープンソースであり、活発なコミュニティがあり、多数のプラグインやコンポーネントが利用可能です。Angular もオープンソースですが、その複雑さと学習曲線のため、コミュニティは比較的小規模です。

55. Redux についてのあなたの理解について教えてください。使い方？

Redux は、アプリケーションの状態の管理と更新に役立つ JavaScript 状態管理ライブラリです。Redux の中核概念はストアです。ストアは、アプリケーション全体の状態を含む JavaScript オブジェクトです。Redux はアクションとリデューサーを使用してストア内の状態を更新します。アプリケーションでイベントが発生すると、イベントの種類と関連データを記述するアクションオブジェクトを作成できます。次に、このアクションオブジェクトをリデューサー関数に渡します。リデューサー関数は、アクションの種類に応じてストア内の状態を更新します。Reducer 関数は、現在の状態とアクションオブジェクトをパラメータとして受け取り、新しい状態オブジェクトを返します。Redux の動作原理は、次の手順に要約できます。 1. アプリケーション全体の状態を含むストアオブジェクトを作成します。2. アプリケーション内のイベントを記述するアクションオブジェクトを定義します。3. アクションのタイプに基づいてストア内の状態を更新するリデューサー関数を作成します。4. アクションオブジェクトをリデューサー関数に渡すと、新しい状態オブジェクトが返されます。5. 新しい状態オブジェクトと一致するようにストア内の状態を更新します。6. アプリケーション内のストアの変更をサブスクライブして、状態が変化したときに UI を更新します。

Redux の利点は、アプリケーションの状態をより適切に整理および管理できるようになり、アプリケーションの予測可能性と保守性が向上することです。同時に、Redux は React などのフレームワークやライブラリと統合することもできるため、アプリケーションの状態を管理するために Redux を使用することが容易になります。

最初の週次試験 2205A

56. ボックスモデルについてのあなたの理解を教えてください。

ボックスモデルとは、Web ページの各要素を、4 つの境界線、内側のマージン、外側のマージン、およびコンテンツ領域で構成される長方形のボックスと見なすことを意味します。このモデルは、Web ページ内の要素のレイアウトとスタイルをよりよく理解し、制御するのに役立ちます。具体的には、ボックスモデルには次の部分が含まれます。 1. コンテンツ領域 (コンテンツ): テキスト、画像などの要素の実際のコンテンツ。2. パディング: コンテンツ領域と境界線の間の空白領域は、padding プロパティを設定することで制御できます。3. 境界線: コンテンツ領域とパディングを囲む線は、border プロパティを設定することで制御できます。4. マージン: 境界線と隣接する要素の間の空白スペースは、マージン属性を設定することで制御できます。実際のアプリケーションでは、ボックスモデルのさまざまなプロパティを設定することで、要素のサイズ、位置、境界線のスタイル、背景色などを制御できます。同時に、ボックスモデルは CSS レイアウトの基礎でもあり、ボックスモデルを合理的に使用することで、さまざまな複雑なレイアウト効果を実現できます。

57. CSSのセレクターとは何ですか? 優先順位はどれでしょうか？

CSS セレクターは次のとおりです。 1. 要素セレクター (要素セレクター): p、div、a などの要素名によって要素を選択します。2. クラスセレクター (クラスセレクター): .class など、「.」で始まるクラス名で要素を選択します。3. ID セレクター (ID セレクター): #id など、「#」で始まる ID によって要素を選択します。4. 属性セレクター (属性セレクター): [type="text"] など、要素の属性によって要素を選択します。5. 疑似クラスセレクター (疑似クラスセレクター): :hover、:active、:visited などの状態によって要素を選択します。6. 疑似要素セレクター (疑似要素セレクター): ::before、::after など、要素の特定の部分を選択するために使用されます。CSS セレクターの優先順位は、高いものから低いものまで次のとおりです。 1. !重要 2. インラインスタイル (スタイル属性) 3. ID セレクター 4. クラスセレクター、属性セレクター、疑似クラスセレクター 5. 要素セレクター、疑似 CSS プロパティ継承できる要素セレクターは次のとおりです。 1. フォントファミリープロパティ (font-family、font-size、font-weight など) 2. テキストファミリープロパティ (text-align、text-indent、text-decoration など) 3 . カラー属性 (color、background-color など) 4. リスト属性 (list-style-type、list-style-image など) 5. テーブルレイアウト属性 (border-collapse、border-spacing など) 6. その他の属性 (可視性、カーソルなど)

58. 要素を水平方向と垂直方向に中央揃えにする方法は何ですか? 要素の幅と高さが可変の場合はどうなるでしょうか?

要素を水平方向および垂直方向に中央揃えにする方法はいくつかあります: 1. flex レイアウトを使用します: 親要素を display: flex; に設定し、justify-content: center; および align-items: center; を設定して、水平方向および垂直方向の中央揃えを実現します。2. 絶対配置を使用します: 親要素を相対配置に設定し、子要素を絶対配置に設定し、top: 50%; および left: 50%; を設定してから、transform:translate(-50%, -50%) を使用します。 ; 水平および垂直のセンタリングを実現できます。3. テーブルレイアウトを使用します。親要素を表示: table; に設定し、子要素を表示: table-cell; に設定し、vertical-align: middle; および text-align: center; を設定して、水平方向と垂直方向の中央揃えを実現します。

要素の幅と高さが可変である場合は、次の方法を使用できます: 1. フレックスレイアウトを使用します: 親要素を表示: flex; に設定し、justify-content: center; および align-items: center; を設定します。子要素を flex: 1 に設定すると、水平方向と垂直方向の中央揃えを実現できます。2. 絶対配置を使用します: 親要素を相対配置に設定し、子要素を絶対配置に設定し、top: 50%; および left: 50%; を設定してから、transform:translate(-50%, -50%) を使用します。 ; および max-width: 100%; および max-height: 100%; により、水平方向と垂直方向の中央揃えを実現できます 3. テーブルレイアウトを使用します: 親要素を表示するように設定します: table;、子要素を表示するように設定します: table-cell;そして、vertical-align: middle; と text-align: center; を設定し、max-width: 100%; と max-height: 100%; を使用して、水平方向と垂直方向の中央揃えを実現します。

59. リフローと再描画を理解するには? どのような状況で発動するのでしょうか？

リフローと再ペイントは、ブラウザがページをレンダリングする際の 2 つの重要な概念です。リフローとは、ページ上の要素の位置とサイズが変更された場合、ブラウザが要素の位置とサイズを再計算し、ページ全体を再レイアウトする必要があることを意味します。このプロセスがリフローです。リフローによりページが再レンダリングされるため、パフォーマンスがさらに集中します。再描画とは、ページ上の要素のスタイル属性が変更されたときに、ブラウザが要素の位置やサイズを再計算せずに、これらの要素のスタイルを再描画するだけで済むことを意味します。このプロセスは再描画と呼ばれます。再描画はリフローよりも低コストです。

リフローと再描画は、次のシナリオでトリガーされます。 1. ページが初めて読み込まれるとき、ブラウザはリフローと再描画を行う必要があります。2. ページ内の要素の位置、サイズ、コンテンツ、その他の属性が変更されると、リフローと再描画がトリガーされます。3. ページ内の要素のスタイル属性が変更されると、再描画がトリガーされます。4. ブラウザウィンドウのサイズが変更されると、リフローと再描画がトリガーされます。5. ページがスクロールすると、再描画がトリガーされます。

したがって、ページを作成するときは、頻繁なリフローと再描画を避けるように努める必要があります。また、次の方法でページのパフォーマンスを最適化できます。 1. CSS3 のtransform プロパティと opacity プロパティを使用してアニメーション効果を実現し、position や float などのプロパティの使用を避けます。2. 要素の位置には、position:Absolute または fix を使用し、margin やpadding などの属性の使用を避けます。3. DOM 要素のスタイル属性を頻繁に変更することを避けるために、複数の変更操作を 1 つの操作に結合できます。4. 仮想リストなどの技術を使用して、大量のデータのレンダリングを最適化します。

60. レスポンシブデザインとは何ですか? レスポンシブデザインの基本原則は何ですか? 実行する方法？

レスポンシブ デザインは、さまざまなデバイス (デスクトップ コンピューター、タブレット コンピューター、携帯電話など) 上で Web サイトが最高のユーザー エクスペリエンスを提供できる Web デザイン方法です。レスポンシブ デザインの基本原理は、画面サイズに応じて、CSS メディア クエリやエラスティック グリッド レイアウトなどのテクノロジーを使用して、Web ページのレイアウト、フォント サイズ、画像サイズ、その他の要素をさまざまなデバイスの画面に合わせて自動的に調整することです。さまざまなデバイスのサイズと解像度。
レスポンシブデザインで適切な作業を行うには、次の手順に従う必要があります。 1. 伸縮性のあるグリッドレイアウトを設計します。相対単位 (パーセンテージ、em など) を使用して、Web ページ要素のサイズと位置を定義し、それに適応させます。さまざまなデバイスの画面サイズ。2. CSS メディアクエリを使用する: さまざまなデバイスの画面サイズと解像度に応じて、CSS メディアクエリを使用して Web ページのレイアウト、フォントサイズ、画像サイズ、その他の要素を調整します。3. 画像サイズの最適化: 適切な画像形式と圧縮技術を使用して画像サイズを削減し、Web ページの読み込み速度を向上させます。4. テストと最適化: さまざまなデバイスで Web ページのレスポンシブデザイン効果をテストし、テスト結果に従って最適化してユーザーエクスペリエンスを向上させます。

61. ボックスモデルについてのあなたの理解を教えてください。

1. ボックスモデルとは、Web ページにおいて各要素をコンテンツ、内マージン、ボーダー、外マージンの 4 つの部分で構成される長方形のボックスとして捉え、このうちコンテンツ領域が要素の実際の表示内容となります。 area、padding はコンテンツ領域と境界線 (コンテンツとパディングの周囲の線) の間の距離、margin は境界線と隣接する要素の間の距離です。

2.ボックスモデルのサイズは要素の高さと幅の属性で決まりますが、実際のサイズは内マージン、ボーダー、外マージンの値も加算する必要があります。CSSでのボックスの計算方法モデルは box-sizing 属性によって制御できます。content-box と border-box の 2 つの値があります。content-box は、ボックスモデルのサイズにコンテンツ領域のみが含まれることを示します。一方、border-box は、ボックスモデルのサイズにコンテンツ領域、内側のマージン、境界線が含まれるが、外側のマージンは含まれないことを示します。

3. ボックスモデルはWebページのレイアウトにおいて非常に重要で、要素の幅、高さ、内マージン、境界線、外マージンの属性を設定することで、さまざまなレイアウト効果を実現できます。同時に、ボックスモデルは、CSS の配置プロパティを通じて要素の位置と階層関係を制御することもできます。

62. ボックスを水平方向と垂直方向に中央揃えにする方法は何ですか?

フレックスレイアウトを使用し、親コンテナを display:flex に設定してから、justify-content:center と align-items:center を使用して水平方向と垂直方向の中央揃えを実現します。

絶対配置を使用して、ボックスの左と上のプロパティを 50% に設定し、transform:translate(-50%,-50%) を使用して水平および垂直のセンタリングを実現します。

テーブルレイアウトを使用し、親コンテナを display:table に設定してから、ボックスを display:table-cell に設定し、vertical-align:middle および text-align:center を使用して水平および垂直の中央揃えを実現します。

63. JavaScript のデータ型とその保存方法について教えてください。

JavaScript には次の 7 つのデータ型があります。

基本データ型: 数値、文字列、ブール値、Null、未定義、シンボル (ES6 の新機能)。

参照データ型: オブジェクト。

基本データ型の値はスタックメモリに格納され、参照データ型の値はヒープメモリに格納され、ヒープメモリ上の実データへのポインタがスタックメモリに格納されます。

基本データ型の変数を作成すると、スタックメモリにスペースが割り当てられ、値はこのスペースに格納されます。

参照データ型の変数を作成すると、ヒープメモリ上の実データへのポインタを格納するスタックメモリに領域が確保され、ヒープメモリ上に実データが格納されます。

64. 応答性を理解するにはどうすればよいですか? それを達成するにはどのような方法がありますか? 違いは何ですか?

1. レスポンシブ Web サイトは、ネットワークページデザインレイアウトの一種で、ページのデザインと開発は、ユーザーの行動やデバイス環境 (システムプラットフォーム、画面サイズ、画面の向きなど) に応じて対応し、調整する必要があります。

2. メディアクエリ: @media を使用して、さまざまな画面サイズに応じてさまざまなスタイルを定義します。

3. パーセンテージ: 含まれるブロックの測定単位を基準にして、さまざまな画面に適応するためにプロパティにパーセンテージを設定します。

4. vw/vh: ビューポート単位。ブラウザのウィンドウサイズに応じて調整できます。

5. rem: ルート要素のフォントサイズに対する相対的な単位を指します。rem は相対的な単位にすぎません

65. CSS パフォーマンス最適化の一般的な方法とその実現方法は何ですか?

1. 過剰な制約を避ける

2. 子孫セレクターを避ける

3. コンパクトな構文を使用する

4. 不必要な名前空間を避ける

5. 不必要な繰り返しを避ける

6. 定義にはセマンティック名を使用するのが最善です

7. !重要は避けてください。他のセレクターを選択できます

8. ルールを可能な限り合理化し、異なるタイプの繰り返しルールをマージします。

66. データの種類を判断する方法は何ですか? 違いは何ですか?

1、種類：

a. データ型を判断でき、データ型を表す文字列を返します。返される結果には数値、ブール値、文字列、関数、オブジェクト、未定義のみが含まれます。

b. typeof を使用して、変数が存在するかどうかを確認できます。

c. typeof 演算子の問題は、参照されるオブジェクトの型に関係なくオブジェクトを返すことです。

2、instanceof方法:

通常、参照データ型を検出するために使用される式は次のとおりです。AinstanceofB 、 AがBのインスタンスであるかどうかを判断します。AがBのインスタンスの場合はtrueを返し、それ以外の場合はfalseを返します。データ型は構造によって決定されます。タイプ

3、constructor方法：

constructor はプロトタイプオブジェクトの属性であり、コンストラクターを指します。

4.無敵かつ全能のメソッド: jquery.type()

オブジェクトが未定義または null の場合は、それに応じて「未定義」または「null」を返します。

オブジェクトにブラウザの組み込みオブジェクト [[Class]] と同じ内部 [[Class]] がある場合、対応する [[Class]] 名を返します。

67. バインド、コール、適用の違いは何ですか? バインドメソッドを実装するにはどうすればよいですか?

1. call、、の機能はapply、bind関数実行のコンテキストを変更することです。つまり、関数実行のthis方向を変更することです。

2. apply2 つのパラメータを受け入れます。最初のパラメータはthisポインタで、2 番目のパラメータは関数によって受け入れられるパラメータで、配列の形式で渡されます。ポインタを変更すると、this元の関数がすぐに実行されます。このメソッドはthisポインタを一時的に 1 回だけ変更します

3.callメソッドの最初のパラメータもthisポインタであり、後でパラメータリストが渡されます。元の関数はポインタをapply変更した直後に実行されthis、このメソッドはthisポインタを一時的に 1 回だけ変更します。最初のパラメータがの場合null、undefined時間、デフォルトはwindow（ブラウザ内で）を指します

4. バインドメソッドは call と非常によく似ています。最初のパラメータもthisポインタであり、パラメータリストも後で渡されます (ただし、このパラメータリストは複数回渡すことができます)。thisポインタを変更すると、ポインタは変更されなくなります。すぐに実行されますが、this関数が指す永続的な変更が返されます。

5. 違い:

this3 つとも、関数が指すオブジェクトを変更できます。

3 つのパラメータのうちの最初のパラメータは、this指すオブジェクトです。そのようなパラメータが存在しない場合、またはパラメータがまたはの場合undefined、nullデフォルトでグローバルを指します。window

3 つすべてパラメータを渡すことができますが、applyこれは配列callですがapply、call合計は 1 回限りの受信パラメータですが、bind複数の受信パラメータに分割できます。

bindはバインド後に関数を返すこと、applyはcallすぐに実行すること

thisポイントを変更する
パラメータを動的に渡す

// 方法 1: バインドで関数パラメータのみを渡す
fn.bind(obj,1,2)() 
//
方法 2: バインドで関数パラメータを渡し、戻り関数でもパラメータを渡す
fn.bind(obj, 1 )(2)

互換性のあるnewキーワード

全体的な実装コードは次のとおりです。

Function.prototype.myBind = function (context) { 
    // 呼び出し元のオブジェクトが関数であるかどうかを判断します
    if (typeof this !== "function") { 
        throw new TypeError("Error"); 
    } 
//
    パラメータ
    const argsを取得します= [ ...arguments].slice(1), 
          fn = this; 
return
    function Fn() { 
//
        呼び出しメソッドに応じて、異なるバインディング値を渡します
        return fn.apply(thisinstanceof Fn ? new fn(... 引数) : コンテキスト、args.concat(...引数)); 
    } 
}

68. クロージャをどう理解するか? 閉鎖の適用シナリオは何ですか?

1. 関数は周囲の状態 (字句環境、字句環境) への参照とバンドルされています (または関数が参照で囲まれています)。このような組み合わせはクロージャ (クロージャ) です。つまり、クロージャにより、クロージャにアクセスできます。内部関数内の外部関数のスコープ

2. アプリケーションシナリオ:

プライベート変数を作成し、

変数の有効期間を延長する

キャッシュデータ

コールバック関数を実装する

69. イベントプロキシとは何かについて簡単に説明します。

1. イベント委任 (イベント委任)、イベント委任とも呼ばれます。は、JavaScript で一般的に使用されるイベントをバインドするための一般的な手法です。「イベントプロキシ」とはその名の通り、本来子要素にバインドする必要がある応答イベント（クリック、キーダウンなど）を親要素に委譲し、親要素にイベント監視の役割を持たせることです。。イベントプロキシの原理は、DOM 要素のイベントバブリングです。

70.手ぶれ補正とスロットリングとは何ですか? 違いは何ですか? どうやって達成するのか？

1. アンチシェイクとは、イベントがトリガーされた後、n数秒の遅延後にコールバックが実行され、nこの 1 秒以内にイベントが再度トリガーされると、計測が再開されることを意味します。

2. スロットリングとは、イベントが n 秒後に実行されることを意味します。n 秒以内に繰り返しトリガーされると、タイミングが再調整され、一定期間内のイベントのトリガー頻度が減少する可能性があります。

3.違い:

同じ点：

setTimeoutを使用して達成できます

目的は、コールバックの実行頻度を減らすことです。コンピューティングリソースを節約します。

違い：

関数アンチシェイクは、一定期間の連続操作後にコールバックを処理し、使用しclearTimeoutてsetTimeout実装します。継続的な操作での機能スロットルは、期間ごとに 1 回のみ実行され、パフォーマンスを向上させるために高頻度のイベントで使用されます。

機能アンチシェイクは、一定期間継続してトリガーされるイベントに焦点を当て、最後に 1 回だけ実行されますが、機能スロットリングは一定期間に 1 回だけ実行されます。

たとえば、時間頻度が 500 ミリ秒に設定されている場合、2 秒以内に関数が頻繁にトリガーされ、調整され、500 ミリ秒ごとに実行されます。手ぶれ補正、メソッドが何回呼び出されても、2 秒後に 1 回だけ実行されます

4.アプリケーションシナリオ:

アンチシェイクの連続イベントでは、次のシナリオでトリガーする必要があるコールバックは 1 つだけです。

検索ボックス検索入力。ユーザーのみがリクエストを送信する前に最後の時刻を入力する必要があります

携帯電話番号、メール認証入力検知

ウィンドウサイズresize。ウィンドウのサイズ変更が完了したら、ウィンドウのサイズを計算するだけです。再レンダリングを防止します。

スロットルが一定の間隔でコールバックを実行するシナリオには、次のようなものがあります。

スクロールしてロードするか、さらにロードするか、一番下までスクロールして聞いてください

検索ボックス、検索関連付け機能

71. スコープチェーンについてのあなたの理解について教えてください。

1. 現在のスコープ内で必要な変数を見つけます。ただし该作用域没有、この変数はです自由变量。自己作用域找不到この変数を去父级作用域查見つけて検索すると依次向上级作用域、ウィンドウオブジェクトにアクセスするまで終了します。レイヤーごとの関係は次のとおりです。作用域链。

2. スコープチェーンの役割は、実行環境がアクセスできるすべての変数と関数への規則的なアクセスを保証することです。スコープチェーンを通じて、外部環境の変数と関数にアクセスできます。スコープチェーンは本質的に、変数オブジェクトへのポインターのリストです。変数オブジェクトは、実行環境内のすべての変数と関数を含むオブジェクトです。スコープチェーンのフロントエンドは常に、現在の実行コンテキストの変数オブジェクトです。

72. プロトタイプとプロトタイプチェーンの理解について話しますか?

1.プロトタイプ:

JS がコンストラクター (オブジェクトのインスタンス化に使用される関数) を宣言すると、元の関数のプロトタイプである対応するオブジェクトがメモリ内に作成されます。コンストラクターにはデフォルトでプロトタイプ属性があり、プロトタイプの値は関数のプロトタイプを指します。同時に、プロトタイプにはコンストラクター属性もあり、コンストラクターの値は関数オブジェクトを指します。

コンストラクターを通じてインスタンス化されたオブジェクトには、prototype 属性はありませんが、デフォルトでproto属性があり、 protoの値はコンストラクターのプロトタイプを指します。プロトタイプオブジェクトに追加または変更されたプロパティは、インスタンス化されたすべてのオブジェクトで共有できます。

機能: データ共有、メモリ領域の節約、継承の実現

2.プロトタイプチェーン:

インスタンス化されたオブジェクトのプロパティにアクセスする場合、最初にオブジェクト (独自のプロパティ) 内を検索します。見つからない場合は、その proto が指すプロトタイプ内で検索します。それでも見つからない場合は、protoが指す上位プロトタイプ内でObject.prototype.proto (値が null) が見つかるまで検索し、このチェーンプロセスがプロトタイプチェーンです。

機能: オブジェクトの属性メソッドを検索します。

73. vue のライフサイクルと意味は何ですか?

1. vue のライフサイクルとは、作成開始、データの初期化、テンプレートのコンパイル、DOM のハングアップとレンダリング、更新レンダリング、アンインストールまでの一連のプロセスを指します。

2. beforeCreate(): 新しい vue インスタンスの作成前には、いくつかのデフォルトのライフサイクルフックとデフォルトのイベントのみが存在し、その他のものはまだ作成されていません。このライフサイクルが実行されるとき、データおよびメソッド内のデータは初期化されていません。データ内のデータとメソッド内のメソッドは、この段階では使用できません。

3. created(): 作成され、データとメソッドが初期化され、呼び出すことができます。

4. BeforeMount(): マウントする前に、テンプレートはメモリ内でコンパイルされていますが、ページにはマウントされていません。この時点では、ページはまだ古いです。

5.mounted(): マウントされ、Vue インスタンスが初期化されました。この時点で、コンポーネントは作成フェーズを終了し、実行フェーズに入ります。プラグインを通じてページ上の DOM ノードを操作したい場合は、早い段階でこの段階で実行できます。

6. beforeupdate(): 更新前、ページに表示されているデータは古いままで、データ内のデータは更新され、ページは最新のデータと同期されていません。

7. updated(): 更新。ページに表示されているデータとデータ内のデータは同期されており、すべて最新です。

8. beforeDestory(): 破棄する前に、Vue インスタンスは実行段階から破棄段階に入り、この時点ですべてのデータ、メソッド、命令、フィルターなどが利用可能になります。まだ実際には破壊されていない

9. Destoryed(): 破棄されると、Vue インスタンスは実行段階から破棄段階に入ります。この時点で、すべてのデータ、メソッド、命令、フィルターなどが利用可能になります。まだ実際には破壊されていない

74. vueカスタム命令のフック関数とは何ですか?

bind: ディレクティブが初めて要素にバインドされるときに、1 回だけ呼び出されます。ここではワンタイムの初期化設定を行うことができます。

insert: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードのみが存在することが保証されますが、必ずしもドキュメントに挿入されるわけではありません)。

update: コンポーネントの VNode が更新されるときに呼び出されますが、子 VNode の更新前に発生する場合もあります。ディレクティブの値は変更されている場合もあれば、変更されていない場合もあります。ただし、更新前後の値を比較することで、不要なテンプレートの更新を無視できます (フック関数のパラメーターの詳細については、以下を参照してください)。

componentUpdated: コマンドが配置されているコンポーネントの VNode とその子 VNode がすべて更新された後に呼び出されます。

unbind: 命令が要素からアンバインドされるときに 1 回だけ呼び出されます。

75. JavaScript ローカルストレージとは何ですか? 違いと使用シナリオは?

1.javaScriptローカルキャッシュの主に次の 4 つの方法について説明します。

クッキー

セッションストレージ

ローカルストレージ

インデックス付きDB

2. 、cookie、の主な違いは次のとおりです。sessionStoragelocalStorage

ストレージサイズ:cookieデータサイズはを超えることはできません4k。ストレージサイズの制限もありますが、sessionStorageそれよりもはるかに大きく、5M 以上に達する可能性があります。localStoragecookie

有効期間:localStorage永続的なデータを保存します。データが積極的に削除されない限り、ブラウザを閉じた後もデータは失われません。データは、sessionStorage現在のブラウザウィンドウを閉じた後に自動的に削除されます。データは、cookie設定されたcookie有効期限まで有効です。ウィンドウまたはブラウザが閉じている場合

データとサーバー間の対話。cookieデータはサーバーに自動的に送信され、サーバーはクライアントcookieに書き込むこと。sessionStorageまた、localStorageデータはサーバーに自動的に送信されず、ローカルにのみ保存されます。

3. 間違ったシナリオにはオプションを使用します。

ユーザーをマークし、ユーザーの行動を追跡する場合に使用することをお勧めします。cookie

ローカルデータ (トークン) の長期保存に適しており、推奨されます。localStorage

機密性の高いアカウントにはワンタイムログインを推奨sessionStorage

大量のデータを保存する場合や、オンラインドキュメント（リッチテキストエディター）の編集履歴を保存する場合に使用することをおすすめします。indexedDB

マンスリー試験111

76. 再帰についてのあなたの理解について教えてください。再帰を使用してツリー構造のカプセル化を実現するメソッドをカプセル化しますか?

1. 再帰は、それ自体を呼び出すことで問題を解決するアルゴリズムまたは関数の実装です。再帰中、問題が直接解決できるほど小さな部分に分割されるまで、各呼び出しは問題をより小さなサブ問題に分割します。

2. 再帰は通常、ツリー構造やグラフ構造などの再帰構造の問題を解決するために使用できます。

77. Link と @import の違いは何ですか?

1. Linkと@importはどちらも外部リソースを導入する方法ですが、違いがあります

違い：

1. 読み込み時間: リンクタグはページの読み込み時に読み込まれ、@import はページの読み込み後に読み込まれます。

2. 互換性: Link タグは互換性の高い HTML タグですが、@import は CSS 構文であるため、古いブラウザとは互換性がありません。

3. 動作範囲: リンクタグは CSS、JS、画像などのさまざまなタイプのファイルをインポートできますが、@import は CSS ファイルのみをインポートできます。

4. ウェイト: Link タグによってインポートされた CSS ファイルのウェイトは、@import によってインポートされた CSS ファイルのウェイトよりも高いため、スタイルが競合する場合、Link タグによって導入されたスタイルが @import によって導入されたスタイルをオーバーライドします。

78.FOUCとは何ですか? それを避けるにはどうすればよいでしょうか?

1. FOUC はドキュメントスタイルの一時的な障害です。これは、Web ページの読み込み時に CSS ファイルが時間内に読み込まれず、ページ上に短期間スタイル化されたコンテンツが表示されることを意味します。

回避方法:

1. CSS ファイルを HTML ドキュメントの先頭に配置して、ページが読み込まれるときに CSS ファイルが最初に読み込まれるようにします。

2. インライン CSS スタイルを使用して、CSS スタイルを HTML ドキュメントに直接埋め込み、CSS 価格のロード時の遅延を回避します。

3. Sass や Less などの CSS プリプロセッサを使用すると、CSS ファイルを 1 つの CSS ファイルにコンパイルできるため、HTTP リクエストの量が削減されます。

4. ブラウザーのキャッシュを使用して CSS をローカルにキャッシュし、ページの読み込み時間を短縮します。

5. JavaScript を使用して、ページの読み込み時に CSS ファイルが読み込まれたかどうかを検出します。読み込みが完了していない場合、CSS ファイルが読み込まれるまでページのレンダリングが遅れることがあります。

79. プリコンパイラーについてのあなたの理解について教えてください。

1. プリコンパイラは、ソースコードをコンパイルする前に処理するプログラムであり、マクロの置換、条件付きコンパイル、ヘッダーファイルのインクルードなど、いくつかの前処理操作を実行できます。プリコンパイラはコンパイラの一部であり、コンパイル中に自動的に実行することも、コマンドによって実行することもできます。

2. プリコンパイラの主な機能は、ソースコード内のマクロ定義を実際のコードに置き換え、ヘッダーファイルの内容をソースコードに挿入することです。これにより、コードの重複が減り、コードの可読性と保守性が向上します。

3. プリコンパイラは、条件付きコンパイルを実行し、さまざまな条件付きコンパイルオプションに従ってさまざまなコードを生成することもできます。このようにして、さまざまな要件に応じてさまざまなコードを生成でき、コードの柔軟性と移植性を向上させることができます。

80. shouldcomponentUpdate の機能は何ですか?

1. shouldComponentUpdate は、コンポーネントを再レンダリングする必要があるかどうかを制御するために使用される React ライフサイクルメソッドの 1 つです。その機能は、コンポーネントが再レンダリングされる前に、コンポーネントのプロパティと状態が変更されたかどうかを判断することです。変更がない場合は false を返し、そうでない場合は true を返し、コンポーネントを再レンダリングする必要があることを React に伝えます。

2. shouldComponentUpdate を使用すると、不必要な再レンダリングを回避できるため、React アプリケーションのパフォーマンスが向上します。コンポーネントの props または state が変更されると、React はコンポーネントを再レンダリングします。コンポーネントの props または state が変更されていない場合、再レンダリングは不要です。このとき、 shouldComponentUpdate を使用すると、不必要な再レンダリングを回避できます。レンダリング。

81. React のトランザクション処理ロジックの概要を説明しますか?

React のトランザクション処理ロジックは、React コンポーネントのライフサイクルにおいて、React がコンポーネントの更新プロセスを管理するトランザクションオブジェクトを自動的に作成することを意味します。トランザクションオブジェクトには、コンポーネントの更新中に特定の操作を実行するための一連のライフサイクルフック関数が含まれています。

82. React コンポーネントはビジネスコンポーネントと技術コンポーネントに分けられますか?

1. React コンポーネントは、その機能と用途に応じてビジネスコンポーネントと技術コンポーネントに分類できます。

2. ビジネスコンポーネントとは、ログインボックス、ショッピングカート、製品リストなどのビジネス関連コンポーネントを指します。これらのコンポーネントは通常機能し、複数のページまたはアプリケーションで共有できます。ビジネスコンポーネントは通常、フォーム、ボタン、リストなどの複数の技術コンポーネントで構成されます。

3. 技術コンポーネントとは、フォーム、ボタン、リストなど、技術に関連するコンポーネントを指します。通常、これらのコンポーネントには共通の機能があり、複数のビジネスコンポーネントで共有できます。技術コンポーネントは通常、props および state プロパティを通じて操作できる HTML、CSS、および JavaScript コードで構成されます。

83. Reactパフォーマンスの最適化となる周期関数はどれですか?

React のパフォーマンスの最適化は、 shouldComponentUpdate ライフサイクル関数で実行されます。この関数はコンポーネントが更新される前に呼び出され、コンポーネントの再レンダリングを防ぐために false を返すことができるため、アプリケーションのパフォーマンスが向上します。この関数では、前後の props と state を比較することで、コンポーネントを再レンダリングするかどうかを決定できます。

84. ファイバーアーキテクチャの理解と応用シナリオについて話しますか?

1. Fiber アーキテクチャは、コルーチンに基づく軽量の同時実行モデルであり、単一スレッドで高い同時処理能力を実現できます。

2. ファイバーアーキテクチャの中心となるアイデアは、長期タスクを複数の小さなタスクに分解し、これらの小さなタスク間を切り替えて同時処理を実現することです。

ファイバーアーキテクチャのアプリケーションシナリオには主に次の側面が含まれます。
1. 高度な同時ネットワーク アプリケーション: ファイバー アーキテクチャは、単一スレッドで多数のネットワーク リクエストを処理できるため、アプリケーションの同時処理能力が向上します。
2. 高性能データベース アクセス: ファイバー アーキテクチャにより、複数のデータベース要求を単一のスレッドで処理できるため、データベース アクセスのパフォーマンスが向上します。
3. 大規模データ処理: ファイバー アーキテクチャにより、大規模データ処理タスクを複数の小さなタスクに分解できるため、データ処理の効率が向上します。
4. リアルタイムデータ処理：ファイバーアーキテクチャにより、リアルタイム監視、リアルタイムログ処理などのリアルタイムデータ処理を実現できます。

85. Reactパフォーマンス最適化ソリューション?

PureComponent または shouldComponentUpdate を使用します: PureComponent は React によって提供されるパフォーマンスが最適化されたコンポーネントです。浅い比較が自動的に実行されます。プロパティと状態が変更されていない場合、コンポーネントは再レンダリングされません。共通コンポーネントを使用している場合は、 shouldComponentUpdate メソッドを手動で実装して、カスタム比較ロジックを実行できます。

React.memo を使用する: React.memo は React によって提供される高レベルのコンポーネントです。コンポーネントのレンダリング結果をキャッシュできます。プロパティが変更されていない場合、コンポーネントを再レンダリングせずに、キャッシュされた結果を直接返します。

render メソッドで複雑な計算や操作を実行しないでください。render メソッドは、コンポーネントが更新されるたびに呼び出されます。複雑な計算や操作をその中で実行すると、コンポーネントのパフォーマンスに影響します。これらの計算と操作は、コンポーネントのライフサイクルメソッドに配置することも、メモ化テクノロジを使用してキャッシュすることもできます。

React.lazy と Suspense を使用する: React.lazy は React によって提供される遅延読み込みコンポーネントであり、使用する必要があるまでコンポーネントの読み込みを遅らせることができます。Suspense は React が提供するコンポーネントで、コンポーネントのロード時にロード状態を表示し、コンポーネントがロードされるのを待ってからコンポーネントを表示できます。

shouldComponentUpdate と React.memo を使用したパフォーマンステスト: React のパフォーマンステストツールを使用してテストし、最適化する必要があるコンポーネントを特定し、 shouldComponentUpdate または React.memo を使用して最適化できます。

パフォーマンス分析に React のプロファイラーツールを使用する: React は、開発者がコンポーネントのレンダリングパフォーマンスを分析し、どのコンポーネントを最適化する必要があるかを見つけるのに役立つプロファイラーツールを提供します。

86. Flux と CSS レンダリングのプロセスを簡単に説明しますか?

Flux は、スケーラブルな Web アプリケーションを構築するためのアーキテクチャパターンです。その中心的な考え方は一方向のデータフローです。つまり、データはある場所から別の場所へのみ流れることができるため、データの混乱や不整合を回避できます。

CSS レンダリングのプロセスでは、HTML ドキュメントと CSS スタイルシートを組み合わせて、視覚的な Web ページを生成します。具体的なプロセスは次のとおりです。
1. ブラウザは HTML ドキュメントを解析し、DOM ツリーを構築します。
1. ブラウザは CSS スタイル シートを解析し、CSSOM ツリーを構築します。
1. DOM ツリーと CSSOM ツリーを結合してレンダリング ツリーを生成します。
1. レンダリングツリーのノード情報に従って、各ノードの位置とサイズを計算します。
1. レンダリング ツリー内のノードを画面に描画して、最終的な Web ページを生成します。

87. DOM0、DOM2、および DOM3 のイベント処理の違いは何ですか?

DOM0、DOM2、および DOM3 は、JavaScript DOM (Document Object Model) イベント処理仕様の異なるバージョンを参照します。

1. DOM0 イベント処理: DOM0 イベント処理では、イベントハンドラーが DOM 要素の属性に直接割り当てられます。

2. DOM2 イベント処理: DOM2 イベント処理仕様では、addEventListener() メソッドと RemoveEventListener() メソッドを導入し、複数のイベントハンドラを同じ要素に追加できるようにします。

3. DOM3 イベント処理: DOM3 イベント処理仕様では、より多くのイベントタイプとより多くのイベントハンドラーオプションが導入されています。

88. ページが一番下までスクロールしたことと、ページ内の要素が可視化領域に入ったかどうかをどのように判断するか？

ページが一番下までスクロールしたかどうかの判断は、以下の方法で行うことができます。

ページscrollTopのスクロール高さ、ページclientHeightの表示高さ、およびページscrollHeightの合計高さを取得します。

スクロールトップ + クライアントハイトがスクロールハイトと等しいかどうかを確認します。等しい場合は、ページが一番下までスクロールされたことを意味します。

ページ内の要素が視覚領域に入っているかどうかは、次の方法で判断できます。

1. 要素の offsetTop、offsetLeft、offsetWidth、offsetHeight などの要素の位置情報を取得します。

ページのスクロール高さscrollTopとページの表示高さclientHeightを取得します。

要素の位置情報がscrollTopとscrollTop + clientHeightの間にあるかどうかを確認します。そうであれば、要素が視覚化領域に入ったことを意味します。

89. ブラウザのイベントループとnodejsのイベントループの違いについて教えてください。

1. ブラウザーのイベントループと、nodejs のイベントループの主な違いは、その実装と動作環境にあります。

2. ブラウザーのイベントループは、シングルスレッドの JavaScript エンジンに基づいて実装されており、JavaScript コードの実行とイベント処理を処理します。

3. ブラウザのイベントループには、主にマクロタスクとマイクロタスクの 2 種類のタスクキューが含まれます。マクロタスクには setTimeout、setInterval、DOM イベントなどが含まれ、マイクロタスクには Promise、MutationObserver などが含まれます。各イベントループでは、最初にすべてのマイクロタスクが実行され、次にマクロタスクが実行され、その後にすべてのマイクロタスクが実行されます。

4.nodejs のイベントループはマルチスレッド C++ に基づいて実装されており、JavaScript コードの実行と I/O 操作の処理を担当します。

5.nodejs のイベントループには、主にタイマー、保留中のコールバック、アイドル、準備、ポーリング、チェックの 6 つのステージが含まれています。各ステージで、イベントループはすべてのタスクが実行されるまで、対応するタスクキューを実行します。

90. vue-router の基本的な実装原理について教えてください。

1. Vue-router の基本的な実装原理は、主に Vue.js の応答システムとルーティングのハッシュモードまたは履歴モードに基づいています。

2. Vue.js では、各コンポーネントに応答する状態オブジェクトがあり、状態が変化すると、Vue.js はビューを自動的に更新します。Vue-router はこの機能を使用して、ルーティング情報を応答状態オブジェクトに保存します。ルーティングが変更されると、Vue.js はビューを自動的に更新します。

3. ハッシュモードでは、Vue-router はブラウザの hashchange イベントをリッスンし、ハッシュが変更されると、Vue-router は新しいハッシュ値に従ってルーティングステータスオブジェクトを更新し、ビューの更新をトリガーします。

4. 履歴モードでは、Vue-router は HTML5 履歴 API を使用して、pushState および replaceState メソッドを通じてブラウザの URL を変更し、同時にルーティング状態オブジェクトを更新し、ビューの更新をトリガーします。

5. ユーザーが URL を手動で変更して、ルーティングステートオブジェクトとビューの間で不一致が生じるのを防ぐために、Vue-router は、popstate イベントを使用してブラウザの前後の操作を監視し、ルーティング状態オブジェクトと時間内のビュー。

6. さらに、Vue-router はルーティングガード、ダイナミックルーティング、ネストルーティングなどの機能も提供しますが、これらの機能の実現も Vue.js のレスポンシブシステムとルーティングモードの特性に基づいています。

91. vuexの実現原理について教えてください。commit メソッドとdispatch メソッドはどのように実装されますか?

1. Vuex は状態管理ライブラリであり、その実装原理は Vue.js の応答性の高いシステムと一方向のデータフローモードに基づいています。

2. Vuex は、アプリケーションの状態をストアと呼ばれる中央リポジトリに保存します。コンポーネントはゲッターとミューテーションを通じてストア内の状態にアクセスして変更することができ、アクションは非同期操作に使用できます。

4. commit メソッドは、ミューテーションを送信するためのメソッドであり、ミューテーションの名前とペイロード (オプション) の 2 つのパラメーターを受け取ります。commit メソッドが呼び出されると、Vuex はストア内で対応するミューテーションを検索して実行し、それによってストア内の状態を変更します。

5. ディスパッチメソッドを使用してアクションをトリガーします。このメソッドは、アクションの名前とペイロード (オプション) という 2 つのパラメーターを受け取ります。ディスパッチメソッドが呼び出されると、Vuex はストア内の対応するアクションを検索して実行し、非同期操作やその他の副作用をトリガーします。

92. 3 つのコンポーネント A、B、C があります。A コンポーネントは B コンポーネントキャッシュにジャンプし、A コンポーネントはキャッシュせずに C コンポーネントにジャンプします。これを実現するにはどうすればよいですか?

1. ルーティング設定でタグを使用して<keep-alive>コンポーネントキャッシュを実装できます。

2. ルーティング設定で、キャッシュする必要があるコンポーネントを<keep-alive>タグでラップし、includeプロパティをキャッシュする必要があるコンポーネントの名前に設定します。

3. コンポーネントで、activatedライフサイクルdeactivatedフックを使用して、キャッシュが必要かどうかを判断します。キャッシュが必要な場合は、activatedフックに$route.meta.keepAlive設定しtrue、deactivatedフックに設定しますfalse

4. ジャンプする場合、キャッシュが必要なコンポーネント名に応じてキャッシュが必要かどうかを判断します。キャッシュが必要な場合は、ジャンプ時に$route.meta.keepAliveに設定されtrue、それ以外の場合はに設定されます。false

６年生の２週目

93. MVVMについて理解していますか?

1. MVVM は、アプリケーションを 3 つの部分 (モデル Model、ビュー View、ビューモデル ModelView) に分割するソフトウェアアーキテクチャパターンです。このうち、モデルはアプリケーションのデータとビジネスロジックを表し、ビューはユーザーインターフェイスを表し、ビューモデルはモデルとビューを接続するミドルウェアです。

2. MVVM では、ビューモデルは、モデル内のデータをビューが使用できる形式に変換し、ビュー内のユーザー操作をモデルが理解できるモードに変換する責任を負います。ビューとモデルの間の通信を処理します。たとえば、データバインディング、コマンドバインディングなどです。

3. MVVM の利点は何ですか?

1. 関心事の分離: アプリケーションのデータとビジネスロジックをユーザーインターフェイスから分離し、コードをより明確で理解しやすくします。

2. テスト容易性: View Model と View and Model の間の通信はデータバインディングとコマンドバインディングを通じて実現されるため、View Model の単体テストが容易になります。

3. 保守性: MVVM はアプリケーションを 3 つの部分に分割するため、アプリケーションの保守と拡張が容易になります。

94. vue のライフサイクルについての理解を詳しく説明してください。

vue ライフサイクルは、vue インスタンスの作成から破棄までのプロセス全体を指し、vue ライフサイクルは 8 つの段階に分かれています。

1. beforeCreate: インスタンスが作成される前に呼び出されます。この時点では、インスタンスのデータとメソッドは初期化されておらず、データ、計算、メソッドなどの属性にはアクセスできません。

2. created: インスタンスの作成後に呼び出されます。この時点では、インスタンスのデータとメソッドは初期化されていますが、DOM はレンダリングされておらず、DOM 要素にアクセスできません。

3. beforeMount: DOM がマウントされる前に呼び出されます。この時点では、テンプレートはコンパイルされていますが、ページにはまだマウントされていません。

4. マウント済み: DOM マウントの完了後に呼び出されます。この時点で、インスタンスはページにマウントされており、DOM 要素にアクセスできます。

5. beforeUpdate: データが更新される前に呼び出されます。この時点では、データは更新されていますが、DOM は再レンダリングされていません。

6. updated: データの更新が完了した後に呼び出され、この時点でデータが更新され、DOM が再レンダリングされます。

7. beforeDestroy: インスタンスが破棄される前に呼び出されます。この時点ではインスタンスは破棄されておらず、いくつかのクリーニング作業を実行できます。

8. destroy: インスタンスが破棄された後に呼び出されます。この時点では、インスタンスは破棄されており、インスタンスのデータおよびメソッドにはアクセスできません。

95. vue コンポーネント間のデータ転送方法は何ですか?

Vue コンポーネント間でデータを転送するには、いくつかの方法があります。

親子コンポーネントはデータを渡します。親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントは $emit トリガーイベントを通じてデータを親コンポーネントに渡します。

兄弟コンポーネントはデータを渡します。データは、共通の親コンポーネントを仲介として介して兄弟コンポーネントに渡すことができます。

データ管理に Vuex を使用する: Vuex は Vue の状態管理ライブラリであり、データをグローバルストアに保存でき、各コンポーネントはゲッターとミューテーションを通じてデータを取得および変更できます。

データ転送にイベントバスを使用する: Vue インスタンスをイベントバスとして使用し、$on メソッドと $emit メソッドを通じてコンポーネント間でデータを転送できます。

データ転送には Provide と Inject を使用します。親コンポーネントは Provide を通じて子コンポーネントにデータを提供し、子コンポーネントは Inject を通じてデータを注入します。

データ転送に $refs を使用する: $refs を通じてサブコンポーネントのインスタンスを取得し、サブコンポーネントのデータとメソッドに直接アクセスできます。

96. vue のルーティング実装: ハッシュモードとヒストリーモードの原則?

UE のルーティング実装には、主にハッシュモードとヒストリーモードの 2 つのモードがあります。

ハッシュモードハッシュモードでは、URL の # 記号の後ろにあるコンテンツはハッシュ値と呼ばれ、サーバーには送信されず、クライアントで処理されます。URL のハッシュ値が変更されると、ブラウザーは hashchange イベントをトリガーし、このイベントをリッスンすることでルートを切り替えることができます。

たとえば、Example Domainにアクセスすると、ブラウザは # の後のコンテンツ、つまり /home をハッシュ値として使用します。ページ上のリンクをクリックして別のルートに切り替えると、新しいリクエストを送信するのではなく、実際には URL のハッシュ値が変更されます。

履歴モード履歴モードでは、URL に # 記号は必要なくなりますが、通常の URL パスが直接使用されます。

http://example.com/homeにアクセスすると、ブラウザはサーバーにリクエストを送信し、サーバーは対応するページのコンテンツを返します。ページ上のリンクをクリックして別のルートに切り替えるとき、実際には HTML5 の履歴 API を使用して、pushState または replaceState メソッドを通じてブラウザの履歴を変更し、URL パスも変更します。

97. vueルーティングのフック機能とは何ですか?

Vue ルーティングのフック関数には次のものがあります。

beforeEach(to, from, next): ルーティングジャンプの前に実行され、グローバルルーティングインターセプトと許可制御に使用できます。

afterEach(to, from): ルートがジャンプした後に実行され、ページ統計やログレコードなどの操作を実行するために使用できます。

beforeRouteEnter(to, from, next): ルートに入る前に実行され、非同期データ取得やページ初期化などに使用できます。

beforeRouteUpdate(to, from, next): 現在のルートが更新されるときに実行され、コンポーネントの更新とデータの同期に使用できます。

beforeRouteLeave(to, from, next): 現在のルートを離れる前に実行され、データの保存とページの確認に使用できます。

98. v-if と v-show の違いは何ですか?

v-if と v-show はどちらも要素の表示と非表示を制御するために使用されます。

1. v-if は、式の値に従って要素をレンダリングするかどうかを決定します。式の値が false の場合、要素はページにレンダリングされません。式の値が true の場合、要素はページにレンダリングされます。ページの中央までレンダリングされます。

2. v-if は、切り替えるたびに要素とそのサブコンポーネントを再レンダリングするため、切り替え時に切り替えパフォーマンスのオーバーヘッドが高くなります。v-show は、式の値に基づいて要素が表示されるかどうかも決定します。

3. ただし、違いは、v-show は要素の CSS プロパティ表示の値のみを制御することです。式の値が false の場合、要素の表示プロパティは none に設定され、要素は依然としてDOM。式の値 If true の場合、要素の表示プロパティは元の値に設定され、要素は DOM 内にまだ存在します。

4. v-show には、要素が常に DOM 内に存在し、その表示と非表示を制御するだけであるため、切り替え時に追加のパフォーマンスオーバーヘッドがありません。

99. $route と $router の違いは何ですか?

$route と $router は両方とも Vue.js のルーティング関連のオブジェクトですが、機能と使用法が異なります。

$route は Vue.js のルーティング情報オブジェクトであり、ルーティングパス、パラメータ、クエリパラメータなど、現在のルーティングに関する情報が含まれています。

$route オブジェクトには、コンポーネントの this.$route を通じてアクセスできます。

$router は Vue.js のルーティングインスタンスオブジェクトで、ルーティングジャンプとナビゲーションの管理を担当します。

$router オブジェクトには、コンポーネント内の this.$router を通じてアクセスできます。$router オブジェクトを通じて、ルーティングジャンプやナビゲーションなどの操作を実行できます。

100. CSS を現在のコンポーネントでのみ機能させるにはどうすればよいですか?

CSS モジュール化 CSS モジュール化を使用すると、CSS ファイルをコンポーネントファイルから分離できます。各コンポーネントには独自の CSS ファイルがあり、CSS スタイルの競合を回避できます。React では、CSS モジュールライブラリを使用して CSS モジュール化を実現できます。

CSS モジュールを使用する手順は次のとおりです。 1. コンポーネントファイルに CSS ファイルを導入し、CSS ファイルの名前を「filename.module.css」に変更します。2. コンポーネント内でCSSクラス名を使用する場合は、「styles.クラス名」を使用して参照する必要があります。

コンポーネントでのスタイルの使用

less ファイルを使用するには、最も外側のコンテナのクラス名が同じでないことを確認するだけで済みます。

101.`<keep-alive></keep-alive>`関数の機能は何ですか?

<keep-alive></keep-alive>これは Vue.js の組み込みコンポーネントであり、その機能は、繰り返しのレンダリングと破壊を避けるためにコンポーネントインスタンスをキャッシュすることです。

コンポーネントが<keep-alive></keep-alive>タグでラップされている場合、コンポーネントは破棄されず、再度使用されるまでキャッシュされます。

これにより、コンポーネントを毎回再レンダリングして初期化する必要がなくなるため、アプリケーションのパフォーマンスが向上します。

使用中は、設定とプロパティを通じて、どのコンポーネントをキャッシュする必要があり、どのコンポーネントをキャッシュしないかを制御<keep-alive></keep-alive>できます。includeexclude

102. vue でプラグインを使用する手順は?

Vue でプラグインを使用する手順は次のとおりです。

プラグインのインストール: npm や Yarn などのパッケージ管理ツールを使用して、必要なプラグインをインストールします。

プラグインのインポート: Vue プロジェクトのエントリファイル (main.js など) にプラグインを導入します。

プラグインの登録: Vue.use() メソッドを使用してプラグインを登録します。

プラグインの使用: Vue コンポーネントのプラグインによって提供される機能を使用します。

103. vue の一般的なライフサイクルフック関数を 3 つ挙げてください。

created: インスタンスの作成直後に呼び出され、データの初期化やメソッド定義などの操作をこの段階で実行できます。

Mounted: インスタンスが DOM 要素にマウントされた直後に呼び出され、この段階で DOM 操作と非同期リクエストを実行できます。

updated: データが変更されるとコンポーネントが再レンダリングされ、この時点で updated フック関数が呼び出され、DOM 操作やデータ更新などの操作をこの段階で実行できます。

104. Vue SSRとは何ですか?

Vue SSR は、サーバー側で Vue コンポーネントを HTML 文字列にレンダリングし、それを表示するためにブラウザー側に送信するプロセスを指します。

アドバンテージ

SEO の向上: 検索エンジンクローラーは JavaScript を実行できないため、従来のクライアント側レンダリングは SEO に適していません。また、SSR はサーバー側で完全な HTML ページを生成できるため、検索エンジンによるクロールやインデックス作成に役立ちます。

最初の画面の読み込み速度の高速化: 従来のクライアント側レンダリングでは、レンダリング前に JavaScript ファイルをダウンロードする必要があるため、最初の画面の読み込み速度が遅くなります。ただし、SSR はサーバー側で完全な HTML ページを生成できるため、クライアント側のレンダリング時間が短縮され、最初の画面の読み込み速度が向上します。

ユーザーエクスペリエンスの向上: SSR はサーバー側で完全な HTML ページを生成できるため、ユーザーはページのコンテンツをより速く確認できるため、待ち時間が短縮され、ユーザーエクスペリエンスが向上します。

105. DefinedProperty に対する Proxy の利点は何ですか?

1. より柔軟: プロキシは、定義されたプロパティなどのオブジェクトの特定のプロパティのみをプロキシするのではなく、オブジェクト全体をプロキシできるため、プロキシがより柔軟になり、より多くのシナリオを処理できるようになります。

2. より強力: プロキシは関数呼び出しやコンストラクターなどのより多くの操作をインターセプトできますが、定義されたプロパティはオブジェクトプロパティの読み取りおよび書き込み操作のみをインターセプトできます。

3. より直感的: プロキシの API はより直感的で理解しやすく、使いやすいですが、定義されたプロパティの API はより複雑で、オブジェクトの内部メカニズムをより深く理解する必要があります。

4. より安全: プロキシは、オブジェクトプロパティの改ざんやオブジェクトプロパティの削除などの一般的なセキュリティ脆弱性を防ぐことができますが、定義されたプロパティではこれらの問題を完全に解決することはできません。

5. より効率的: プロキシは基礎となる実装で最適化できるため、プロキシのパフォーマンスは定義されたプロパティのパフォーマンスよりも優れていますが、定義されたプロパティの実装はより複雑で、パフォーマンスは比較的劣ります。

106. vuexとは何ですか? 使い方？どの機能シナリオで使用されますか?

Vuex は、vuejs 用に特別に設計された状態管理ライブラリです。vue アプリケーション内のすべてのコンポーネントの状態を一元管理できます。vuex の中心的な概念には、状態、突然変異、ゲッター、アクション、モジュールが含まれます

state: アプリケーションの状態データを保存します。このデータには this.$store.state を通じてアクセスできます。

突然変異: 状態内のデータを変更するために使用されます。同期操作のみを実行でき、this.$store.commit() メソッドを通じて呼び出すことができます。

アクション: this.$store.dispatch() メソッドによって呼び出すことができる非同期操作を処理するために使用されます。

getters: 状態から何らかの状態を導出するために使用されます。状態には this.$store.getters を通じてアクセスできます。

モジュール: アプリケーションの状態を複数のモジュールに分割し、それぞれに独自の状態、ミューテーション、アクション、ゲッターを持ちます。

Vuex を使用するには、まず Vue アプリケーションに Vuex をインストールする必要があります。これは、npm または CDN を通じてインポートできます。次に、Vue アプリケーションでストアオブジェクトを作成し、状態、ミューテーション、アクション、ゲッター、モジュールなどの構成アイテムを渡し、最後にストアオブジェクトを Vue インスタンスの Vue インスタンスに注入します。

Vuex を使用するシナリオは次のとおりです。 - アプリケーション内に状態データを共有する必要があるコンポーネントが複数あります。- アプリケーションには複雑な状態ロジックがあり、集中管理が必要です。- アプリケーションには多数の非同期操作があり、均一に管理する必要があります。

107. Vue2.x の応答原理?

vue2.x の応答性の原理は、データハイジャックとパブリッシュ/サブスクライブモードによって実現されます。

データハイジャック: Vue2.x は、Object.defineProperty() メソッドを通じてデータハイジャックを実装します。つまり、データがアクセスまたは変更されると、対応する操作をトリガーできます。Vue2.x では、各コンポーネントインスタンスに対応する Watcher インスタンスがあり、コンポーネント内のデータが変更されると、Watcher インスタンスはコンポーネントに再レンダリングするよう通知します。

パブリッシュ/サブスクライブモード: Vue2.x は、パブリッシュ/サブスクライブモードを使用してデータ応答性を実装します。Vue2.x では、各コンポーネントインスタンスには対応する Dep インスタンスがあり、Watcher インスタンスを格納するために使用されます。コンポーネント内のデータが変更されると、Dep インスタンスはすべての Watcher インスタンスに更新するように通知します。

具体的な実装プロセスは次のとおりです。

Vue2.x では、データハイジャックは Object.defineProperty() メソッドを通じて実装されます。つまり、データがアクセスまたは変更されると、対応する操作がトリガーされます。

コンポーネントインスタンスが作成されると、コンポーネント内のすべてのデータが走査され、対応する Dep インスタンスがデータごとに作成され、データのすべての Watcher インスタンスが Dep インスタンスに格納されます。

コンポーネント内のデータが変更されると、対応するデータの setter メソッドがトリガーされ、setter メソッドはデータに対応する Dep インスタンスに更新することを通知します。

Dep インスタンスは、そこに保存されているすべての Watcher インスタンスを走査し、更新するように通知します。5. Watcher インスタンスが更新通知を受信すると、コンポーネントの再レンダリングがトリガーされます。

108 ES5、ES6、ES2015の違いは何ですか?

ES5 は、2009 年にリリースされた JavaScript の第 5 バージョンである ECMAScript 5 の略称です。

ES6 は ECMAScript 6 の略称で、ES2015 としても知られ、2015 年にリリースされた JavaScript の 6 番目のバージョンです。

ES5 と比較して、ES6 には、アロー関数、let キーワードと const キーワード、テンプレート文字列、代入の構造化、クラスとモジュールなど、多くの新しい構文と機能が追加されています。

これらの新機能により、JavaScript はよりモダンになり、読み書きが容易になり、保守しやすくなります。

ES2015 は ES6 の別名です。これは、公開時に ECMAScript 委員会が、リリースされた年を反映して ES6 の名前を ES2015 に変更することを決定したためです。ES2015 以降、ECMAScript は毎年新しいバージョンをリリースしているため、ES6 は ES2015 の最初のバージョンとみなすこともできます。

109. let の機能は何ですか? let を var とともに使用する理由は何ですか?

let と var は両方とも変数を宣言するために使用されるキーワードですが、いくつかの違いがあります。

スコープ: var を使用して宣言された変数は関数スコープまたはグローバルスコープですが、let を使用して宣言された変数はブロックレベルのスコープです。ブロックレベルのスコープとは、if ステートメント、for ループ、関数など、中括弧内で宣言された変数が中括弧内でのみ有効であることを意味します。

変数の昇格: var を使用して宣言された変数は変数の昇格を受けます。つまり、変数は宣言前から使用できますが、値は未定義です。let を使用して宣言された変数はプロモートされません。つまり、宣言の前に使用された場合はエラーが報告されます。

繰り返しの宣言: var を使用して宣言された変数は繰り返し宣言でき、後の宣言は前の宣言をオーバーライドします。let を使用して宣言された変数は、同じスコープ内で繰り返し宣言することはできません。

110. ES6 の文字列に対する一般的なアップグレードと最適化をいくつか挙げてください。

テンプレート文字列: バックティック (`) を使用して、変数または式を挿入できる文字列テンプレートを作成すると、読みやすくなります。

文字列拡張メソッド: ES6 は、文字列操作をより便利にするために、startsWith()、endsWith()、includes()、repeat() などの多くの新しい文字列メソッドを提供します。

分割代入: 分割代入を使用すると、文字列を個々の文字または部分文字列に分割することができ、より柔軟になります。

文字列トラバーサーインターフェイス: ES6 は、for...of ループを使用して文字列内の各文字を走査できるトラバーサーインターフェイスを文字列に追加します。

Unicode のサポート: ES6 は Unicode 文字セットをサポートしており、\u または \u{} を使用して Unicode 文字を表すことができます。また、codePointAt()、String.fromCodePoint() などのいくつかの新しい Unicode 関連のメソッドも提供します。

正規表現のアップグレード: ES6 は正規表現をアップグレードし、u 修飾子を追加し、Unicode 文字の処理をサポートし、スティッキー、フラグなどの新しい正規表現メソッドも提供します。

111. ES6 の Array 配列タイプの一般的なアップグレードと最適化をいくつか挙げてください。

スプレッド演算子 (スプレッド演算子): 配列を複数のパラメーターに展開したり、複数のパラメーターを 1 つの配列に結合したりできます。

Array.from() メソッド: 配列のようなオブジェクトまたは反復可能なオブジェクトを配列に変換できます。

Array.of() メソッド: 値のセットを配列に変換できます。

find() および findIndex() メソッド: 配列内の修飾された要素を検索し、その値またはインデックスを返すことができます。

include() メソッド: 要素が配列に含まれているかどうかを判断できます。

fill() メソッド: 配列内のすべての要素を指定された値で埋めることができます。

flat() メソッドと flatMap() メソッド: ネストされた配列を 1 次元配列に拡張し、各要素に対して指定された操作を実行できます。

reduce() メソッドの初期値パラメータ: 配列が空の場合のエラーを回避するために、reduce() メソッドの初期値を指定できます。

アロー関数と forEach() メソッド: 配列の走査操作を簡素化できます。10.map()、filter()、reduce() メソッドの戻り値: これらのメソッドをチェーンで呼び出すと、コードがより簡潔になり読みやすくなります。

React およびフロントエンドの一般的な面接の質問 (これを読むだけで十分です) は継続的に更新されています。

バージョン1.0

1. React についてのあなたの理解について教えてください。特徴は何ですか?

2. Real diff アルゴリズムがどのように機能するのか教えてください。

3. React ライフサイクルのさまざまな段階について教えてください。それぞれの段階に応じた方法とは何でしょうか？

4. React の仮想 dom についてのあなたの理解について教えてください。

5. Reactフックについてのあなたの理解について教えてください。

6. React コンポーネント間で通信するにはどうすればよいですか?

7. 管理コンポーネントと非管理コンポーネントについてのあなたの理解について教えてください。応用シナリオ?

8. Connect コンポーネントの原理について教えてください。

9. React における jsx 構文シュガーの本質について話しますか?

10. redux ミドルウェアについてのあなたの理解について教えてください。一般的に使用されるミドルウェアは何ですか? 実施原理は？

11. AMD、CMD、commonJS のモジュラー仕様の違いについて教えてください。

12. package.json のバージョン番号のルールについて教えてください。

13. React jsx を実際の DOM に変換するプロセスについて教えてください。

14. @reduxjs/toolkit についてのあなたの理解について教えてください。反応 Redux との違いは何ですか?

15. React レンダー メソッドの原理、いつトリガーされますか?

16. React のパフォーマンスを最適化する手段は何ですか?

17. ネイティブ JS でスロットリング機能と手ぶれ補正機能を実装するにはどうすればよいですか?

18. koa のオニオン モデルについての理解について教えてください。

19. Webpack を使用してフロントエンドのパフォーマンスを最適化する方法について話しますか?

20. WebSocket についての理解について教えてください。

21. バインド、呼び出し、適用の違いは何ですか? バインドを実装するにはどうすればよいですか?

22. 手ぶれ補正とスロットリングとは何ですか? 違いは何ですか? どうやって達成するのか？

23. リフローと再描画を理解するにはどうすればよいですか? どのような状況で発動するのでしょうか？

24. VUE ルーティングの原理は何ですか?

25. vueの差分アルゴリズムをご存知ですか？教えて？

26. キープアライブについてのあなたの理解について教えてください。

27. レスポンシブデザインとは何ですか? レスポンシブデザインの基本原則は何ですか? 実行する方法？

28. クロスドメインの問題を解決するにはどうすればよいですか?

29. Webpack のパッケージング速度を最適化するにはどうすればよいですか?

30. SPAの最初の画面の読み込み速度が遅い問題を解決するにはどうすればよいですか?

31. React Router にはいくつのモードがありますか? 実施原理は？

32. ブラウザのアドレスバーにURLを入力してページが表示されるまでの手順は何ですか？

33. JavaScript のデータ型について教えてください。収納の違い？

34. React Hooks についてのあなたの理解について教えてください。それはどのような問題を解決しましたか?

35. 約束についてのあなたの理解について教えてください。

36. Webpack の共通ローダーについて教えてください。それはどのような問題を解決しましたか?

37. React のパフォーマンスを最適化する手段は何ですか?

38. React の setState 実行メカニズムについて教えてください。

39. Vue コンポーネント間の通信方法は何ですか?

40. React ライフサイクルの落とし穴について教えてください。それを避けるにはどうすればよいでしょうか?

41. setState は調整フェーズで何を行いますか?

42. reduxの実現原理について話し、コアコードを書きますか？

43. React合成イベントの原理は何ですか?

44. なぜ反応要素には $$type 属性があるのですか?

45. reduxミドルウェアについてのあなたの理解を教えてください。一般的に使用されるミドルウェアは何ですか? 実施原理は？

46. イベントループについての理解について教えてください。

47. フロントエンドのクロスドメインソリューション?

48. 配列の一般的なメソッドと関数、少なくとも 15 個?

49. vue の mixin についてのあなたの理解について教えてください。

50. for...in ループと for...of ループの違いは何ですか?

51. Jsのデータ型を判断する方法は何ですか? 少なくとも 5 つ名前を付けますか? 違いは何ですか?

52. Object.defineProperty() についての理解について教えてください。

53. Vue のカスタム命令を理解するためのアプリケーション シナリオは何ですか?

54. JavaScript のメモリ リークのいくつかの状況について話しますか?

55. 大きなファイルのアップロードを再開するにはどうすればよいですか?

56. ネイティブ JS はプルアップ読み込みとプルダウンリフレッシュをどのように実装しますか?

57. デバイスピクセル、cssピクセル、デバイス非依存ピクセル、dpr、ppiの違いについて教えてください。

58. BFC についてのあなたの理解について教えてください。

59. TCP に 3 ウェイ ハンドシェイクと 4 ウェイ ハンドシェイクが必要な理由を教えてください。

60. フロントエンドのパフォーマンスを最適化する手段は何ですか?

61. 浮いているフロントエンドをクリアする方法は少なくとも 3 つありますか?

62. 強力なキャッシュとネゴシエーション キャッシュとは何ですか?

63. スタックとキューについてのあなたの理解について教えてください。応用シナリオ?

64. git rebase と git merge についての理解について教えてください。違い？

65. git でよく使われるコマンドを教えてください。

66. Vueコンポーネント通信?

67. vuex についてのあなたの理解について教えてください。その原理の核となるコードを書きますか?

68. プロップとステートの類似点と相違点は何ですか? render メソッドはどのような状況で実行されますか?

69. React の 2 つの新しいフック関数は何ですか? 削除された遺書シリーズとの違いは何ですか？

70. CDNの特徴と意義は何ですか?

71. クロージャとは何ですか?またアプリケーション シナリオとは何ですか?

72. ブラウザカーネルについてのあなたの理解について教えてください。

73. フロートをクリアする方法は何通りありますか? それぞれの長所と短所は？

74. アニメーションを手動で記述する必要がある場合、最小時間間隔はどれくらいだと思いますか?またその理由は何ですか?

75. リアルDOMと仮想DOMの違いについて教えてください。長所と短所？

76. Reactのイベント機構について教えてください。

77. ファイバーアーキテクチャについてのあなたの理解について教えてください。それはどのような問題を解決しましたか?

78. React diff の原理は何ですか?

15. React レンダーメソッドの原理、いつトリガーされますか?

18. koa のオニオンモデルについての理解について教えてください。

53. Vue のカスタム命令を理解するためのアプリケーションシナリオは何ですか?

54. JavaScript のメモリリークのいくつかの状況について話しますか?

59. TCP に 3 ウェイハンドシェイクと 4 ウェイハンドシェイクが必要な理由を教えてください。

62. 強力なキャッシュとネゴシエーションキャッシュとは何ですか?

71. クロージャとは何ですか?またアプリケーションシナリオとは何ですか?

82. redux を使用するプロセスにおいて、定義されたアクションタイプの継続的な重複を防ぐにはどうすればよいですか?

94. パブリッシュ/サブスクライブモデルとは何ですか?そのコア実装コードを作成しますか?

1. イベントループについてのあなたの理解について教えてください。

4. ブラウザのプログレッシブエンハンスメントとグレースフルデグラデーションの違いについて教えてください。

9. CSS 内の要素をドキュメントフローから分離するにはどのような方法がありますか? 測位方法とその違いは何ですか?

17. Vueのカスタムコマンドフック機能とは何ですか? カスタムディレクティブで何をしましたか?