ウェブページを最適化してメモリとCPUの使用率を削減

ウェブページを最適化してメモリとCPUの使用率を削減
一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の Web ページは非常に長いですが、スムーズに使用できる場合があります。これは、ユーザーのコンピューターで使用されているメモリと CPU によって影響を受けます。
ブラウザの問題。各ブラウザには、影響を与える可能性のある独自のメモリの問題がありますが、それを制御する方法はほとんどありません。Windows の場合:
· IE シリーズの場合、更新によって回復されるメモリ量は多くありませんが、最小化することでメモリが解放されます。
· Firefox 2 は最小化時にゴミをリサイクルすると言われていますが、ゴミが最も多くなっているのを見たことはありません。できるだけ多く使用するだけで、基本的にリサイクルしません。プロトタイプのajaxによりメモリが増加し続けると言われています。
オペラは最高です。常によくコントロールされています。問題ありません。
Linux のメモリ割り当てメカニズムは Windows とは異なります。可能な限り多くのメモリを使用します。ブラウザがすべてのメモリを占有すると、システムがクラッシュする可能性があります。
ページの問題: ブラウザはページをレンダリングするときにメモリと CPU を消費するので、できるだけ削減してください。
構造<br />DocType を使用して、使用しているものをブラウザに伝えます。HTML4 にも DTD があります。おそらく、Transitional の方が適しています。XHTML を使用して適切な構造を維持する場合は、対応する MIME および XML ヘッダー 1 を出力することを忘れないでください。これにより、ブラウザーのコード検査を減らすことができます。
構造をそのまま維持し、ブラウザにコードを補完させないでください。
ページのファイル サイズを制御するには、プログラムを使用してコードをインデントし、読みやすくすることができます。 2〜3Kのサイズもあります。
iframe は新しいページを生成します。実際、iframe を置き換える方法はたくさんあります。
導入した JS と CSS は適切にマージでき、背景画像もマージできます。Flash をマージする人もいます。幅と高さがわかっているコンテンツ画像/オブジェクトに width 属性を追加すると、ページの部分的な再レンダリングを減らすことができます。
パフォーマンス<br />ほとんどの場合、品質 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 として扱わないでください。
動作<br />$() を使用するためだけにプロトタイプまたは jQuery 全体をインポートしないでください。それらはより多くのことを行います。
AJAXはクールです。ただし、XML を使用するには XML パーサーが必要です。JSON の使用を推奨する人もいますが、これには eval データが必要です。実際には、すでにオブジェクトになっているスクリプトを直接インポートできます。追加のオブジェクト名を渡すか、オブジェクト名をハードコードするか、flickr のように関数として直接使用する必要があります (jsonFlickrApi({"xxx":"xxx"}))。
visibility:hidden で特定の効果を解決できる場合は、display:none を使用しないでください。
ここで JS 変数はグローバルとローカルなどに注意を払うべきだと強調してもあまり意味がありません。JS の複雑さは 1 つか 2 つの文だけでは説明できません。出版される Yueying の新しい本に注目しましょう。
実際、ここで紹介する内容の多くは、Web ページをすばやく表示する方法に似ていますが、その記事ではサーバーの処理に重点を置いています。ただし、多くの場合、サーバーのリソース消費を節約すると、クライアントのリソース消費も節約できます。

(誰でも追加できます)

<<:  Centos7.3は起動時に自動的に起動または指定されたコマンドを実行します

>>:  MySQL テーブルを作成するためによく使用される SQL ステートメントの概要

推薦する

Nginx フォワードプロキシとリバースプロキシの違いと原理分析

1. フォワードプロキシとリバースプロキシの違いフォワード プロキシはクライアントのプロキシとして機...

MySQL でテーブルデータをクリアする 2 つの方法とその違い

MySQL でデータを削除するには 2 つの方法があります。切り詰めは大まかな伐採の一種である削除は...

IPとポートが接続可能かどうかを検出する方法

Windows コマンドテルネット形式: telnet IP ポート場合: テルネット 191.1....

Vue+echarts で積み上げ棒グラフを実現

この記事では、積み上げ棒グラフを実装するためのVue+echartsの具体的なコードを参考までに紹介...

スタックメニューを実装するためのjQueryプラグイン

jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...

IDEA が docker を統合して springboot プロジェクトを展開するプロセス全体

目次1. IDEAはdockerプラグインをダウンロードします2. クラウドサーバーDocker 2...

Linux環境変数ファイルの簡単な紹介

Linux システムでは、環境変数は適用範囲に応じて、システムレベルの環境変数とユーザーレベルの環境...

DockerでRedisをデプロイして起動する方法

DockerでRedisをデプロイするまずLinuxにDockerをインストールし、次にDocker...

Nginx 構成 80 ポート アクセス 8080 とプロジェクト名アドレス メソッド分析

Tomcatはプロジェクトにアクセスします。通常はIP + ポート + プロジェクト名です。 Ngi...

Window.nameはクロスドメインデータ転送の問題を解決します

<br />原文: http://research.microsoft.com/~hel...

ミニプログラムの基本的な使用方法の知識ポイント(非常に包括的で、お勧めです!)

目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...

HTML フレームセットのサンプルコード

この記事では、Frameset が作成した、できるだけシンプルなフレームワークを紹介します。さて、ま...

LinuxベースのSelenium環境を構成し、操作を実装する

1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...

初心者向けWebサイト構築ガイド⑥:FlashFXPの詳しい使い方

今日は、サイトの設定やウェブサイトのアップロードなど、FlashFXP の最も基本的な機能を紹介しま...