古典的なインタビューの共有

0. Webフロントエンド面接での人事の目標は何ですか?

人事の側面は、多くの場合、才能の質を管理するための最後のステップです。以前の技術的な側面とは異なり、人事の側面は、従業員のリスクと基本的な従業員の質の評価に焦点を当てる傾向があります。

雇用リスク評価、この部分は、候補者が安定しているかどうか、それが追加の管理リスクをもたらすかどうか、そしてそれが仕事に有能であるかどうかを評価することです。たとえば、頻繁な転職は安定性リスクをもたらします。HRはこれを慎重に検討します。 。ポイント、例えば、インタビューでは、候補者は「強化」の可能性を示しています。HRは、候補者が他の人と協力したり、経営に従わなかったりすることが困難になり、経営リスクをもたらすことを心配します。たとえば、州は明確に規定していますが採用中であること性別や年齢などによる差別があってはなりませんが、年配の既婚女性は近い将来出産する可能性があり、長期の出産休暇をとる可能性があり、人事部もアセスメント。

スタッフの質の評価、このパートでは、候補者が職場の基本的な資質を持っているかどうか、基本的なコミュニケーションスキルを持っているかどうか、チームスピリットと協力感を持っているかどうかなどを評価します。 HRによって疑念を生み出す能力。

したがって、人事部とのコミュニケーションでは、着実で前向きで楽観的な態度を維持し、レトリック、負のエネルギー、衝動などの性格上の欠陥を露呈しないようにしてください。

1.自己紹介の準備方法は?

実際、最善の方法と最も愚かな方法は、自己紹介を書き留めることです。この自己紹介は、いくつかの重要な要素を反映している必要があります。テストの前に数回通過するだけで、自己紹介の内容は次のようになります。スムーズに表現されます。それだけです。レッスンを暗記するのと同じことはしないでください。

自己紹介の時間は1〜3分に設定するのが最善です。この時間は、試験官が履歴書を読むのに十分です。試験官が履歴書を読み終えたら、自己紹介に従って質問するのが最善です。質問。快適なペースで、立ち上がって10分間のスピーチを開始しないでください。面接官は待っている間恥ずかしい思いをします。このような長い長さは、自己紹介が流暢でなければならないことを示しています。

2.自己紹介を意図的にガイドする方法は?

あなたの自己紹介が現在のアカウントと同じで、焦点が合っていない場合、インタビュアーは次の質問に答えることができないため、実際にはそれを行うのは困難です...

少し指導をすれば、「自己紹介でプロジェクトのことを言って、なかなか苦労したのに、それを乗り越えて、効果はどれくらいいいの?ちょっと待って」など、ほとんどの面接官が迎えに来てくれます。もし私がインタビュアーだったら、「xxプロジェクトのxxの難しさをどのように解決したのですか?」と間違いなく尋ねます。

面接官の目的は、候補者の能力を調べ、候補者を評価することです。したがって、候補者が何が得意で、それがポジションに合っているかを知る必要があります。ほとんどの場合、面接官はあなたに非常に満足しています。意図的または非意図的なガイダンスこのようにして、双方向のコミュニケーションと評価は、候補者を故意に困難にするのではなく、スムーズになります。

3.自己紹介の現在の位置のテクノロジースタックのマッチングにどのように焦点を合わせるのですか?

面接の履歴書にはさまざまな技術スタックが含まれている場合がありますが、自己紹介プロセスでは、現在のポジションの技術要件に一致する必要があります。

たとえば、現在、モバイルH5フロントエンド開発のポジションについて面接を行っており、自己紹介でモバイルフロントエンドでの経験を強調することに重点を置いています。現時点では、使い方を簡単に理解できます。会社のWebプロジェクトをサポートするノード。賢明ではありません。

4.自己紹介に欠かせない要素は何ですか?

最終的な分析では、自己紹介はウォームアップの演習であるため、多くのスペースを占有しないでください。これにより、候補者の集中力の欠如と優れたコミュニケーションスキルの欠点も明らかになりました。

ただし、いくつかの重要な情報を反映する必要があります。個人的には、次の情報が必要です。

個人情報:少なくともあなたの名前、役職、勤務年数を示し、卒業時に学歴を紹介する必要があります。前の所有者が大規模な工場(BATなど)である場合、あなたの学歴はハイライト(985または博士号取得後、または北京郵電大学のような強力なCS学校に類似)他にガールフレンドがいるかどうか、あなたが一人であるかどうかにかかわらず、スペースを取らないでください。このパートでは、「あなたは誰ですか?」に焦点を当てます。

技術的能力:独自のテクノロジースタックを簡単に紹介します。単に使用したり、いくつかのデモを書いたり、ドキュメントを読んだりした、いわゆる「テクノロジースタック」については言及しないでください。後で尋ねられたら、自分自身に問いかけるのは恥ずかしいことです。このセクションの焦点は「あなたは何をしますか?」です。

スキル:パフォーマンスの最適化、高い同時実行性、システムアーキテクチャの設計、コミュニケーションと調整のスキルなど、得意なテクノロジーの導入に焦点を当てます。誇張せず、事実から真実を探ります。これがその後の調査の焦点です。 。このパートでは、「何が得意ですか?」に焦点を当てます。

5. HTML5フロントエンドとは何ですか?

HTML5は、最新バージョンのHTML(Hypertext Markup Language)であり、インターネットのコアテクノロジーであるワールドワイドウェブのコンテンツを構築および表示するための言語です。具体的には、HTML5には多くの新しい構文機能が含まれています。新しい要素には次のものが含まれます

6. HTML5アプリケーションキャッシュとブラウザキャッシュの違いは何ですか?

新しいHTML5仕様により、ブラウザは、クライアントに接続するときに、HTMLファイル、画像、CSS、JavaScriptなどのWebサイトアセットの一部またはすべてをプリフェッチできます。このタイプのコンテンツを取得するために、ユーザーが以前にこのコンテンツにアクセスする必要はありませんでした。つまり、アプリケーションキャッシュは、まったくアクセスされていないページをプリフェッチできるため、通常のブラウザキャッシュでは使用できません。ファイルをプリフェッチするとサイトのパフォーマンスが向上し、ユーザーは最初のブロードバンドを使用してこれらのコンテンツをダウンロードできます。

7. Web標準とW3Cの理解と知識?

(1)Web標準では、書き込みタグは閉じて小文字にする必要があり、ランダムにネストしないようにする必要があります。これにより、検索ロボットがWebコンテンツを検索する可能性が高くなります。

(2)構造と動作、構造とパフォーマンスの分離を実現し、ページのレンダリング速度を向上させ、ページのコンテンツをより高速に表示するには、外部リンクcssおよびjsスクリプトを使用することをお勧めします。

(3)スタイルとタグの分離、より合理的なセマンティックタグ。これにより、より多くのユーザーがコンテンツにアクセスでき、より幅広いデバイスからコンテンツにアクセスでき、コードとコンポーネントが少なくなり、メンテナンスコストが削減されます。および改訂。より便利。

(4)ページの内容を変更する必要がなく、内容をコピーせずに印刷版を提供し、ウェブサイトの使いやすさを向上させることができます。w3cによって確立されたウェブ標準に従って、ユーザーが読んで、Web開発者をより便利にする。良好なコミュニケーション。

8. HTMLとXHTMLの違いは何ですか?

HTMLを標準化するために、W3CはXMLと組み合わせてXHTML 1.0標準を策定しました。この標準は新しいタグを追加せず、XMLの要件に従ってHTMLを標準化するだけです。1)XHTMLのタグは正しくネストする必要があり、HTMLの一部のタグは互いに誤ってネストされる可能性があります。2)XHTMLのすべてのタグを閉じる必要があります。3)XHTMLでの仕様定義:タグ名と属性では大文字と小文字が区別され、すべてのXHTMLタグ名では小文字を使用する必要があります。4)XHTMLドキュメントにはルート要素が必要です。5)XHTMLのタグの属性値は、二重引用符 "を使用する必要があります。

9.新しいHTML5ドキュメントタイプと文字セットは何ですか?

HTML5ドキュメントタイプHTML5はUTF-8文字セットを使用します

10.互換性の問題に対処する2つの方法は?

1)IE6 / IE7 / IE8は、documentメソッドによって生成されたタグをサポートし、この機能を使用して、これらのブラウザーがHTML5の新しいタグをサポートするようにします。

2)html5shimフレームワークを使用します。また、DOCTYPE宣言の方法は、HTMLマークとHTML5マークを区別するための重要な要素です。また、新しく追加された構造要素と関数要素によって区別できます。

11.最新のHTML5標準のAPIとは何ですか?

最新のHTML5標準のAPIリストには、主にCanvas、時限メディア再生、オフラインストレージデータベース、ドキュメント編集、ドラッグアンドドロップ、クロスドキュメントメッセージング、ブラウザ履歴管理、MIMEタイプ、プロトコルハンドラ登録が含まれています。その中で、Canvasは、HTMLコードで定義された高さと幅の属性を持つ描画可能な領域で構成されています。JavaScriptコードは、他の一般的な2D APIと同様に、描画関数の完全なセットを介してこの領域にアクセスできるため、動的なグラフィック生成が可能です。Canvasの使用目的には、グラフィックの作成、アニメーション、ゲーム、画像合成などがあります。

12. CSS、JSコード圧縮、およびコードCDNホスティング、画像統合。

(1)CSS、JSコード圧縮:

gulpのgulp-uglify、gulp-minify-cssモジュールを使用して完了することができます。webpackのUglifyJsPlugin圧縮プラグインを使用して完了することができます。

(2)CDN:

コンテンツ配信ネットワーク(CDN)は、戦略的に展開されたシステム全体であり、分散ストレージ、負荷分散、ネットワークリクエストのリダイレクト、コンテンツ管理の4つの要素が含まれています。主な機能は、ローカルキャッシュアクセラレーション、ミラーリングサービス、リモートアクセラレーション、および帯域幅の最適化です。主要なテクノロジーは、コンテンツの公開、コンテンツのルーティング、コンテンツの交換、およびパフォーマンス管理です。CDN Webサイトアクセラレーションは、コンサルティングに重点を置いたWebサイトに適しています。CDNは、Webサイトサーバーではなく、ドメイン名を高速化します。CDNおよびミラーサイトでは、訪問者が訪問するミラーサイトを手動で選択する必要はありません。CDNを使用した後、WebサイトはCDNを使用して、変更を加えることなく加速効果を得ることができます。CDNを通過した後に表示されるWebページがまだ古いWebページである場合は、URLプッシュサービスを使用して問題を解決できます。新しいWebページと画像はURLプッシュを必要としません。動的なWebページは、高い即時性を必要とするWebページや画像をキャッシュせずに使用できます。CDNは、gitまたはSVNを介して管理できます。

(3)画像統合

Webサイトの読み込み時間を短縮する最も効果的な方法の1つは、WebサイトのHTTPリクエストの数を減らすことです。この目標を達成するための効果的な方法は、CSSスプライトを使用することです。複数の画像を1つの画像に統合し、CSSを使用して配置します。欠点は、保守性が悪いことです。Baiduのfis / webpackを使用して、スプライトを自動的に管理できます。

13.webpackを使用してコードをサーバーにアップロードし、トランスコードテストを行うにはどうすればよいですか?

(1)コードのアップロード:

sftp-webpack-pluginを使用できますが、サブフォルダーが抽出されるため、エレガントではありません。gulp + webpackを使用して達成できます。

(2)トランスコーディングテスト

webpackはbabelを使用してES6をトランスコードし、ブラウザのテスト用にdevtool: "source-map"を開きます。ユニットテストにはカルマまたはモカを使用します。

14.プロジェクトのオンラインプロセスは何ですか?

(1)プロセスの推奨事項

  • オンライン開発環境をシミュレートする

ローカルリバースプロキシオンライン実環境開発で十分です。(apache、nginx、nodejsを実装できます)

  • オンラインテスト環境をシミュレートする

実際、オンラインテスト環境をシミュレートするには、実際のデータを備えたテストマシンが必要です。条件がない場合は毎日セットアップすることをお勧めします。オンラインデータを使用してテストするだけですが、プログラムの部分はテスト環境。毎日が最高です。

  • リンク可能なテスト環境

継続的に調整できるテスト環境には2つのタイプがあります。1つは、開発とテストがローカルエリアネットワークセグメントで行われ、ホストを直接バインドできることです。ネットワークセグメントに属していない場合は、各人に仮想テストマシンが割り当てられ、誰もができる会社のイントラネットに配置されます。アクセス。コードは直接配布されます。それだけです。

  • 自動化されたオンラインシステム

Jenkinsは、自動化されたオンラインシステムとして使用できます。そうでない場合は、自分で簡単なオンラインシステムを構築できます。原則として、オンラインになるたびに最新のトランクまたはマスターを抽出し、タグを作成し、タイムスタンプを付けて、cdnに配布します。インターフェイスには、タグ付け、タグへのロールバック、およびデプロイの2つの機能しかありません。

  • フロントエンドおよびバックエンドの開発プロセスに適しています

開発プロセスは、会社が使用するツール、構築、およびフレームワークに基づいています。原則は、互いに干渉することなく、独立して分散および開発することであり、継続的な調整中にそれに結び付けることができるホストを持っているだけです。

(2)シンプルで操作可能なプロセス

  • コードはgitによって管理され、新しい要件、ブランチ開発、トランクリリースのために新しいブランチが作成されます

  • オンラインに接続し、シンプルなオンラインシステムに従ってください。前のセクションを参照してください。

  • gulp + webpack、ワンクリック統合を介してパブリッシングシステムに接続し、ローカルでの元のコード開発のみを気にします

  • ローカル環境はwebpackを介したリバースプロキシサーバーです

  • Linuxに基づいてローカルテストマシンをビルドし、ビルド+プッシュ機能を自動的に完了します

15.エンジニアリングはどのように管理されていますか?

gulp和webpack

16、gitの一般的に使用されるコマンド

ワークスペース:ワークスペース

インデックス/ステージ:一時保管域

リポジトリ:倉庫エリア(またはローカル倉庫)

リモート:リモートウェアハウス

17.webpackとgulpの比較

Gulpは、フロントエンド開発プロセスを標準化し、フロントエンドとバックエンドの分離、モジュラー開発、バージョン管理、ファイルのマージと圧縮、モックデータなどの機能を実現するためのフロントエンド自動構築ツールです。「Gulpは製品の組立ラインのようなものです。製品全体を組立ラインで一から管理します。組立ラインで製品を管理できます。」また、Gulpはタスクを使用して開発プロセス全体を管理します。 。ビルド。

Webpackは現在、最も人気のあるフロントエンドリソースのモジュラー管理およびパッケージングツールです。依存関係とルールに従って多くの緩いモジュールを、実稼働環境のデプロイメントを満たすフロントエンドリソースにパッケージ化できます。オンデマンドでロードされたモジュールを分離し、必要に応じて非同期にロードすることも可能です。ローダーの変換により、CommonJsモジュール、AMDモジュール、ES6モジュール、CSS、画像、JSON、Coffeescript、LESSなど、あらゆる形式のリソースをモジュールと見なすことができます。

GulpとWebpackの機能実現の比較:基本的な概念、ローカルサーバーの起動、sass / lessプリコンパイル、モジュラー開発、ファイルのマージと圧縮、モックデータ、バージョン管理、コンポーネント管理の8つの側面からGulpとWebpackを比較します。

18. webpackパッケージファイルが大きすぎる場合はどうすればよいですか?

webpackはすべてのファイルを1つのJSファイルにパックするため、小さなプロジェクトであっても、パッケージ化されたファイルは非常に大きくなります。不要なプラグインの削除、サードパーティライブラリの抽出、コード圧縮、コードセグメンテーション、およびキャッシュの設定から最適化を開始できます。

19.他人にあなたの写真を盗まれたくないのですが、サーバーリソースにアクセスした場合はどうすればよいですか?

現在一般的に使用されている2つの主なヒル防止方法があります。

(1)リファラーの設定:コードを書きたくないユーザーだけでなく、開発したいユーザーにも適しています

(2)署名付きURL:開発したいユーザーに適しています

20.スプライトとbase64のどちらを選択するのですか?

cssスプライトは、一部の小さなアイコンには特に使用されておらず、1つのボリュームは10Kを超えるなど、わずかに大きくなっています(厳密な定義はありません)。

小さなアイコンに使用されるBase64は(cssスプライトと比較して)小さいので、いくらでも構いません。フォントアイコンは、他の人が作成したアイコンライブラリで使用する方が便利です(自分で作成したものもいくつかあります)。彼のアイコンはモノクロでのみ使用でき、アイコンは1色でのみ使用できます。

21. webpackはどのようにサードパーティライブラリを導入しますか?

例としてjQueryを取り上げます。

エントリ:{

ページ: 'path / to / page.js'、

jquery: 'node_modules / jquery / dist / jquery.min.js'

}

新しいHtmlWebpackPlugin({

ファイル名: 'index.html'、

テンプレート: 'index.html'、

注入:true、

チャンク:['jquery'、 'page'] //スクリプトタグを順番に挿入します

})

22.CSSボックスモデルについて説明してください。

CSS cssボックスモデルはボックスモデルとも呼ばれ、コンテンツ、パディング、ボーダー、マージンの要素が含まれています。

23. XHTMLとHTMLの違いは何ですか?

XHTMLはhtmlのバージョン4.0です。その中で、主な違いは次のとおりです。XHTML要素は正しくネストする必要があります。

XHTML要素は閉じている必要があり、タグ名は小文字である必要があり、XHTMLドキュメントにはルート要素が含まれている必要があります。

24.CSSリセットの役割と目的を説明する

CSSリセットとは、ブラウザのデフォルトスタイルをリセットすることを指します。これは、ブラウザが多数あり、ブラウザごとに独自のデフォルトスタイルがあり、複数のブラウザでページが異なって表示されるためです。そのため、いくつかの処理を行う必要があります。表示は各ブラウザで一貫しているため、CSSのリセットが必要です。

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

プロジェクトリソースの半分は分類および管理され、jsは下から圧縮され、CSSは上で圧縮され、CDNキャッシングが使用されます。

26.イベントバインディングと通常のイベントの違いは何ですか?

イベントを追加する一般的な方法は、複数のイベントの追加をサポートしていません。一番下のイベントは上記をカバーし、イベントバインディング(addEventListener)メソッドは複数のイベントを追加できます。

27. IEおよび標準の下で互換性のある書き込み方法は何ですか?

スクリプトの違い、CSSの違い、およびマウスの現在の位置の取得とウィンドウの高さと幅の取得の違い。

28. Doctypeは何をしますか?厳密モードと無差別モードを区別する方法は?それらの意味は何ですか?

(1)宣言は、文書の上部、ラベルの前にあります。このドキュメントの解析に使用するドキュメントタイプの指定をブラウザのパーサーに指示します。

(2)ストリクトモードの組版とJS動作モードは、ブラウザがサポートする最高水準で動作します。

(3)無差別モードでは、ページは下位互換性のない方法で表示されます。古いブラウザの動作をシミュレートして、サイトが機能しないようにします。

(4)DOCTYPEの形式が存在しないか正しくない場合、ドキュメントは無差別モードで表示されます。

29.インライン要素とは何ですか?ブロックレベル要素とは何ですか?

(1)CSS仕様では、各要素には要素のタイプを決定するための表示属性があり、各要素にはデフォルトの表示値があります。たとえば、divのデフォルトの表示属性値は「block」であり、これは「 block-level "element; spanデフォルトの表示属性値は" inline "で、これは" inline "要素です。

(2)インライン要素は次のとおりです。abspanimg input select strong(強調トーン)ブロックレベルの要素は次のとおりです。divulolli dl dtdd h1 h2 h3 h4 ... p

30. linkと@importの違いは何ですか?

(1)リンクはXHTMLタグに属し、@ importはCSSによって提供されます。

(2)ページがロードされると、リンクも同時にロードされ、@ importによって参照されるCSSは、ページがロードされるまで待機してからロードされます。

(3)インポートはIE5より上でのみ認識でき、リンクはXHTMLタグであるため、互換性の問題はありません。

(4)リンクスタイルスタイルの重みが@importの重みよりも大きい。

31.ブラウザのカーネルは何ですか?

IEブラウザTridentのカーネル、MozillaのGecko、ChromeのBlink(WebKitのブランチ)、Operaカーネルは元々Prestoでしたが、現在はBlinkです。

32. HTML5の新機能は何ですか?HTML5の新しいタグのブラウザ互換性の問題に対処する方法は?HTMLとHTML5を区別する方法は?

HTML5はSGMLのサブセットではなくなりました。これは主に、画像、場所、ストレージ、マルチタスクなどの機能の追加に関するものです。

メディアの再生に使用されるペインティングキャンバスのビデオ要素とオーディオ要素は、データを長期間保存するためにlocalStorageにオフラインでローカルに保存され、ブラウザを閉じた後もデータが失われることはありません。sessionStorageのデータは、ブラウザが閉じられた後に自動的に削除されます。記事、フッター、ヘッダー、ナビゲーション、セクションフォームコントロール、カレンダー、日付、時刻、メール、URL、新しいテクノロジーの検索webworker、websockt、Geolocationなどのより優れたセマンティクスを持つコンテンツ要素

33.セマンティクスをどのように理解しますか?

適切なラベルで適切なことをしてください!

HTMLセマンティクスは、ブラウザと検索エンジンの分析を容易にするためにページのコンテンツを構造化することです。また、CCSのスタイルなしでドキュメント形式で表示され、読みやすいです。検索エンジンのクローラーは、タグを使用して各キーワードのコンテキストと重みを決定します。これは、SEOに役立ちます。ソースコードを読む人がウェブサイトをセクションに分割しやすくすることで、読み、維持し、理解するのに便利です。

34. HTML5をオフラインで保存する方法はいくつありますか?

LocalStorageはデータを長期間保存し、ブラウザを閉じてもデータが失われることはありません。sessionStorageデータは、ブラウザを閉じた後に自動的に削除されます。

35. iframeの欠点は何ですか?

iframeはメインページのOnloadイベントをブロックします。

iframeとメインページは接続プールを共有し、ブラウザには同じドメインの接続に制限があるため、ページの並列読み込みに影響します。iframeを使用する前に、これら2つの欠点を考慮する必要があります。iframeを使用する必要がある場合は、上記の2つの問題を回避できるように、javascriptを使用してsrc属性値をiframeに動的に追加することをお勧めします。

36. Cookie、sessionStorage、localStorageの違いを説明してください。

Cookieは、ブラウザとサーバーの間でやり取りされます。SessionStorageとlocalStorageには、sessionStorageとlocalStorageよりも多くのストレージスペースはありません。sessionStorageとlocalStorageには、よりリッチで使いやすいインターフェイスがあります。sessionStorageとlocalStorageには、別々のストレージスペースがあります。

37. nullとundefinedの違いは何ですか?

Nullは「なし」を表すオブジェクトであり、値に変換されると0になります。未定義は「なし」を表す元の値であり、値に変換されるとNaNになります。

宣言された変数が初期化されていない場合、変数のデフォルト値は未定義です。

Nullは、まだ存在しないオブジェクトを示すために使用され、関数が存在しないオブジェクトを返そうとすることを示すためによく使用されます。

undefinedは「欠落値」を意味します。つまり、ここに値があるはずですが、まだ定義されていません。一般的な使用法は次のとおりです。

(1)変数が宣言されているが割り当てられていない場合、それはundefinedと等しくなります。

(2)関数が呼び出されたときに、提供する必要のあるパラメーターが指定されていない場合、パラメーターはundefinedに等しくなります。

(3)オブジェクトが割り当てられていない場合、このプロパティの値は未定義です。

(4)関数に戻り値がない場合、デフォルトではundefinedを返します。

Nullは「オブジェクトがない」ことを意味します。つまり、ここには値がないはずです。一般的な使用法は次のとおりです。

(1)関数のパラメータとして、関数のパラメータがオブジェクトではないことを意味します。

(2)オブジェクトプロトタイプチェーンの終わりとして。

38.IEとfinefoxの違いを一覧表示します

違いは次のとおりです。

(1)IE支持currentStyle;Firefox使用getComputStyle。

(2)IE使用innerText;Firefox使用textContent。

(3)在透明度滤镜方面,IE使用filter:alpha(opacity=num);Firefox使用-moz-opacity:num。

(4)在事件方面,IE使用attachEvent:Firefox使用addEventListener。

(5)对于鼠标位置:IE使用event.clientX;Firefox使用event.pageX。

(6)IE使用event.srcElement;Firefox使用event.target。

(7)要消除list的原点,IE中仅须使margin:0即可达到最终效果;Firetox中需要设置margin:0、padding:0和list-style:none。

(8)CSS圆角:IE7以下不支持圆角。

39. DOM操作でノードを作成、追加、削除、置換、挿入、および検索するにはどうすればよいですか?

具体方法如下。

(1)通过以下代码创建新节点。

createDocumentFragment()//创建一个DOM片段

createElement()//创建一个具体的元素

createTextNode()//创建一个文本节点

(2)通过以下代码添加、移除、替换、插入节点。

appendChild()

removeChild()

replaceChild()

insertBefore()//并没有insertAfter()

(3)通过以下代码查找节点。

getElementsByTagName()//通过标签名称查找节点

getElementsByName()//通过元素的name属性的值查找节点(IE容错能力较强,会得到一个数

//组,其中包括id等于name值的节点)

getElementById()//通过元素Id查找节点,具有唯一性

40、パフォーマンスの最適化

つまり、Optimizeは、システムの実行を高速化し、システムの正確性に影響を与えることなく、特定の機能を完了するために必要な時間を短縮することです。では、パフォーマンスを向上させる方法は?次の方法があります。

1.httpリクエストの数を減らします

応答時間の80%は、Webコンテンツ(画像、スタイルシート、JavaScript、スクリプト、フラッシュなど)のダウンロードに費やされます。リクエスト数を減らすことは、応答時間を短縮するための鍵です!ページデザインを簡素化することでリクエスト数を減らすことができますが、より多くのページコンテンツに次の手法を使用できます。

2.DNSクエリの数を減らします

DNSクエリも応答時間を消費します。Webページのコンテンツが異なるドメインからのものである場合(たとえば、開いている広告が埋め込まれている場合、外部の画像またはスクリプトが参照されている場合)、クライアントがこれらのドメインを解決するのに一定の時間がかかります。初めて。DNSクエリの結果は、一定期間ローカルシステムとブラウザにキャッシュされるため、DNSクエリは通常、最初の訪問の応答速度に影響します。

3.キャッシュAjax

Ajaxは、Webコンテンツを非同期でダウンロードするのに役立ちますが、一部のWebコンテンツが非同期であっても、ユーザーはその結果を待っています。たとえば、ajaxの戻りは、ユーザーの連絡先のドロップダウンリストです。そのため、ajaxの応答速度を向上させるために、次のルールを適用するように注意を払う必要があります。

4.遅延読み込み

ここで説明する遅延読み込みでは、Webページの最初の読み込みに必要なコンテンツの最小セットを知る必要があります。残りのコンテンツは、遅延読み込みコレクションにプッシュできます。

Javascriptは、コンテンツの遅延読み込みによく見られます。より根本的なアプローチは、Webページを開発するときにWebページが基本的にJavascriptなしで機能することを確認し、スクリプトのロードを遅らせていくつかの高度な機能を完了することです。

41.イベント委任とは何ですか?

分析:イベント委任は、基本的にブラウザーのイベントバブリングのメカニズムを使用します。バブリングプロセス中にイベントが親ノードにアップロードされ、親ノードがイベントオブジェクトを介してターゲットノードを取得できるため、子ノードのリスナー関数を親ノードで定義し、親のリスナー関数を定義できます。ノードは複数の子要素を均一に処理します。この方法はイベントプロキシと呼ばれます。

イベントプロキシを使用すると、リスナーイベントを各子要素にバインドする必要がなくなり、メモリの消費が削減されます。また、イベントプロキシを使用して、イベントの動的バインディングを実装することもできます。たとえば、新しい子ノードが追加された場合、リスナーイベントを個別に追加する必要はありません。発生したイベントはに渡されます。親要素のリスナー関数。処理するため。

おすすめ

転載: blog.csdn.net/weixin_53687450/article/details/114802062