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

ウェブページのメモリとCPU使用量を削減する方法
<br />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 をマージする人もいます。幅と高さがわかっているコンテンツ画像/オブジェクトに width 属性を追加すると、ページの部分的な再レンダリングを減らすことができます。
ほとんどの場合、99% 品質の jpg と 70% 品質の jpg唯一の違いはファイル サイズです。 gif、特に小さなアイコンの場合も同様です。256 色と 128 色の違いはファイル サイズです。 Flash は動きが速すぎて、CPU を大量に消費します。1 秒あたりのフレーム数とアニメーション効果が低下する可能性があります。品質を中または低に設定すると、多くのリソースが節約されますが、効果が犠牲になります。 。品質属性には Autolow2 または Autohigh を選択する方が適切な場合もあります。常に low または best を使用する必要はありません。Flash はファイル サイズを節約するためにベクター グラフィックを使用しますが、複雑なグラフィックやアニメーションを計算するために CPU を使用します。複雑なフィルターが多すぎると大量のメモリを消費しますが、ぼかしフィルターを使用するとメモリを節約できます。 IE フィルターも大量のメモリを消費し、互換性の問題もあります。全画面の半透明化はリソースを大量に消費します。 2*2 の画像は 8*8 の画像とほぼ同じサイズですが、2*2 のタイル状の背景ははるかに多くのスペースを占めます。 GIF アニメーションにもフレームの概念があるため、GIF を Flash として扱わないでください。
$()動作を使用するためだけに pretotype または 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 ヘルプにそのように記載されています)。

<<:  HTML独習の旅(I)基本要素と属性の練習(自分でコードを書く)

>>:  VMware ESXi 5.5 の展開および構成図のプロセス

推薦する

docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析

この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...

MySQL binlog を使用して誤って削除されたデータベースを復元する方法

目次1 現在のデータベースの内容を表示し、データベースをバックアップする2 bin_log関数を有効...

vue-resource インターセプターの使用に関する詳細な説明

序文インターセプター最近のフロントエンド フレームワークでは、インターセプターは基本的に非常に基本的...

MySQLパスワードを忘れた場合のいくつかの解決策

解決策1完全にアンインストールしてすべてのデータを削除します。まず、MySQLに関連するすべてのプロ...

MySql5.7.18 の文字セット構成の詳細なグラフィック説明

背景:かなり前(2017.6.5、記事にはタイムリーさがあり、特に使用されているツールは頻繁に更新さ...

Vue プロジェクトを実行するときに `--fix` オプションで修正できる可能性のある警告のエラー問題を解決します。

問題: vue-cil3 は、`--fix` オプションで修正できる可能性のある警告とともに実行され...

MySQL操作テーブルでよく使われるSQLのまとめ

1. テーブル内のフィールドの種類を表示する テーブル名を記述する desc テーブル名 2. テー...

MySQL テーブルとデータベース シャーディングのアプリケーション シナリオと設計方法

多くの友人がフォーラムやメッセージエリアで、どのような状況で MySQL をシャーディングする必要が...

全体的なユーザーエクスペリエンスを確保する方法

関連記事:ユーザーエクスペリエンスのためのウェブサイトデザイン今朝、GMail がまた不調になり、接...

vue2.x の徹底研究 - h 関数の説明

目次解決、要約: vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、w...

一般的な XHTML タグの紹介

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

テーブルセルの幅tdの設定は無効であり、内部コンテンツによって常に引き伸ばされます

テーブルページを作成するときに、td に設定された幅が無効になることがあります。td の幅は常に内部...

Idea の起動速度を改善し、Tomcat ログの文字化けを解決する方法

目次序文アイデアの起動速度Tomcat ログが文字化けしている序文Idea を再インストールしたので...

DevUI で独自の Angular コンポーネント ライブラリを構築する方法

目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...

Vuex のコアコンセプトと基本的な使用法の詳細な説明

目次導入始めるインストール①直接ダウンロードする方法②CND法③NPM方式④糸法NPMインストールの...