2018 年最新のフロントエンド面接の質問 6

今回は、2018 年の最新のフロントエンド面接の質問をお届けします。フロントエンドの仕事に面接が不可欠な部分であることはわかっています。このフロントエンド面接のよくある質問の分類と要約の目的は、面接での質問を克服できるようにすることです。フロントエンド面接における大きな困難。見てみましょう。

[関連する推奨事項: フロントエンド面接の質問 (2020)]

1. Web サイトのファイルとリソースをどのように最適化しますか?

1. httpリクエストの数をできるだけ減らし、CSS、JS、画像を結合します
2. CDNを使用して通信距離を削減します
3. Expire/Cache-Controlヘッダーを追加します
5. . css をページの上部に配置します
6. スクリプトをページの下部に配置します
7. css と js を外部ファイルに配置します

10. . CSS、JS を最小限に抑え、ファイル サイズを削減します

11. リダイレクトを回避します
13. エンティティ タグ ETag を設定します
14. AJAX キャッシュを使用して、Web サイトのコンテンツをローカルに更新します
複数のドメイン名を使用して Web サイトのリソースを提供する方が効率的ですか?ブラウザは 1 つのドメイン名から同時にいくつのリソースをダウンロードできますか?

1. 静的コンテンツと動的コンテンツは別のサーバーに保存され、リクエストの処理には別のサーバーが使用されます。動的コンテンツの処理では、動的コンテンツのみが処理され、効率を向上させるために他の処理は行われません。これにより、CDN (コンテンツ配信ネットワーク) のキャッシュがより便利になります
2. G URL:
https: を選択するだけです。 / /

lh4.googleusercontent.com/- si4dh2myPWk/T81YkSiAI/AAAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg、以前の lh4 を lh3、lh6 などに置き換えても、マップなどに必要なファイルにアクセスできます。画像をダウンロードするためのサイト、これは非常に重要です)

3. 帯域幅を節約するため、Cookie は転送されません

3. 簡単なスライドショー効果ページを作成してください
Web 標準と標準設定組織の重要性の理解について。 Web 標準と標準設定組織はすべて、Web の開発をより「健全」なものにすることを目的としています。第一に、ブラウザ開発者が統一標準に従うように制約され、第二に、Web サイト開発者が制約され、開発の困難さと開発コストが軽減されます。 SEO も向上し、簡単に実行でき、コードの誤用によるさまざまなバグやセキュリティ上の問題が発生せず、最終的に Web サイトの使いやすさが向上します。

5. CSSアニメーションと

JavaScript

アニメーションの長所と短所を説明してください。

JS アニメーション

欠点: (1) JavaScript はブラウザのメイン スレッドで実行され、メイン スレッドで実行する必要がある他の JavaScript スクリプト、スタイル計算、レイアウト、描画タスクなどが干渉する可能性があります。スレッドがブロックされると、フレームが失われます。

(2) コードの複雑さは CSS アニメーションよりも高いです

利点: (1) JavaScript アニメーション制御機能が非常に強力で、アニメーションの再生プロセス中にアニメーションを制御できます: 開始、一時停止、再生、終了、キャンセルも全て可能です。

(2) アニメーション効果は css3 アニメーション よりも豊富です。カーブの動き、衝撃フリッカー、視差スクロール効果などの一部のアニメーション効果は JavaScript アニメーションでのみ完成できますが、CSS3 には互換性の問題があります。ほとんどの場合、互換性がありません。 問題点
CSS アニメーション
欠点: (1) 実行中のプロセス制御が弱く、イベント バインディング
コールバック関数
をアタッチできません。 CSS アニメーションは一時停止のみ可能で、アニメーション内の特定の時点を見つけることができません。アニメーションを途中で反転することはできません。タイム スケールを変更することはできません。特定の位置にコールバック関数を追加したり、再生イベントをバインドしたりすることはできません。また、進行状況レポートはありません
(2) )コードが冗長です。 CSS を使用してもう少し複雑なアニメーションを実装したい場合、CSS コードは最終的に非常に複雑になります。 利点：（1）ブラウザはアニメーションを最適化できます。 ブラウザは requestAnimationFrame と同様のメカニズムを使用します。 setTimeout や setInterval と比較して、アニメーションを設定するための requestAnimationFrame の主な利点は次のとおりです: 1) requestAnimationFrame はすべての DOM 操作を各フレームに集中させ、1 回の再描画またはリフローで完了します。この間隔は、ブラウザのリフレッシュ レート (通常は 60 フレーム/秒) にほぼ準拠します。 2) requestAnimationFrame は、非表示または非表示の要素で再描画またはリフローしません。これは、当然、CPU、GPU、メモリの使用量が少なくなります。ハードウェア アクセラレーションの使用を強制する (GPU を通じてアニメーションのパフォーマンスを向上させる)

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
関連記事:

2018年最新のフロントエンド面接の質問2

2018年最新のフロントエンド面接の質問3

2018年最新のフロントエンド面接の質問4

フロント-インタビューの質問終了 質問 5

以上が2018 年最新のフロントエンド面接の質問 6の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。