Webサイトがブラウザをクラッシュさせる原因まとめ（各種ブラウザ） 推奨_JavaScriptスキル

ある企業との面接の際、面接官から「ブラウザがクラッシュする原因は何ですか？」と質問されました。私は愚かなので、メモリリークの質問にしか答えませんでした。実際、Web ページの読み込みプロセス中に、さまざまな理由でブラウザの応答が非常に遅くなったり、ブラウザが応答を失ったり、マシンが他の操作を実行できなくなったりすることがよくあります。

訪問者にとって、Web サイトにログインするとブラウザがすぐにクラッシュすることは誰にとっても耐え難いことだと思います。Web サイトがブラウザをクラッシュさせる理由の概要は次のとおりです。

1。メモリ リーク

。

まずメモリ リークについて説明しましょう。メモリ リークが原因で Web サイトがクラッシュする場合は、サーバーのクラッシュとブラウザのクラッシュの 2 つの状況があります。メモリ リークによって引き起こされる問題は明白で、割り当てられたメモリへの参照が失われ、システムが動作している限りプロセスはメモリを使用し続けます。その結果、プログラムがより多くのメモリを占有すると、マシンが完全に動作を停止してメモリが完全にクリアされるまで、システムのパフォーマンスが低下します。

Apache の Web サーバーは C/C で書かれています。言うまでもなく、C/C には回復不能なメモリがあり、メモリ不足やシステムクラッシュが発生することがあります。 Java では、メモリ リークは、アクセス可能だが役に立たないオブジェクトが割り当てられていることを意味します。これらのオブジェクトは GC によってリサイクルされませんが、メモリを占有します。

クライアント側では、JavaScript によって引き起こされるメモリ リークによってブラウザがクラッシュする可能性もあります。 JavaScript のメモリ リークに関するより権威のある記事には、「JavaScript のメモリ リーク パターン」および「Internet Explorer のリーク パターンの理解と解決」などがあります。 》。

JavaScript はガベージ コレクター (GC) 言語です。つまり、メモリはオブジェクトの作成に基づいてオブジェクトに割り当てられ、オブジェクトへの参照がない場合にはブラウザによって再利用されます。記事「Fabulous Adventures Incoding」によると、「JScript は非世代のマーク アンド スイープ ガベージ コレクターを使用します。」、「非世代のマーク アンド スイープ」は使用できます。このように、ブラウザーは JavaScript を処理するために純粋なガベージ コレクションを使用しませんが、ネイティブ オブジェクト (Dom、ActiveX オブジェクトなど) のメモリを処理するために参照カウントも使用します。

参照カウント システムでは、参照される各オブジェクトは、そのオブジェクトを参照しているオブジェクトの数を知るためにカウントを保持します。カウントがゼロに達すると、オブジェクトは破棄され、オブジェクトが占有していたメモリはヒープに返されます。 オブジェクトが相互に参照する場合、循環参照が形成されます。ブラウザ (IE6、Firefox2.0) は純粋な JavaScript オブジェクト間の循環参照を正しく処理できますが、参照カウント システムにより、オブジェクトの相互参照を行うことができません。参照カウントをゼロにすることはできないため、ブラウザは JavaScript とネイティブ オブジェクト (Dom、ActiveX オブジェクトなど) 間の循環参照を処理できないため、破棄されます。したがって、Native オブジェクトと JavaScript オブジェクトの間で循環参照がある場合、メモリ リークが発生します。

簡単に言うと、ブラウザは参照カウントを使用してネイティブ オブジェクトのメモリを処理し、ネイティブ オブジェクトに関係する循環参照はメモリ リークの原因となるため、参照カウントされたオブジェクトを破棄することはできません。次の例を使用してこの文を理解すると、JavaScript によって引き起こされるメモリ リークを基本的に理解できます。

コードをコピーします コードは次のとおりです。

var
window.onload; = function( ){
// DOM オブジェクトへの JavaScript オブジェクト obj の参照は、id に従って取得されます。
obj=document.getElementById("DivElement"); // DOM オブジェクトはこの JavaScript オブジェクトへの参照は、expandoProperty 実装
document.getElementById("DivElement").expandoProperty=obj;


; JavaScript オブジェクトと DOM オブジェクトの間に参照が生成されます。 DOM オブジェクトは参照カウントによって管理されるため、どちらのオブジェクトも破棄されません。

クロージャに遭遇してイベント応答コードをネイティブ オブジェクトにバインドすると、クロージャ メモリ リークが簡単に発生します。主な理由は前者と同じで、これも JavaScript オブジェクトとネイティブ オブジェクト間の循環参照です。コードがより隠されているというだけです。

コードをコピー コードは次のとおりです:

window.onload = function AttachEvents(element){
//要素には関数 ClickEventHandler() への参照があります
element.attachEvent( " onclick " , ClickEventHandler
function ClickEventHandler); ( ){
//この関数には、Scope を呼び出すための AttachEvents(element) を指す参照があります。
//つまり、パラメータ要素が実行されます。
}
}

JavaScript がメモリ リークを引き起こし、ブラウザの負荷を増加させ、ブラウザのクラッシュを引き起こす可能性がある理由を簡単に理解します。私たちがしなければならないことは、この状況を回避することです。上記の「JavaScript のメモリ リーク パターン」および「Internet Explorer の理解と解決」を参照してください。リークパターン 》理解するための 2 つの記事。 JavaScript のメモリ リークに対処する最終目標は、JavaScript オブジェクトとネイティブ オブジェクト間の循環参照を解除するか、参照カウントをクリアしてオブジェクトを解放することです。

クロージャのメモリ リークなど、一部のメモリ リークは検出が難しい場合があります。メモリ リークを検出するには、「JavaScript メモリ リーク ツールの使用」を参照してください。

2。複雑な Web ページのコードとブラウザのバグ

。

多数の個人 Web サイトと低品質の Web サイトコードの出現により、ブラウザーで何らかのバグが発生すると、ブラウザーのレンダリング エンジンで処理中にエラーが発生します。ループまたは直接クラッシュなどの Web ページ コード。

HTML コードにより Web サイトがクラッシュする

これは、IE6 のクラッシュを引き起こす HTML 構造エラーです。 の前後に文字を追加すると、IE6 がクラッシュします。

コードをコピー コードは次のとおりです:

"http://www.w3.org/TR/html4/loose.dtd">

:fixed; ">

website

では、どのバージョンの XHTML や HTML を使用しても、DOCTYPE 宣言が含まれていれば、IE6 はすぐにクラッシュします。DOCTYPE 宣言がない場合、エラーは発生しません。文書型宣言に関連します。

IE6 をクラッシュさせる CSS コード コードはウェブサイトCats who Code

から参照しています。このバグは 2007 年に発見され、日本人によって発見されたと言われています:

コードをコピー
コードは次のとおりです:

理由IE6 ではテーブル Content に直接配置されているため、mshtml.dll モジュールが破損し、ブラウザが閉じられます。IE6 でない場合は安全です。

さらに、IE6 に存在するバグとして、次の状況も発生します。この問題は、疑似クラスが a:active の場合にも発生します:

コードをコピー


コードは次のとおりです:

IE6 がクラッシュする、IE6 がクラッシュする

解決策: haslayout をトリガーするには、zoom:1; を に追加します。




コードをコピー

コードは次のとおりです:

IE7 をクラッシュさせる CSS コード

このバグは Stealing Rice に由来しており、省略された単語を処理するときに IE7 がクラッシュする原因と推定されています。

コードをコピー コードは次のとおりです:

• クラッシュ クラッシュ クラッシュ クラッシュ
  
• crash ie7

解決策:
をトリガーするには、zoom:1 を追加します。

IE6 をクラッシュさせる JavaScript コード

Internet Explorer Sucks より、この Web サイトはコードを使用しています。IE6 を使用してアクセスすると、ブラウザーがすぐにクラッシュします。コードは次のとおりです:

コードをコピー コードは次のとおりです:

具体的な原因は今のところ解析できませんが、互換性や実行効率の観点から、この書き方は一般的には採用されません。

3。Web ページ上のデータが多すぎます

。

Web ページには、処理する必要のある大量のデータが含まれており、複数の画像ページや非常に長いページなど、システムがビジー状態になったり、Web ページに埋め込まれたさまざまなコントロールによってブラウザーが動作しなくなることがあります。大量のデータを処理するため、システムがビジー状態になります。 Flash ゲーム、ActiveX コントロールなど。ブラウザが Web サイトにアクセスするとき、Web サイトに大量のデータがある場合、通常、ブラウザは処理中に大量の CPU 使用率とメモリを占有し、ブラウザの応答が失われ、場合によってはコンピュータ システムがクラッシュすることがあります。 Web サイトを開発する際に Web パフォーマンスを十分に考慮すれば、この問題はかなりの程度回避できます。

4。Ajax Web サービスの脆弱性

。

Ajax は XML ベースの非同期送信に基づいており、テキスト形式の XML メッセージはバイナリ データの 2 倍の帯域幅を持つ場合があります。 XML メッセージの送信に必要な帯域幅が増えるほど、システムまたはアプリケーションが他のタスクを実行するために利用できるリソースが少なくなります。望ましい結果を得るために複雑なアルゴリズムを実行するなど。

帯域幅が高すぎると、システムの過負荷によってパフォーマンスが低下する可能性があります。帯域幅が過剰になると、きれいなデータを生成するための十分なリソースが不足するため、Ajax アプリケーションは壊れたデータを出力します。これは、Web サービス ポータル (Ajax アプリケーションがその一部である) が破損したデータをポータルの他の部分に公開し、その結果、不正な形式のメッセージや過剰解析が発生することを意味します。攻撃者がこの脆弱性を悪用すると、ブラウザがクラッシュする可能性があります。

一方、小規模な HTTP リクエストが頻繁に発生すると、バックエンド サーバー、負荷分散プログラム、ファイアウォールの負担が増大し、その結果、帯域幅が過剰になり、最終的にパフォーマンスが低下します。クライアントがこのページに長時間滞在したり、ブラウザを閉じなかった場合、ブラウザのメモリは増加し続け、解放されず、クライアントのブラウザがクラッシュする原因になります。

この目的を達成するために、Ajax をより頻繁に使用する場合は、特別なハードウェア アクセラレータ、最適化ソフトウェア、コードの冗長性の排除、XML アクセラレーション機能を通じて Ajax アプリケーションを高速化し、相互運用性の問題を解決することを考慮する必要があります。さらに、トラフィック フローをアクティブに監視することで、Ajax アプリケーションのネットワーク トラフィック パフォーマンスを継続的に測定できます。データをリアルタイム ログに保存することで、高パケット損失やジッター イベントがいつどこで発生するか、応答が遅くなる理由、アプリケーションの優先順位を変更することでトラフィック フローのパフォーマンスをどのように改善できるかを確認できます。

5 その他の理由

。

上記の理由以外にも、ブラウザのクラッシュを直接引き起こすものではありませんが、ログ ファイルが原因でディスクがいっぱいになったり、Web サイトにアクセスできなくなったりする原因も数多くあります。サーバー C ポインター エラー、プロセスにファイル記述子が不足している、スレッドのデッドロック、データベース内の一時テーブルが不足している、サーバーの過負荷など。「Web サイトがクラッシュする 7 つの最も一般的な理由」。

概要

訪問者にとって、Web サイトにログインするとすぐにブラウザがクラッシュすることは、誰にとっても耐え難いことだと思います。「

Web サイトがブラウザをクラッシュさせる理由 》, Webサイトの開発や保守に携わる際には、メモリリーク、コードエラー、冗長性、過剰なデータ量などの問題を最大限に回避し、よりパフォーマンスの高いサイトを構築する必要があります。 追伸: この記事は

Vicky によって要約されています。転載する場合は出典を明記してください 。