ホームページ ウェブフロントエンド jsチュートリアル JSコード最適化スキルの普及版(jsサイズ削減)_javascriptスキル

JSコード最適化スキルの普及版(jsサイズ削減)_javascriptスキル

May 16, 2016 pm 05:57 PM
コードの最適化

この記事を注意深く読むと、ほとんどの JS 最適化方法をこれら 3 つの方法から切り離すことができなくなります。

JS代码优化技巧之通俗版

(Web ページの合計サイズは 155,000 で、JS が 100,300 を占めます)

JS を最適化する時期です

JS の最適化に関する記事はすでにたくさんありますが、そのほとんどは変数、文字列、型などの非常に専門的なものです。それらは紹介する必要もありません。 . 知っていてもダメです。ほとんどのウェブマスターはそれを「使用」しています。JS にそれを配置および削除する方法を指示するだけです。

今日の Web サイトには、統計コード、共有ツール、コメント リスト、関連記事プラグインなどのツールが装備されており、強力な機能を実現するには、これらの JS プラグインを使用する必要があります。ウェブサイトの速度にも影響します。

最も一般的に使用される JS 最適化方法

ブログの JS 呼び出しから判断すると、現在速度に最も大きな影響を与えているのは、Wumi プラグイン (952 ミリ秒) と Nafoneng Ads (434 ミリ秒) です。本当に使用したい場合は、それを保持し、公式の教科書に従って適切に最適化することができます。以下では、Lu Songsong が最も一般的に使用される JS 最適化方法のいくつかを紹介します。

方法 1: 重要でない JS をページの下部に配置します

これは、重要でない JS をすべてページの本文の上に配置して非同期読み込みを実現します。つまり、Web ページが読み込まれるのを待って、最後にこれらの重要でない JS ファイルを読み込みます。 .JS なので、Web ページの速度には影響しません。

たとえば、控えめでゴージャスなテンプレートの util.js パブリック ファイルのデフォルトの効果は、Web ページを閲覧すると、「トップに戻ってコメントを書く」という特殊効果が Web ページに表示されます。 。 wumii (Wumi プラグイン JS) と jiathis (共有ツール JS) が util.js ファイルに統合されました。

JS代码优化技巧之通俗版

(重要ではないJSはページの下部に配置されています)

もちろん、他の Web サイトでもこれを行う必要があります。重要でない JS はすべてページの下部に配置します。

方法 2: JS ファイルをマージ

JS をマージする。つまり、HTTP リクエストを減らし、サーバーへのリクエストを減らしてプロセスを高速化します。これにはある程度のスキルが必要ですが、これは最も簡単な方法です。 :

何はともあれ、まず A ファイルを B ファイルに直接貼り付けます。Web ページが正常に動作する場合は、A ファイルを削除してください。一部の特殊効果が失敗しても問題はありません。 C ファイルをマージして置き換えます。競合しない 2 つの JS ファイルが常に存在します。

たとえば、私のブログの Baidu アド マネージャーには 6 つの広告スロットがあり、デフォルトでは 6 つの HTTP リクエストが必要です。これはサードパーティ JS であるため、1 つのリクエストには最速で 234 ミリ秒かかります。つまり、この広告マネージャーのせいで、Web ページを開くのにさらに 2 秒かかります。

JS代码优化技巧之通俗版

(JS の 2 番目の部分は 6 つのリクエストを 1 つに変換します)

公式チュートリアルに従って JS をマージした後、6 つの広告スロットの広告リクエストが 1 つのリクエストにマージされます。これにより、JS リクエストの数が大幅に削減され、ページ レンダリングのブロックが効果的に軽減され、広告の読み込み速度が向上します。

方法 3: JS ファイルの重量を減らす

三項演算子、オブジェクト検索の削減、JS を簡潔にする方法については説明しません。「JS Weight Loss Tool」を使用します。通常、このようなツールは、JS ファイル内の数百行のコードを 1 行に圧縮し、サイズを小さくします。推奨ツール: http://javascriptcompressor.com/ または ソフトウェア バージョン (良好なフォールト トレランス効果)

このようなツールを使用すると、空白行などの問題が発生するため、JS 機能が無効になることがあります。最も簡単な方法は、Dreamweaver を使用して、圧縮された JS を DW に入れることです。エラーが発生したことを示すメッセージが自動的に表示されます。エラーが発生した場所に新しい行を追加するか、復元します。

最後に、ネチズンの個人的な経験を紹介しましょう:

JS代码优化技巧之通俗版

サイトが時間の経過とともにゆっくりと成長すると、多くの問題が見つかります。その 1 つは、サイトがますます肥大化し、実行速度も低下することです。最適化、つまりサイトを最適化するために最善を尽くすことが非常に重要になっています。

これらの方法は理解しやすいので、皆さんに役立つことを願っています。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Javaコードをうまくリファクタリングする方法 Javaコードをうまくリファクタリングする方法 Jun 15, 2023 pm 09:17 PM

Java は世界で最も人気のあるプログラミング言語の 1 つとして、多くの企業や開発者にとって選ばれる言語となっています。ただし、コードの品質と開発効率を維持するには、コードのリファクタリングが不可欠です。 Java コードは複雑であるため、時間の経過とともに保守がますます困難になる可能性があります。この記事では、コードの品質と保守性を向上させるために Java コードをリファクタリングする方法について説明します。リファクタリングの原則を理解する Java コードのリファクタリングの目的は、単に「コードを変更する」ことではなく、コードの構造、可読性、保守性を向上させることです。なぜなら

Java Spring Boot Security パフォーマンスの最適化: システムを高速化します。 Java Spring Boot Security パフォーマンスの最適化: システムを高速化します。 Feb 19, 2024 pm 05:27 PM

1. セキュリティ アノテーションの使用が多すぎることを避けるためのコードの最適化: コントローラーとサービスでは、@PreAuthorize や @PostAuthorize などのアノテーションの使用を減らすようにしてください。これらのアノテーションにより、コードの実行時間が増加します。クエリ ステートメントの最適化: springDataJPA を使用する場合、クエリ ステートメントを最適化するとデータベースのクエリ時間が短縮され、システムのパフォーマンスが向上します。セキュリティ情報のキャッシュ: 一般的に使用される一部のセキュリティ情報をキャッシュすると、データベース アクセスの数が減り、システムの応答速度が向上します。 2. データベースの最適化にインデックスを使用する: 頻繁にクエリが実行されるテーブルにインデックスを作成すると、データベースのクエリ速度が大幅に向上します。ログと一時テーブルを定期的にクリーンアップする: ログと一時テーブルを定期的にクリーンアップします。

PHP の高同時処理におけるコード最適化手法 PHP の高同時処理におけるコード最適化手法 Aug 11, 2023 pm 12:57 PM

PHP のコード最適化テクニック 高度な同時実行処理 インターネットの急速な発展に伴い、高度な同時実行処理が Web アプリケーション開発における重要な問題になっています。 PHP 開発では、同時多発リクエストに対処するためにコードをどのように最適化するかが、プログラマーが解決する必要がある難しい問題となっています。この記事では、PHP の高同時実行処理におけるコード最適化テクニックをいくつか紹介し、コード例を追加して説明します。キャッシュの合理的な使用 同時実行性が高い状況では、データベースに頻繁にアクセスすると、過剰なシステム負荷が発生し、データベースへのアクセスが比較的遅くなります。したがって、できることは、

プログラムのパフォーマンスを最適化するための一般的な方法は何ですか? プログラムのパフォーマンスを最適化するための一般的な方法は何ですか? May 09, 2024 am 09:57 AM

プログラムのパフォーマンスの最適化方法には、次のようなものがあります。 アルゴリズムの最適化: 時間の複雑さが低いアルゴリズムを選択し、ループと条件文を減らします。データ構造の選択: ルックアップ ツリーやハッシュ テーブルなどのデータ アクセス パターンに基づいて、適切なデータ構造を選択します。メモリの最適化: 不要なオブジェクトの作成を回避し、使用されなくなったメモリを解放し、メモリ プール テクノロジを使用します。スレッドの最適化: 並列化できるタスクを特定し、スレッド同期メカニズムを最適化します。データベースの最適化: インデックスを作成してデータの取得を高速化し、クエリ ステートメントを最適化し、キャッシュまたは NoSQL データベースを使用してパフォーマンスを向上させます。

C++ コードをリファクタリングするにはどうすればよいですか? C++ コードをリファクタリングするにはどうすればよいですか? Nov 04, 2023 pm 04:40 PM

C++ は非常に強力で柔軟性があり、広く使用されているプログラミング言語ですが、プロジェクトが継続的に開発され、コードが相対的に再利用され続けると、コードの品質や可読性の低下などの問題が発生します。現時点では、コードの品質と保守性を向上させるために、コードをリファクタリングする必要があります。この記事では、C++ コードをリファクタリングする方法を紹介します。目標を定義する コードのリファクタリングを開始する前に、達成したいことを定義する必要があります。たとえば、コードの可読性の向上、コードの重複の削減、コードのパフォーマンスの向上などが必要な場合があります。なし

Go言語でコードをリファクタリングする方法 Go言語でコードをリファクタリングする方法 Jun 02, 2023 am 08:31 AM

ソフトウェア開発の継続的な深化とコードの継続的な蓄積により、コードのリファクタリングは現代のソフトウェア開発プロセスにおいて避けられない部分となっています。これは、システムの確立されたコードを変更して、その構造、パフォーマンス、読みやすさ、またはその他の関連する側面を改善するプロセスです。この記事では、Go 言語でコードのリファクタリングを行う方法を検討します。リファクタリング目標の定義 コードのリファクタリングを開始する前に、明確なリファクタリング目標を設定する必要があります。このコードにはどのような問題があるのか​​など、いくつかの質問を自問する必要があります。再構築する必要がある

Java フレームワークのパフォーマンス最適化におけるコード最適化の主要なスキル Java フレームワークのパフォーマンス最適化におけるコード最適化の主要なスキル Jun 03, 2024 pm 01:16 PM

Java フレームワークのパフォーマンスの最適化では、次のようなコードの最適化が重要です。1. オブジェクトの作成を減らす。2. 適切なデータ構造を使用する。4. 文字列操作を最適化する。これらのヒントに従うことで、Hibernate クエリを最適化してデータベース呼び出しの数を減らすなど、フレームワークのパフォーマンスを向上させることができます。

Python パフォーマンス最適化の実践: 基本から高度まで Python パフォーマンス最適化の実践: 基本から高度まで Feb 20, 2024 pm 12:00 PM

基本的な最適化 正しい Python バージョンを使用します。一般に、新しいバージョンの Python の方がパフォーマンスが高く、より優れたメモリ管理と組み込みの最適化を提供します。適切なライブラリを選択する: コードを最初から作成するのではなく、専用のライブラリを使用することで時間を節約し、パフォーマンスを向上させることができます。ループの数を減らす: 可能であれば、ネストされたループの使用を避けてください。リスト内包表記とジェネレーター式を使用する方が、より効率的な方法です。データ構造の最適化では、適切なコンテナが選択されます。リストはランダム アクセスに適しており、辞書は高速なキーと値の検索に適しており、タプルは不変データに適しています。事前に割り当てられたメモリを使用する: 配列またはリストのサイズを事前に割り当てることで、メモリ割り当てと最適化のオーバーヘッドを削減できます。 Numpy と Pandas の活用: 科学技術計算とデータ分析には、Num

See all articles