ウェブページのメモリ使用量と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 ページにファイルが含まれている場合の、ページの前の空白行の解決方法

推薦する

CSS3は、大きな円のドット分布と回転効果を実現するためにtransform-originを使用します。

まず、transform-origin 属性を使用する必要があります。transform 属性は必ず...

MySQL 集計関数のネストされた使用操作

目的: MySQL 集計関数のネストされた使用集計関数は直接ネストできません。例: max(coun...

ウェブページのテーブルの境界線を設定する方法

<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...

docker+devpi を使用してローカル pypi ソースをビルドする方法

以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...

CSS 読み込み効果の実装 パックマン

えーっと、名前はただの推測です 2333序文これは練習用の CSS デモです。何か間違っている点があ...

JavaScript でローカル変数をグローバル変数に変換する方法

まず関数の自己呼び出しを知る必要がある関数の自己呼び出し - 自己呼び出し関数1 回限りの関数 - ...

Vue+swiperでタイムライン効果を実現

この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...

MySQLデータのバックアップとリカバリの実装方法の分析

この記事では、例を使用して MySQL データのバックアップと復元の方法について説明します。ご参考ま...

写真とテキストによる MySQL 8.0.11 インストール チュートリアル

インターネット上には多くのチュートリアルがありますが、基本的には同じです。ただし、細かい原因でソフト...

Vue で親コンポーネントから子コンポーネントにデータを渡すいくつかの方法

最近、Vue のソースコードを勉強していて、Vue で親コンポーネントと子コンポーネント間でデータを...

Linux の crw、brw、lrw などのファイル属性は何ですか?

ファイルとは何ですか?すべてのファイルは実際には文字列のストリームですが、適切な解析方法を使用すると...

Linux manコマンドの具体的な使い方

01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...

CSS3 回転キューブ問題の詳細な説明

3D座標の概念要素が回転すると、その座標軸も一緒に回転します。注 -y方向の問題立方体を回転させる効...

ウェブデザインに必須のツール: Firefox Web Developer プラグイン CSS ツールセットのチュートリアル

プラグインは Firefox ブラウザにインストールされます。 Web Developer プラグイ...

MySQL 8.0の落とし穴の詳細な説明

本日、MySQL 8.0 をアップデートしました。最初の問題: Navicatがデータベースに接続で...