ウェブページのメモリ使用量とCPU使用量を削減する方法

ウェブページのメモリ使用量とCPU使用量を削減する方法

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の Web ページは非常に長いですが、スムーズに使用できる場合があります。これは、ユーザーのコンピューターで使用されているメモリと CPU によって影響を受けます。

ブラウザの問題。各ブラウザには、影響を与える可能性のある独自のメモリの問題がありますが、それを制御する方法はほとんどありません。Windows の場合:

IE シリーズの場合、リフレッシュリサイクルの量は多くありませんが、最小化することでメモリが解放されます。
Firefox 2 も最小化時にリサイクルすると言われていますが、ゴミが最も多く発生するのを見たことはありません。できるだけ多く使用し、基本的にリサイクルしません。プロトタイプのajaxによりメモリが増加し続けると言われています。
オペラは最高です。常によくコントロールされています。問題ありません。 。
Linux のメモリ割り当てメカニズムは Win とは異なります。可能な限り多くのメモリを使用します。ブラウザがすべてのメモリを占有すると、システムがクラッシュする可能性があります。

ページの問題: ブラウザはページをレンダリングするときにメモリと CPU を消費するので、できるだけ削減してください。

DocType を構造的に使用して、使用しているものをブラウザに伝えます。HTML4 にも DTD があります。おそらく、Transitional の方が適しています。XHTML を使用して適切な構造を維持する場合は、対応する MIME および XML ヘッダー 1 を出力することを忘れないでください。これにより、ブラウザーのコード検査を減らすことができます。
構造をそのまま維持し、ブラウザにコードを補完させないでください。
ページのファイル サイズを制御するには、プログラムを使用してコードをインデントし、読みやすくすることができます。 2〜3Kのサイズもあります。
iframe は新しいページを生成します。実際、iframe を置き換える方法はたくさんあります。
導入された JS と CSS は適切にマージでき、背景画像もマージできます。Flash をマージする人もいます。幅と高さがわかっているコンテンツ画像/オブジェクトに幅属性を追加すると、ページの部分的な再レンダリングを減らすことができます。ほとんどの場合、99 品質と 70 品質の jpg の違いはファイル サイズだけです。 gif、特に小さなアイコンの場合も同様です。256 色と 128 色の違いはファイル サイズです。
Flash は動きが速すぎて、CPU を大量に消費します。1 秒あたりのフレーム数とアニメーション効果が低下する可能性があります。品質を中または低に設定すると、多くのリソースが節約されますが、効果が犠牲になります。 。品質属性には Autolow2 または Autohigh を選択する方が適切な場合もあります。常に low または best を選択する必要はありません。
Flash はファイル サイズを節約するためにベクター グラフィックを使用しますが、複雑なグラフィックやアニメーションを計算するために CPU を使用します。複雑なフィルターが多すぎると大量のメモリを消費しますが、ぼかしフィルターを使用するとメモリを節約できます。
IE フィルターも大量のメモリを消費し、互換性の問題もあります。全画面の半透明化はリソースを大量に消費します。
2*2 の画像は 8*8 の画像とほぼ同じサイズですが、2*2 のタイル状の背景ははるかに多くのスペースを占めます。
GIF アニメーションにもフレームの概念があるため、GIF を Flash として扱わないでください。
$() 動作を使用するためだけにプロトタイプまたは jQuery 全体をインポートしないでください。これらにはさらに多くの機能があります。
AJAXはクールです。ただし、XML を使用するには XML パーサーが必要です。JSON の使用を推奨する人もいますが、これには eval データが必要です。実際には、すでにオブジェクトになっているスクリプトを直接インポートできます。追加のオブジェクト名を渡すか、オブジェクト名をハードコードするか、flickr のように関数として直接使用する必要があります (jsonFlickrApi({"xxx":"xxx"}))。
visibility:hidden で特定の効果を解決できる場合は、display:none を使用しないでください。
ここで JS 変数はグローバルとローカルなどに注意を払うべきだと強調してもあまり意味がありません。JS の複雑さは 1 つか 2 つの文だけでは説明できません。出版される Yueying の新しい本に注目しましょう。 ^^
実際、ここで紹介する内容の多くは、Web ページをすばやく表示する方法に似ていますが、その記事ではサーバーの処理に重点を置いています。ただし、多くの場合、サーバーのリソース消費を節約すると、クライアントのリソース消費も節約できます。

実はこの記事は長い間下書き箱の中に入っていて、整理する時間がありませんでした。私が今あなたに与えるものは完全ではありません。まだ完全ではないからです。ゆっくりと追加していきます。


--------------------------------------------------------------------------------

問題: ブラウザ モードの問題が発生する可能性がありますが、問題は解決できます。正しい MIME タイプで XHTML を提供するを参照してください。ブラウザは XML ヘッダーを正しく表示せず、構造が正しくないとページ全体が表示されなくなります。
Autolow: 速度を優先しますが、可能な場合は外観も向上させます。 再生が開始されると、アンチエイリアシングはオフになります。 Flash Player は、プロセッサがアンチエイリアシングを処理できることを検出すると、その機能をオンにします。
Autohigh: 最初は再生速度と外観の両方に同等の重みが与えられ、必要に応じて再生速度を確保するために外観が犠牲になります。 再生が始まるとアンチエイリアシングがオンになります。実際のフレーム レートが指定されたフレーム レートを下回ると、再生速度を上げるためにアンチエイリアシングがオフになります。この設定を使用して、アンチエイリアス コマンド (表示 > プレビュー モード > アンチエイリアス) をエミュレートします。
ぼかしフィルター:ぼかしフィルターを使用する場合、blurX と blurY に使用する値が 2 の整数乗(2、4、8、16、32 など)であれば、計算速度が高速化され、パフォーマンスが 20% ~ 30% 向上します(Flash ヘルプにそのように記載されています)。

<<:  CSSアダプティブレイアウトは、サブ要素項目の全体的な中央揃えと内部項目の左揃えを実現します。

>>:  UTF8 でエンコードされた Web ページにファイルが含まれている場合の、ページの前の空白行の解決方法

推薦する

Vue.jsフレームワークはショッピングカート機能を実装します

この記事では、ショッピングカートを実装するためのVue.jsフレームワークの具体的なコードを参考まで...

Dockerイメージのインポートとエクスポートの実装

GitLabのDocker使用法gitlab ドッカー起動コマンド docker run -d -p...

Reactでパスワード強度検出器を実装する方法

目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...

jQueryはhide()とtoggle()関数を使用してカメラブランド表示の非表示機能を実現します。

最近、jQuery を学習しているときに、show()、hide()、toggle() 関数に出会い...

MySQL のユニークインデックスと通常のインデックスのどちらを選択すればよいでしょうか?

ユーザー テーブルを設計するときに、各人の ID 番号が一意であり、検索する必要があるシナリオを想像...

LinuxのバックグラウンドでPythonプログラムを実行するいくつかの方法

1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...

Linux の操作とメンテナンスの基本 httpd 静的 Web ページ チュートリアル

目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...

dockerでlnmp環境を構築する方法

プロジェクトディレクトリを作成する php ディレクトリをコピーする次のプロジェクト構造を作成します...

Centos8で静的IPを設定する方法の詳細な説明

CentOS 8をインストールした後、ネットワークを再起動すると次のエラーが表示されますエラーメッセ...

ブログデザイン ウェブデザイン デビュー

私がデザインした最初の Web ページは次のとおりです。 私はこの業界に7年間在籍し、プログラミング...

Docker クロスホストネットワーク (オーバーレイ) の実装

1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...

IE6 で CSS スタイルの div または li の背景のタイリングと境界の破損を解決する方法

IE6 で CSS スタイルの div または li の背景のタイリングや境界の破壊を解決するには、...

MySQL の最初のインストールが成功した後にパスワードを初期化する手順

ファイルをディレクトリに解凍しますこれは解凍後のディレクトリですmy.iniファイルを入力しますダブ...

MySQLは効率的なインデックス例分析を確立する

この記事では、例を使用して、MySQL で効率的なインデックスを作成する方法について説明します。ご参...

JavaScript でドラッグ可能なプログレスバーを実装する

この記事では、ドラッグ可能なプログレスバーを実装するためのJavaScriptの具体的なコードを参考...