今回は、Node が Puppeteer をクローラーとして使用する場合の注意点について説明します。以下は実際のケースです。
アーキテクチャ図
Puppeteerのアーキテクチャ図
PuppeteerはdevToolsを通じてブラウザと通信します
ブラウザ 複数のページを持つことができるブラウザ(chroium)インスタンス
少なくともページが含まれますフレーム ページ
Frame には JavaScript を実行するための実行環境が少なくとも 1 つあり、複数の実行環境を拡張することもできます
前書き
最近デスクトップコンピューターを購入したいのですが、ラップトップの i5 で Web ページを開いているのですがvscをプレイすると明らかにラグがあるので、タオバオで直接検索するとページをめくらなければならないし、画像が多すぎて私の頭の容量では処理できないので、i7 + GTX1070TIまたはGTX1080TIのコンピューターを搭載する予定です。いくつかのデータをクロールし、最近の価格傾向をグラフィカルに分析します。そこで、Puppeteer を使用して関連データをクロールするクローラーを作成しました。
パペッティアとは何ですか?
Puppeteer は、DevTools プロトコルを介してヘッドレス Chrome または Chromium を制御するための高レベル API を提供するノード ライブラリです。完全な (非ヘッドレス) Chrome または Chromium を使用するように構成することもできます。
つまり、この製品は、は、高レベルの API を提供するノード ライブラリであり、devtool を介してヘッドレス モードで chrome または chromium を制御でき、ヘッドレス モードで人間の操作をシミュレートできます。
と Cheerio
cherrico の違いは、本質的には、Web ページ内のデータが動的に取得される場合にのみ、jquery のような構文を使用して HTML ドキュメントを操作するライブラリです。 ajax の場合、対応するデータをクロールできません。 Puppeteer は、ブラウザーの動作環境をシミュレートし、Web サイト情報をリクエストし、Web サイトの内部ロジックを実行できます。その後、WS プロトコルを通じてページ内のデータを動的に取得し、任意のシミュレートされた操作 (クリック、スライド、ホバーなど) を実行でき、ページ ジャンプと複数ページの管理をサポートします。ノード上のスクリプトをブラウザの内部環境に挿入して実行することもできます。つまり、Web ページ上で実行できることはすべて実行できますが、実行できないことも実行できます。
スタート
この記事は段階的なチュートリアルではないため、Puppeteer API の基本的な知識が必要です。理解できない場合は、まず公式の紹介文を読んでください
Puppeteer 公式サイト
PuppeteerAPI
まず、クロールする Web サイトの情報を観察します。GTX1080 です。
これは、クロールする必要がある Taobao の Web ページです。その構造を注意深く分析した後、クロールする必要があるコンテンツは、真ん中の商品アイテムだけです。 endにはそのような機能があります。
私が使用している Typescript は、Puppetter と関連ライブラリの完全な API ヒントを取得できます。TS を知らない場合は、関連するコードを ES 構文に変更するだけで済みます
// 引入一些需要用到的库以及一些声明
import * as puppeteer from 'puppeteer' // 引入Puppeteer
import mongo from '../lib/mongoDb' // 需要用到的 mongodb库，用来存取爬取的数据
import chalk from 'chalk' // 一个美化 console 输出的库
const log = console.log // 缩写 console.log
const TOTAL_PAGE = 50 // 定义需要爬取的网页数量，对应页面下部的跳转链接
// 定义要爬去的数据结构
interface IWriteData {
link: string // 爬取到的商品详情链接
picture: string // 爬取到的图片链接
price: number // 价格，number类型，需要从爬取下来的数据进行转型
title: string // 爬取到的商品标题
}
// 格式化的进度输出 用来显示当前爬取的进度
function formatProgress (current: number): string {
let percent = (current / TOTAL_PAGE) * 100
let done = ~~(current / TOTAL_PAGE * 40)
let left = 40 - done
let str = `当前进度：[${''.padStart(done, '=')}${''.padStart(left, '-')}] ${percent}%`
return str
}次に、クローラーのメイン ロジックの入力を開始します
// 因为我们需要用到大量的 await 语句，因此在外层包裹一个 async function
async function main() {
// Do something
}
main()考え方
1. Typescript を使用する理由
Typescript は使いやすいので、Puppeteer の API をすべて覚えることはできませんし、それらをすべてチェックすることもしたくありません。そのため、TS を使用すると、インテリジェントなリマインダーが提供され、スペルに起因する低レベルのエラーを回避できます。基本的に、TS を使用した後、コードをもう一度入力することができます
puppeteer.png
2. クローラーのパフォーマンスの問題は何ですか?
Puppeteerはブラウザを起動して内部ロジックを実行するため、大量のメモリを消費します コンソールを見ると、このノードプロセスは約300MBのメモリを消費します。
私のページは 1 つずつクロールされます。より高速にクロールしたい場合は、複数のプロセスを開始できます。V8 はシングルスレッドなので、1 つのプロセスで複数のページを開くのは意味がありません。もちろん、パラメータはノード クラスタを通じて実装することもできますが、一方では、クローリング プロセス中に異なる待機時間を設定することもあります。ウェブページ; 私がクローラー爆弾であることを淘宝網に認識させないようにするため
3. Puppeteer のその他の機能
これは Puppeteer のいくつかの基本機能のみを使用しています。実際には、Puppeteer にはさらに多くの機能があります。たとえば、ノード上の処理関数がブラウザ内で実行されるように導入され、現在のページが pdf または png 画像として保存されます。また、const browser = await puppeteer.launch({ headless: false }) を介してインターフェイス効果を備えたブラウザを起動することもでき、クローラがどのように動作するかを確認できます。さらに、ログインが必要な一部の Web サイトで、検証コードの処理を第三者に委託したくない場合は、ヘッドレスをオフにし、プログラムで待機時間を設定し、手動で一部の検証を完了することもできます。ログインの目的を達成します。
もちろん、Google はこのような素晴らしいライブラリを作成しました。このライブラリは、データのクロールに使用されるだけでなく、一部の自動パフォーマンス分析、インターフェイスのテスト、フロントエンド Web サイトの監視などにも使用されます。その他の側面 感想
一般に、データをクロールするクローラの作成は、このクローラで多くの基本的なスキルをテストする比較的複雑な演習プロジェクトであり、async、Promise、およびその他の関連知識を完全に理解する必要があります。 。データを収集するために DOM を分析するとき、ネイティブ メソッドを何度も使用して DOM 属性を取得しました (Web サイトに jquery がある場合は直接使用することもできますが、ない場合は外部インジェクションが必要です。レポートを回避するには、typescript でいくつかの設定が必要です)このようにして、DOM は jquery 構文を通じて操作できるようになり、DOM 関連の API の習熟度が検査されました。
さらに、これは単なるプロセス指向のプログラミングであり、操作用のクラスに完全にカプセル化できます。これにより、ES の OOP の理解もテストされます この記事の事例を読んだ後は、この方法を習得したと思います。 php中国語ウェブサイトのその他の関連記事にも注目してください。 推奨読書:vuex の状態オブジェクトの使用方法の概要
以上がノードは Puppeteer をクローラーとして使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
