<br /> 第 1 部と第 2 部では、Web サイトのパフォーマンス、ページ コンテンツ、サーバーを改善するためのいくつかのルールを紹介しました。さらに、JavaScript と CSS もページで頻繁に使用されます。これらを最適化することも、Web サイトのパフォーマンスを向上させる重要な側面です。 CS: ...
JavaScript
パフォーマンス重視のフロントエンド サーバーでは、多くの場合、ページが順番に読み込まれることが求められます。同時に、受信したコンテンツをブラウザが可能な限り表示してくれることも期待しています。これは、コンテンツが多いページや接続速度が遅いユーザーにとって特に重要です。進捗状況ポインターなどの視覚的なフィードバックをユーザーに返すことは、十分に研究され、文書化されています。私たちの研究では、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 の簡単な紹介
レイアウト部分: <div id="スライダー"> <!-- ...
当社には、外部ネットワークからの干渉を受けることが多いサーバーが多数あります。侵入者はポート 338...
ブラウザはTIF形式の画像を表示しますコードをコピーコードは次のとおりです。 <html>...
1. 一般的に、CentOS では mariadb がデフォルトでインストールされているため、まず ...
MySql ダウンロード1. 公式サイトを開き、ダウンロード パスを見つけます。ダウンロード アドレ...
目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...
MySQL の機能: MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレー...
ソースコードプレビュー: https://github.com/jdf2e/nutui NutUI ...
vue-cli は stimulsoft.reports.js を使用します (ナニーレベルのチュー...
async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...
簡単な説明<br />IE6および7では、一般的なaタグ(HTMLで記述され、DOM操作...
この効果を実現するには、まず CSS のプロパティを知っておく必要があります。 text-shado...
目次1. 必須属性1. 名前2. バージョン2. 説明情報1. 説明2. キーワード3. 著者4. ...
方法1: </html>の後に次のコードを追加してください。コードをコピーコードは次のと...
目次1. ページレイアウト2. 画像のアップロードと表示3. キャンバスを初期化する4. テンプレー...