キーテイクアウト
- node.jsとnpmを使用して、Webクロールおよびその他のコマンドラインタスクのカスタムCLIマイクロフラームワークを効率的にセットアップします。 PhantomjsとHorsemanパッケージを使用して、ブラウザでのユーザーインタラクションをシミュレートし、自動化されたWebクロール機能を強化します。
- 複雑なアクションシーケンスを実行するために騎手メソッドのチェーンを組み込み、Webページ内の動的な相互作用を可能にします。 DOMからの柔軟なスクリプトとデータ抽出のために、騎手のevaluate()メソッドを活用してください。
- Horsemanのスクリーンショット機能を利用して、Visual QAテストなどのタスクを支援するWebクロール中にスクリーンショットをキャプチャおよび保存します。 孤児になったファントミのプロセスを防ぎ、システムのパフォーマンスと安定性を維持するために使用するたびに騎手インスタンスを閉鎖することを確認してください。
- この記事は、Lukas Whiteによって査読されました。 SetePointコンテンツを最高にしてくれたSitePointのすべてのピアレビュアーに感謝します!プロジェクトの過程で、さまざまなアクションを実行するためにカスタムスクリプトを作成する必要があることが非常に一般的です。通常、コマンドライン(CLI)を介して実行されるこのような1回限りのスクリプトは、実質的にあらゆるタイプのタスクに使用できます。長年にわたってそのような多くのスクリプトを書いてきた私は、このプロセスを促進するためにカスタムCLIマイクロフルメーワークを設置するために、少しの時間をかけて導入することの価値を高く評価するために成長しました。幸いなことに、Node.jsとその広範なパッケージエコシステムであるNPMは、まさにそれを簡単に行うことができます。テキストファイルを解析するか、ETLを実行しているかにかかわらず、コンベンションを設置すると、効率的で構造化された方法で新しい機能を簡単に追加できます。 コマンドラインに必ずしも関連しているわけではありませんが、Webクローリングは、自動化された機能テストや乱縮検出などの特定の問題ドメインでしばしば採用されます。このチュートリアルでは、サポートされているアクションがWebクロールを中心に展開する軽量CLIフレームワークを実装する方法を示しています。うまくいけば、これにより、あなたの関心がクロールに固有のものであろうとコマンドラインに固有のものであろうと、創造的なジュースが流れるようになります。カバーされているテクノロジーには、node.js、phantomjs、およびクロールとCLIの両方に関連するNPMパッケージの品揃えが含まれます。 このチュートリアルのソースコードは、githubで見つけることができます。例を実行するには、node.jsとphantomjsの両方をインストールする必要があります。それらをダウンロードしてインストールするための手順は、node.js、phantomjs。
- にあります。 基本的なコマンドラインフレームワークを設定
司令官を使用すると、どの引数がサポートされているかを定義できますが、プロンプトを使用すると、実行時にユーザーに入力を(適切に)促すことができます。最終結果は、いくつかのユーザーが提供するデータに基づいて動的な動作を備えたさまざまなアクションを実行するための構文的に甘いインターフェイスです。
たとえば、コマンドを次のように見せたい:
$ <span>node run.js -x hello_world </span>エントリポイント(run.js)は、次のような可能な引数を定義します。
このようなさまざまなユーザー入力ケースを定義します:
program <span>.version('1.0.0') </span> <span>.option('-x --action-to-perform [string]', 'The type of action to perform.') </span> <span>.option('-u --url [string]', 'Optional URL used by certain actions') </span> <span>.parse(process.argv); </span>この時点で、実行するアクションを指定できる基本的なパスを定義し、URLを受け入れるプロンプトを追加しました。このアクションに固有のロジックを処理するモジュールを追加するだけです。 hello_world.jsという名前のファイルをアクションディレクトリに追加することでこれを行うことができます:
<span>var performAction = require('./actions/' + program.actionToPerform) </span> <span>switch (program.actionToPerform) { </span> <span>case 'hello_world': </span> prompt<span>.get([{ </span> <span>// What the property name should be in the result object </span> <span>name: 'url', </span> <span>// The prompt message shown to the user </span> <span>description: 'Enter a URL', </span> <span>// Whether or not the user is required to enter a value </span> <span>required: true, </span> <span>// Validates the user input </span> <span>conform: function (value) { </span> <span>// In this case, the user must enter a valid URL </span> <span>return validUrl.isWebUri(value); </span> <span>} </span> <span>}], function (err<span>, result</span>) { </span> <span>// Perform some action following successful input </span> <span>performAction(phantomInstance, result.url); </span> <span>}); </span> <span>break; </span><span>} </span>ご覧のとおり、モジュールには、PhantomJSオブジェクト(Phantominstance)とURL(URL)のインスタンスが提供されると予想されます。 PhantomJSインスタンスを一時的に定義する詳細について説明しますが、今のところ、特定のアクションをトリガーするための基礎を築いていることがわかります。コンベンションを導入したので、定義された正気な方法で新しいアクションを簡単に追加できます。
騎手を使用してファントムジをrawった
<span>'use strict'; </span> <span>/** </span><span> * <span>@param Horseman phantomInstance </span></span><span> * <span>@param string url </span></span><span> */ </span>module<span>.exports = function (phantomInstance<span>, url</span>) { </span> <span>if (!url || typeof url !== 'string') { </span> <span>throw 'You must specify a url to ping'; </span> <span>} else { </span> <span>console.log('Pinging url: ', url); </span> <span>} </span> phantomInstance <span>.open(url) </span> <span>.status() </span> <span>.then(function (statusCode) { </span> <span>if (Number(statusCode) >= 400) { </span> <span>throw 'Page failed with status: ' + statusCode; </span> <span>} else { </span> <span>console.log('Hello world. Status code returned: ', statusCode); </span> <span>} </span> <span>}) </span> <span>.catch(function (err) { </span> <span>console.log('Error: ', err); </span> <span>}) </span> <span>// Always close the Horseman instance </span> <span>// Otherwise you might end up with orphaned phantom processes </span> <span>.close(); </span><span>}; </span>Horsemanは、PhantomJSプロセスを作成および対話するための強力なインターフェイスを提供するNode.jsパッケージです。 Horsemanとその機能の包括的な説明は、独自の記事を保証するでしょうが、人間のユーザーがブラウザで展示する可能性のある動作を簡単にシミュレートできると言うだけで十分です。 Horsemanは、jQueryを自動的に注入したり、SSL証明書の警告を無視したりするなど、幅広い構成オプションを提供します。また、クッキーの取り扱いとスクリーンショットの撮影の機能も提供します。
CLIフレームワークを介してアクションをトリガーするたびに、エントリスクリプト(run.js)が騎手のインスタンスをインスタンスにし、指定されたアクションモジュールに渡します。擬似コードでは、次のように見えます:
コマンドを実行すると、Horsemanインスタンスと入力URLがhello_worldモジュールに渡され、phantomjsがURLを要求し、ステータスコードをキャプチャし、ステータスをコンソールに印刷します。私たちは、騎手を使用して最初の真正なクロールを走らせました。 giddyup!
<span>var phantomInstance = new Horseman({ </span> <span>phantomPath: '/usr/local/bin/phantomjs', </span> <span>loadImages: true, </span> <span>injectJquery: true, </span> <span>webSecurity: true, </span> <span>ignoreSSLErrors: true </span><span>}); </span> <span>performAction(phantomInstance, ...); </span>複雑な相互作用のための騎手の方法
これまでのところ、騎手の非常にシンプルな使用法を調べましたが、ブラウザで一連のアクションを実行するためにメソッドを一緒にチェーンすると、パッケージはさらに多くのことを行うことができます。これらの機能のいくつかを実証するために、GitHubを介してナビゲートして新しいリポジトリを作成するユーザーをシミュレートするアクションを定義しましょう。
注意:この例は純粋にデモンストレーションの目的であり、GitHubリポジトリを作成するための実行可能な方法と見なされるべきではありません。これは、Webアプリケーションと対話するために騎手を使用する方法の単なる例です。自動化された方法でリポジトリを作成することに興味がある場合は、公式のGitHub APIを使用する必要があります。
新しいクロールがそうするようにトリガーされると仮定しましょう:
$ <span>node run.js -x hello_world </span>CLIフレームワークの慣習に続いて、既に導入されているため、Create_Repo.jsという名前のアクションディレクトリに新しいモジュールを追加する必要があります。以前の「Hello World」の例と同様に、create_repoモジュールは、そのアクションのすべてのロジックを含む単一の関数をエクスポートします。
このアクションにより、以前よりもエクスポートされた関数により多くのパラメーターを渡すことに注意してください。パラメーターには、ユーザー名、パスワード、リポジトリが含まれます。ユーザーが迅速な課題を正常に完了したら、run.jsからこれらの値を渡します。 ただし、そのいずれかが発生する前に、run.jsにロジックを追加してプロンプトをトリガーしてデータをキャプチャする必要があります。メインスイッチステートメントにケースを追加することにより、これを行います:
program <span>.version('1.0.0') </span> <span>.option('-x --action-to-perform [string]', 'The type of action to perform.') </span> <span>.option('-u --url [string]', 'Optional URL used by certain actions') </span> <span>.parse(process.argv); </span>
このフックをrun.jsに追加したので、ユーザーが関連するデータを入力するとアクションに渡され、クロールを進めることができます。
create_repoクロールロジック自体については、Horsemanの一連の方法を使用してGithubログインページに移動し、提供されたユーザー名とパスワードを入力し、フォームを送信します。
<span>var performAction = require('./actions/' + program.actionToPerform) </span> <span>switch (program.actionToPerform) { </span> <span>case 'hello_world': </span> prompt<span>.get([{ </span> <span>// What the property name should be in the result object </span> <span>name: 'url', </span> <span>// The prompt message shown to the user </span> <span>description: 'Enter a URL', </span> <span>// Whether or not the user is required to enter a value </span> <span>required: true, </span> <span>// Validates the user input </span> <span>conform: function (value) { </span> <span>// In this case, the user must enter a valid URL </span> <span>return validUrl.isWebUri(value); </span> <span>} </span> <span>}], function (err<span>, result</span>) { </span> <span>// Perform some action following successful input </span> <span>performAction(phantomInstance, result.url); </span> <span>}); </span> <span>break; </span><span>} </span>フォーム送信ページがロードされるのを待ってチェーンを続けます:
その後、jqueryを使用して、ログインが成功したかどうかを判断します。
<span>'use strict'; </span> <span>/** </span><span> * <span>@param Horseman phantomInstance </span></span><span> * <span>@param string url </span></span><span> */ </span>module<span>.exports = function (phantomInstance<span>, url</span>) { </span> <span>if (!url || typeof url !== 'string') { </span> <span>throw 'You must specify a url to ping'; </span> <span>} else { </span> <span>console.log('Pinging url: ', url); </span> <span>} </span> phantomInstance <span>.open(url) </span> <span>.status() </span> <span>.then(function (statusCode) { </span> <span>if (Number(statusCode) >= 400) { </span> <span>throw 'Page failed with status: ' + statusCode; </span> <span>} else { </span> <span>console.log('Hello world. Status code returned: ', statusCode); </span> <span>} </span> <span>}) </span> <span>.catch(function (err) { </span> <span>console.log('Error: ', err); </span> <span>}) </span> <span>// Always close the Horseman instance </span> <span>// Otherwise you might end up with orphaned phantom processes </span> <span>.close(); </span><span>}; </span>ログインが失敗した場合、エラーがスローされます。それ以外の場合は、プロファイルページに移動する方法をチェーンし続けます:
<span>var phantomInstance = new Horseman({ </span> <span>phantomPath: '/usr/local/bin/phantomjs', </span> <span>loadImages: true, </span> <span>injectJquery: true, </span> <span>webSecurity: true, </span> <span>ignoreSSLErrors: true </span><span>}); </span> <span>performAction(phantomInstance, ...); </span>プロフィールページに登録したら、[リポジトリ]タブに移動します:
$ <span>node run.js -x create_repo </span>[リポジトリ]タブで、指定された名前のリポジトリが既に存在するかどうかを確認します。もしそうなら、エラーをスローします。そうでない場合は、シーケンスを続行します:
module<span>.exports = function (phantomInstance<span>, username, password, repository</span>) { </span> <span>if (!username || !password || !repository) { </span> <span>throw 'You must specify login credentials and a repository name'; </span> <span>} </span> <span>... </span><span>} </span>エラーがスローされていないと仮定して、プログラムで「新しいリポジトリ」ボタンをクリックし、次のページを待っています。
その後、付属のリポジトリ名を入力してフォームを送信します。
<span>switch (program.actionToPerform) { </span> <span>case 'create_repo': </span> prompt<span>.get([{ </span> <span>name: 'repository', </span> <span>description: 'Enter repository name', </span> <span>required: true </span> <span>}, { </span> <span>name: 'username', </span> <span>description: 'Enter GitHub username', </span> <span>required: true </span> <span>}, { </span> <span>name: 'password', </span> <span>description: 'Enter GitHub password', </span> <span>hidden: true, </span> <span>required: true </span> <span>}], function (err<span>, result</span>) { </span> <span>performAction( </span> phantomInstance<span>, </span> result<span>.username, </span> result<span>.password, </span> result<span>.repository </span> <span>); </span> <span>}); </span> <span>break; </span> <span>... </span>
結果のページに到達したら、リポジトリが作成されたことがわかります:
phantomInstance <span>.open('https://github.com/login') </span> <span>.type('input[name="login"]', username) </span> <span>.type('input[name="password"]', password) </span> <span>.click('input[name="commit"]') </span>
騎手のクロールと同様に、最後に騎手インスタンスを閉じることが重要です:
<span>.waitForNextPage() </span>
馬術師のインスタンスを閉じることができないと、孤立したファントムJSプロセスがマシン上で持続する可能性があります。 データを収集するためにrawう
この時点で、GitHubに新しいリポジトリをプログラム的に作成するために、一連の動作シーケンスを組み立てました。これを達成するために、私たちは一連の騎手の方法をチェックしました。このアプローチは、事前に知られている特定の構造的および行動パターンに役立つ場合がありますが、ある時点でより柔軟なスクリプトを実装する必要があることがわかります。これは、アクションシーケンスがコンテキストに基づいて大きく異なるか、複数の異なる結果を生成する可能性がある場合に当てはまります。また、DOMからデータを抽出する必要がある場合にも当てはまります。 このような場合、Horseman's Evaluate()メソッドを使用できます。これにより、インラインまたは外部リンクJavaScriptを注入することにより、ブラウザでフリーフォームインタラクションを実行できます。
このセクションは、ページから基本データを抽出する例を示しています(この場合、アンカーリンク)。これが必要になる可能性のあるシナリオの1つは、ドメイン上のすべてのURLをヒットするために汚損検出クローラーを構築することです。最後の例と同様に、最初にアクションディレクトリに新しいモジュールを追加する必要があります。
そして、run.jsの新しいアクションのためのフックを追加:
このコードが整ったので、次のコマンドを実行して、任意のページからリンクを抽出するためにクロールを実行できます。
$ <span>node run.js -x hello_world </span>
このアクションは、ページからデータを抽出することを示しており、Horsemanによって組み込まれたブラウザアクションを使用しません。 evaluate()メソッドに入れたJavaScriptを直接実行し、ブラウザ環境でネイティブに実行しているかのようにします。 このセクションでは、以前に言及した最後のことを1つに記録する必要があります。Emaluate()メソッドを使用してブラウザでカスタムJavaScriptを実行できるだけでなく、実行前にランタイム環境に外部スクリプトを挿入することもできます。あなたの評価ロジック。これは、そうすることができます:
program <span>.version('1.0.0') </span> <span>.option('-x --action-to-perform [string]', 'The type of action to perform.') </span> <span>.option('-u --url [string]', 'Optional URL used by certain actions') </span> <span>.parse(process.argv); </span>上記のロジックを拡張することにより、あらゆるWebサイトで実質的にすべてのアクションを実行できます。
騎手を使用してスクリーンショットを撮影します
<span>var performAction = require('./actions/' + program.actionToPerform) </span> <span>switch (program.actionToPerform) { </span> <span>case 'hello_world': </span> prompt<span>.get([{ </span> <span>// What the property name should be in the result object </span> <span>name: 'url', </span> <span>// The prompt message shown to the user </span> <span>description: 'Enter a URL', </span> <span>// Whether or not the user is required to enter a value </span> <span>required: true, </span> <span>// Validates the user input </span> <span>conform: function (value) { </span> <span>// In this case, the user must enter a valid URL </span> <span>return validUrl.isWebUri(value); </span> <span>} </span> <span>}], function (err<span>, result</span>) { </span> <span>// Perform some action following successful input </span> <span>performAction(phantomInstance, result.url); </span> <span>}); </span> <span>break; </span><span>} </span>私がデモをしたい最終的なユースケースは、騎手を使ってスクリーンショットを撮る方法です。これは、Screenshotを表すbase64エンコードされた文字列を返すHorsemanのScreenshotbase64()メソッドで行うことができます。
前の例と同様に、最初にアクションディレクトリに新しいモジュールを追加する必要があります。
そして、run.jsの新しいアクションのためのフックを追加:
<span>'use strict'; </span> <span>/** </span><span> * <span>@param Horseman phantomInstance </span></span><span> * <span>@param string url </span></span><span> */ </span>module<span>.exports = function (phantomInstance<span>, url</span>) { </span> <span>if (!url || typeof url !== 'string') { </span> <span>throw 'You must specify a url to ping'; </span> <span>} else { </span> <span>console.log('Pinging url: ', url); </span> <span>} </span> phantomInstance <span>.open(url) </span> <span>.status() </span> <span>.then(function (statusCode) { </span> <span>if (Number(statusCode) >= 400) { </span> <span>throw 'Page failed with status: ' + statusCode; </span> <span>} else { </span> <span>console.log('Hello world. Status code returned: ', statusCode); </span> <span>} </span> <span>}) </span> <span>.catch(function (err) { </span> <span>console.log('Error: ', err); </span> <span>}) </span> <span>// Always close the Horseman instance </span> <span>// Otherwise you might end up with orphaned phantom processes </span> <span>.close(); </span><span>}; </span>
次のコマンドでスクリーンショットを撮ることができます
base64エンコードされた文字列を使用する理由(たとえば、実際の画像を保存しない)は、それらが生の画像データを表すのに便利な方法であることです。このStackOverFlowの回答は、より詳細に説明します
実際の画像を保存したい場合は、screenshot()メソッドを使用します。結論
このチュートリアルは、Horsemanパッケージを使用してPhantomjsを活用して、カスタムCLIマイクロフルメワークとnode.jsでクロールするための基本的なロジックの両方を実証しようとしました。 CLIフレームワークを使用すると多くのプロジェクトに利益をもたらす可能性がありますが、クロールの使用は通常、非常に特定の問題ドメインに限定されます。 1つの一般的な領域は品質保証(QA)です。ここでは、クローリングを機能的およびユーザーインターフェイステストに使用できます。別の領域はセキュリティです。たとえば、ウェブサイトが定期的にクロールして、それが汚損されているか、その他の妥協されたかを検出することをお勧めします。プロジェクトの場合はどうであれ、目標を明確に定義し、可能な限り控えめにするようにしてください。可能な場合は許可を得て、できる限り最大限に礼儀正しく、サイトをDDOSにしないように注意してください。多くの自動化されたトラフィックを生成していると疑っている場合は、おそらく目標、実装、または許可レベルを再評価する必要があります。 ノードとPhantomjs HorsemanでのWebクロールに関するよくある質問(FAQ) WebクロールとWebスクレイピングの違いは何ですか?
WebクロールとWebスクレイピングは2つの異なるプロセスですが、それらはしばしば交換可能に使用されます。 Webクロールは、通常、ボットまたはクモによって実行されるWebを体系的に閲覧するプロセスです。 Webサイトのコンテンツのインデックスを作成し、他のWebページへのリンクに従うことが含まれます。一方、Webスクレイピングは、Webサイトから特定のデータを抽出するプロセスです。これには、必要なデータを引き出すために、WebページのHTMLを解析することが含まれます。 Webクローリングはナビゲートとインデックス作成に関するものですが、Webスクレイプはデータ抽出に関するものです。非同期性。これにより、同時処理が可能になります。つまり、複数のページを同時にクロールできます。これにより、同期して実行する他の言語よりも大幅に高速になります。さらに、Node.jsには、Phantomjs HorsemanなどのWebクロールを支援できる多数のライブラリとツールを備えた豊富なエコシステムがあります。 > Phantomjs Horsemanは、Phantomjsを使用してWebブラウザーを自動化するための高レベルAPIを提供するNode.jsパッケージです。リンクをクリックしたり、フォームに記入したり、スクリーンショットを撮影したりするなど、Webページでアクションを実行できます。これにより、Webクロールの強力なツールになります。これにより、人間のユーザーがそうであるようにWebページとやり取りできるようにするためです。JavaScriptレンダリングは、Webクローリングにどのように影響しますか?従来のWebクローラーは、JavaScriptによって生成されたコンテンツを無視して、WebページのHTMLのみを解析します。ただし、最新の検索エンジンはJavaScriptをレンダリングすることができ、JavaScriptで生成されたコンテンツにインデックスを付けることができます。これは、あなたのウェブサイトがコンテンツ生成のためにJavaScriptに大きく依存している場合、従来のWebクローラーによって完全にインデックス化されない可能性があることを意味します。 、Webクロールを使用して、Webサイトの変更を監視できます。ウェブサイトを定期的にクロールし、現在の状態を以前の状態と比較することで、変更を検出できます。これは、電子商取引Webサイトでの価格の変更やニュースWebサイトでの更新の監視など、さまざまな目的に役立ちます。あなたがいる管轄区域や、rawっている特定のウェブサイトを含むいくつかの要因について。いくつかのWebサイトは、Robots.txtファイルでWebクロールを明示的に許可していますが、他のWebサイトはそれを禁止しています。ウェブサイトのrobots.txtファイルを尊重し、短期間であまりにも多くのリクエストでウェブサイトのサーバーを過負荷にしないことが重要です。 Webクロールプロセスを最適化するいくつかの方法です。 1つの方法は、幅広い最初の検索(BFS)アルゴリズムを使用することです。これにより、次の深さレベルに移動する前に、すべてのページを特定の深さでcraうします。別の方法は、ページの関連性に基づいてクロールを優先することです。たとえば、eコマースのWebサイトをcrawしている場合は、ブログの投稿の前に製品ページをcrawっている場合があります。 >はい、Phantomjs Horsemanを使用すると、Webサイトにログインするプロセスを自動化できます。これにより、ログイン後にのみアクセスできるページをクロールすることができます。ただし、これがウェブサイトの利用規約に違反する可能性があることに注意する必要があります。
Webクローリングで動的コンテンツを処理するにはどうすればよいですか? Webクローラーは、Webページの静的HTMLのみを解析します。ただし、Phantomjs Horsemanなどのツールを使用すると、JavaScriptをレンダリングして、人間のユーザーと同じように動的コンテンツと対話できます。これにより、コンテンツ生成のためにJavaScriptに大きく依存しているWebサイトからデータをクロールおよび抽出できます。
Web Crawlerがブロックされるのを防ぐにはどうすればよいですか?
Web Crawlerがブロックされないようにするいくつかの戦略があります。 1つの方法は、Webサイトのrobots.txtファイルを尊重することです。これは、クロールが許可されているWebサイトのどの部分に関するガイドラインを提供します。別の方法は、サーバーの過負荷を避けるために、Webサイトにリクエストを送信するレートを制限することです。 IPアドレスとユーザーエージェントを回転させて、ボットとして検出されないようにすることもできます。
以上がノード、ファントミ、騎手でrawうウェブの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ドリームウィーバー CS6
ビジュアル Web 開発ツール
