ホームページ ウェブフロントエンド 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 までご連絡ください。

ホットな記事タグ

メモ帳++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コードをうまくリファクタリングする方法

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

Java Spring Boot Security パフォーマンスの最適化: システムを高速化します。

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

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

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

PHP の高同時処理におけるコード最適化手法

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

Go言語でコードをリファクタリングする方法

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

C++ コードをリファクタリングするにはどうすればよいですか?

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

Python パフォーマンス最適化の実践: 基本から高度まで

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

Java フレームワークのパフォーマンス最適化におけるコード最適化の主要なスキル

See all articles