この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

Architect_Programmer_Code農業ネットワーク»建築家 › フロントエンド設計とウェブ › HTML/CSS/JavaScript › ブラウザで大きなテキストを扱うにはFileReader.readAsArrayBuffer()を使ってください...
眺める： 32015|答える： 3

[HTML/HTML5] ブラウザで大きなファイルを扱うにはFileReader.readAsArrayBuffer()を使ってください

[リンクをコピー]
掲載地 2019/06/02 20:35:17 | | | |
HTML5のFileReader APIはクライアントブラウザがユーザーのローカルファイルを読み取ることで、アップロードされたファイルをサーバーに読み込まれないようにすることで、サーバーの負担を大幅に軽減し、アップロードにかかる時間を節約します。 しかし実際には、FileReader.readAsText()で30万のログファイルを簡単に処理できることがわかりましたが、ログファイルが1Gや2Gと大きくなるとブラウザがクラッシュします。 これはreadAsText()がターゲットファイルを一度にメモリにロードするため、メモリが制限を超えるためです。 したがって、ウェブアプリケーションが頻繁に大きなファイルを処理する必要がある場合は、FileReader.readAsArrayBuffer()を使ってファイルを一つずつ読み取るべきです。

テストシナリオ

私たちのシナリオはシンプルで、JavaScriptを使ってIISログの時間範囲を取得することです

IISログのサンプル:

#Software:Microsoft Internet Information Services 10.0
#Version:1.0
#Date:2016-08-18 06:53:55
#Fields: 日付 時間 s-ip cs-method cs-uri-stem cs-uri-query s-port cs-username c-ip cs(User-Agent) cs(Referer) sc-status sc-substatus sc-win32-status time-taken
2016-08-18 06:53:55 ::1 GET / - 80 - ::1 Mozilla/5.0+(Windows+NT+10.0; +WOW64; +トライデント/7.0; +rv:11.0)+like+ゲッコ - 200 0 0 476
2016-08-18 06:53:55 ::1 GET /iisstart.png - 80 - ::1 Mozilla/5.0+(Windows+NT+10.0; +WOW64; +トライデント/7.0; +rv:11.0)+like+ゲッコ http://localhost/ 200 0 0 3
2016-08-18 08:45:34 10.172.19.198 GET /test/pac/wpad.dat - 80 - 10.157.21.235 Mozilla/5.0+(Windows+NT+6.1; +Win64; +x64; +トライデント/7.0; +rv:11.0)+like+ゲッコ - 404 3 50 265
2016-08-18 08:46:44 10.172.19.198 GET /test/pac/wpad.dat - 80 - 10.157.21.235 Mozilla/5.0+(Windows+NT+6.1; +Win64; +x64; +トライデント/7.0; +rv:11.0)+like+ゲッコ - 200 0 0 6
私たちの目標は、そのログのタイムフレームを入手することです:

開始時間:2016年8月18日 06:53:55
終了時刻:2016-08-18 08:46:44

readAsText() 実装を使用

readAsText() を使うのは比較的簡単で、ファイル全体の文字列を取得した後、各行の最初の19文字を最初から取得し、日付形式が満たされているかを判断します。満たされれば、この19文字が開始時刻となり、同じように尾部から各行を経て終了時刻を得ます。コードは以下の通りです:


サンプルIISログ(サイズ:1k)の実行結果は予想通りです。



しかし、一度選んだらより大きなIISログ(サイズ:2G)でブラウザがクラッシュします。 その理由は、readAsText()がファイル全体をまずメモリにロードするため、ファイルが大きすぎるとメモリが不足し、ブラウザの処理がクラッシュしてしまうからです。


readAsArrayBuffer() 実装を使用

JavaScriptのFileオブジェクトはBlobから継承しているため、Blob.slice()メソッドを使ってファイルを小さな部分に分割できます。基本的な考え方は以下の通りです:

まず、ファイルの最初の1万ページの内容を取り、それをテキストに変換します
各行の最初の19文字を日付形式が満たされているか確認し、もし満たせば、この19文字が開始時刻となります
そしてファイルの最後にある10,000件のコンテンツをテキストに変換します
同様に、尾部の内容から各行をトラバースして終了時刻を算出します

コードは以下の通りです:


readAsArrayBuffer()を使えば、2Gを超えるIISログでも非常に短時間で望む結果を得ることができました。






先の：phpはSMS検証コードインターフェースを呼び出します
次に：エクスポートとデフォルトのエクスポートという名前のエクスポート

関連記事
 地主| 掲載地 2019/06/02 20:39:24 |
掲載地 2021/09/17 9:11:00 |
プロンプト：著者はBANされたり削除されたりすると、コンテンツは自動的にブロックされます
掲載地 2021/12/21 18:26:43 |
大家のやり方から学び、学びましょう
免責事項：
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。
Mail To:help@itsvse.com