JavaScript と CSS を最適化してウェブサイトのパフォーマンスを向上させる

JavaScript と CSS を最適化してウェブサイトのパフォーマンスを向上させる
<br /> 第 1 部と第 2 部では、Web サイトのパフォーマンス、ページ コンテンツ、サーバーを改善するためのいくつかのルールを紹介しました。さらに、JavaScript と CSS もページで頻繁に使用されます。これらを最適化することも、Web サイトのパフォーマンスを向上させる重要な側面です。
CS: ...
    スタイルシートを先頭に配置する CSS式の使用を避ける 外部JavaScriptとCSSを使用する JavaScriptとCSSを減らす @importの代わりに<link>を使用する フィルターの使用を避ける

JavaScript
    スクリプトをページの下部に配置する 外部のJavaScriptとCSSを使用する JavaScriptとCSSを削減する 重複するスクリプトを削除する DOMアクセスを減らす スマートなイベントハンドラーを開発する
17. スタイルシートを先頭に配置する Yahoo! のパフォーマンスを調査したところ、ドキュメントの <head /> 内にスタイルシートを配置するとページのダウンロードが高速化されることがわかりました。これは、スタイルシートを <head /> に配置すると、ページが段階的に読み込まれて表示されるようになるためです。
パフォーマンス重視のフロントエンド サーバーでは、多くの場合、ページが順番に読み込まれることが求められます。同時に、受信したコンテンツをブラウザが可能な限り表示してくれることも期待しています。これは、コンテンツが多いページや接続速度が遅いユーザーにとって特に重要です。進捗状況ポインターなどの視覚的なフィードバックをユーザーに返すことは、十分に研究され、文書化されています。私たちの研究では、HTML ページがプロセス ポインターです。ブラウザがファイル ヘッダー、ナビゲーション バー、トップ ロゴなどを順番に読み込むと、ページの読み込みを待っているユーザーへの視覚的なフィードバックとして機能します。これにより、全体的なユーザー エクスペリエンスが向上します。 Web ページ作成チュートリアル チャンネルのコンテンツを表示するには、ここをクリックしてください。スタイル シートをドキュメントの下部に配置すると、Internet Explorer を含む多くのブラウザーでコンテンツの整然としたレンダリングが停止するという問題があります。ブラウザは、スタイルの変更によってページ要素が再描画されるのを避けるためにレンダリングを一時停止します。ユーザーは空白のページに直面します。
HTML 仕様では、スタイル シートはページの <head /> セクションに配置する必要があることが明確に規定されています。「<a /> とは異なり、<link /> はドキュメントの <head /> セクションにのみ表示できますが、複数回使用できます。」白い画面が表示されたり、スタイルが設定されていないコンテンツが表示されたりするので、試してみる価値はありません。最善の解決策は、HTML 仕様に従ってドキュメントの <head /> にスタイルシートを読み込むことです。 CSS 式は、CSS プロパティを動的に設定する強力な (ただし危険な) 方法です。 Internet Explorer はバージョン 5 以降で CSS 式をサポートしています。次の例では、CSS式を使用して背景色を1時間ごとに切り替えることができます。18. CSS式の使用を避ける

背景色: 式( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
上記のように、式では JavaScript 式が使用されています。 CSS プロパティは、JavaScript 式の評価結果に基づいて設定されます。この表現方法は他のブラウザでは機能しないため、クロスブラウザ設計では Internet Explorer 専用に設定する方が便利です。
式の問題は、私たちが考えるよりも頻繁に評価されることです。ページを表示してズームするときだけでなく、ページをスクロールしたり、マウスを動かしたりしたときにも再計算する必要があります。 CSS 式にカウンターを追加すると、式が評価される頻度を追跡できます。ページ上でマウスを動かすだけで、簡単に 10,000 を超える計算を実行できます。
CSS 式の計算回数を減らす 1 つの方法は、初めて実行するときに結果を指定されたスタイル プロパティに割り当て、CSS 式の代わりにこのプロパティを使用する 1 回限りの式を使用することです。ページのライフサイクル中にスタイル プロパティを動的に変更する必要がある場合は、CSS 式の代わりにイベント ハンドラーを使用するのが有効な方法です。 CSS 式を使用する必要がある場合は、何千回も評価され、ページのパフォーマンスに影響を与える可能性があることに留意してください。
前のページ1 2 3 次のページ 続きを読む

<<:  IDEA2021 tomcat10 サーブレットの新しいバージョンの落とし穴

>>:  MySQL InnoDB ReplicaSet の簡単な紹介

推薦する

Centos6.5 に zabbix2.4 をインストールするチュートリアル図

centos-DVD1バージョンシステムの固定IPアドレスは192.168.159.128で、cen...

重要なmysqlログファイルの概要

著者: 丁易出典: https://chengxuzhixin.com/blog/post/mysq...

ウェブサイトのフッター沈下現象に対する3つの解決策を詳しく解説

背景多くのウェブサイトのデザインは、一般的にコンテンツ+フッターの2つの部分で構成されています。コン...

Centos6.5 で MySQL 5.7.19 をインストールして設定する方法

Centos6.5にmysql5.7.19をインストールするための詳細な手順は次のとおりです。 1....

Docker で nginx のログレベルを調整する方法

目次はじめにNginx Dockerファイル新しい会議もっと参考文献はじめに最近、アプリケーションの...

コメント付きのスネークゲームを実装する js

この記事の例では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体...

MySQL 圧縮パッケージ版 zip インストール設定方法

圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...

jQueryはシンプルなポップアップウィンドウ効果を実装します

この記事では、簡単なポップアップウィンドウ効果を実現するためのjQueryの具体的なコードを参考まで...

HTMLを使用してシンプルなメールテンプレートを作成する

今日は、「ローテク」の問題について書きたいと思います。ちなみに、私は JavaScript Week...

MySQL がデフォルト値を持つ NULL 列の使用を推奨しない理由

よく聞かれる答えは、列に NULL 値を使用するとインデックスが無効になるというものですが、実際にテ...

MySQL 同期遅延が発生したときに Seconds_Behind_Master が 0 のままになる理由

目次問題の説明原理分析問題分析拡大する総括する問題の説明ユーザーはプライマリ データベースに対して変...

W3Cチュートリアル(1):W3Cを理解する

1994 年に設立された組織である W3C は、共通プロトコルの開発を促進し、それらの相互運用性を確...

HTML テーブル マークアップ チュートリアル (28): セルの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、セルごとに異なる境界線の色を設定できます。基本的な構文<TD 境界...

Mysql 5.7.19 無料インストール バージョンで遭遇した落とし穴 (コレクション)

1. 公式ウェブサイトから 64 ビットの zip ファイルをダウンロードします。 2. インスト...

MySQLクエリのソートとページング関連

概要通常、データベース内のデータを直接表示することは望ましくないため、最後の 2 つのセクションでは...