フロントエンドを解決する Interview_html/css_WEB-ITnose

Github Column

元のアドレス: こちら

フロントエンドの技術面談は、やはり非常に面倒なことがあります。とても早く繰り返されます。コンピューター サイエンスの基礎における強固な基礎が必要なだけでなく、Web パフォーマンス、ビルド システム、CSS エンジンなどについても理解する必要があります。確かに面接関連のリソースはたくさんあります (翻訳者は Front-end-Developer-Interview-Questions を推奨しています: H5BP によって作成された一連のフロントエンドの質問ですが、少し複雑で古いように感じます) が、まだありません。包括的な内容がたくさんあるので、次回のインタビューに役立つことを願って、ここで概要を説明します。

一部のリンクはブロックされています。梯子はご持参ください

面接の前に

面接の前に、まず面接の形式について尋ねてください。インタビュー。面接によっては、ホワイトボードに直接円を描くこともありますが、CoderPad などのオンライン エディターを使用してその場でコードを記述することもあります。面接の環境を事前に理解しておくことは依然として非常に重要です。さらに、一部の企業はフロントエンド関連の質問だけでなく、検索や並べ替えのアルゴリズムに関連した質問もするため、面接のテーマを理解する必要もあります。

フロントエンドの概念

HTML、CSS、JavaScript、JavaScript のデザイン パターンは、インタビューの主要な概念の一部です。リストにあるすべての項目をよく理解してください。

HTML と CSS は、フロントエンド開発におけるパンとバターのようなものです。面接では、HTML と CSS の詳細について多くの質問があり、場合によっては、ああ、その場でレイアウトを書きます。いくつかの基本概念を以下に示します。

• CSS アニメーション

• CSS スプライト

• 疑似クラス

• グリッド システム

• セマンティック マークアップ

これらの概念に加えて、いくつかの CSS について事前に知っておく必要があります。 SASS や LESS などのプロセッサとその利点。さらに、BEM や OOCSS などの CSS 名前空間に関する知識を知っておくことも非常に役立ちます。 CSS に関するもう 1 つの重要な点は、CSS のベスト プラクティスです。ここで Gada は、Medium が最新のフレームワークを更新および反復する方法を含む、Medium が提供する実践ガイドを推奨しています。

記事の前半で、面接官によっては、HTML と CSS を使用して一部のレイアウト (CodePen での実践など) を再構築するよう求められる場合があることを思い出しました。また、Dribbble のいくつかの例を参照することもできます。最後に、フロントエンド エンジニアとして、私たちはエディターで一部のコードを変更し、ブラウザーで最終的な効果を確認することがよくあります。ただし、面接中はこれが正しくできないことが多いため、面接の準備をするときは、ディスプレイを見ずにコードをデバッグできるように最善を尽くす必要があります。

HTML と CSS がフロントエンド開発の基本である場合、JavaScript はそのナイフです。一般に、面接官は面接全体で JavaScript の知識について質問することに多くの時間を費やします。これらの質問には次の側面が含まれる場合があります。

• プロトタイプの継承

• スコーピング

• クロージャ

• イベントループ

• イベントバブリング

• 適用、呼び出し、バインド

• コールバックとプロミス

• 変数と関数のホイスティング

• カリー化

JavaScript の問題に直面したとき、問題がどの概念に属するかを理解するのに役立ちます。適切な解決策をすぐに見つけることができます。この gada 、 this gada 、および this gada で JavaScript の知識をテストできます。

デザイン パターンは、再利用可能なソリューションで一般的な問題を解決するのに役立ちます。 以下に、一般的なデザイン パターンをいくつか示します。

• デコレータ

• 工場

• シングルトン

• 公開モジュール

• ファサード

• オブザーバー

• MVC 、 MVP 、 MVVM

Except これらの一般的な JavaScript 設計パターンに加えて、また、一般的な JavaScript フレームワークにも精通している必要があります。もちろん、これは新しいフレームワークを学ぶ必要があるという意味ではありませんが、Xiami のフロントエンド チームがこれらのフレームワークを使用することを理解できなければなりません。さらに、インタビューしようとしているチームが React+Flux や Angular などの一般的なフレームワークを使用している場合は、事前にドキュメントを読んでアーキテクチャを理解する必要があります。

コンピュータ サイエンス

一部の企業は、フロントエンド開発者を採用する前にソフトウェア エンジニアを採用します。つまり、これらの企業は面接官にソフトウェア設計原則、スケーラブルなコード アーキテクチャ、およびこれらの分野の知識をテストすることを期待します。 。ただし、面接官は通常、データ構造やアルゴリズムなどを理解するように注意します。それ以外の場合は、当面この部分を無視してかまいません。コンピューター サイエンスのバックグラウンドがない場合でも、ここで説明する概念のほとんどは簡単に理解できるため、緊張する必要はありません。

ここでは、常に念頭に置いておくべき一般的なデータ構造をいくつか示します。机上で話すだけでなく、それを実践する場所を見つけてください。単体テストにあまり慣れていない場合は、Mocha などのテスト フレームワークを選択してデータ構造アルゴリズムをテストできます。

• リンクリスト

• ハッシュテーブル

• スタック

• キュー

• ツリー (バイナリ ツリーとヒープ)

• グラフ

注:グラフの知識という点では、幅優先ではなく深さ優先のトラバースを実装する方法を理解する必要があります。データ構造を学習する場合は、SanFoundry を参照してください。ここでのコードは例としてすべて Java で示されていますが、簡単に JavaScript に書き直すことができます。

データ構造に自信が持てるようになったら、基本的な並べ替えアルゴリズムについて学ぶことができます。次のリストを参照してください。まず、アルゴリズムの時間と空間の計算量、つまり時間と空間の計算量の基本概念を理解する必要があります。

• 二分検索

• バブルソート

• 挿入ソート

• 結合ソート

• クイックソート

• 選択ソート

データを理解した後構造とアルゴリズムの後は、Leetcode で練習することができ、JavaScript の技術的な問題についても確認することができます。

終わります

皆さんの幸運を祈ります~