ホームページ ウェブフロントエンド htmlチュートリアル HTML Webページの最適化と圧縮の実装手順

HTML Webページの最適化と圧縮の実装手順

Nov 29, 2017 am 11:57 AM
html 圧縮 成し遂げる

想要对自己的HTML网页实现优化压缩的话需要检查5个方面,分别是,将table改为div布局,缩减精简div、span、ul li等系列标签,删除多余空格,表格类型布局时候适当使用table替代div布局,html网页GZIP压缩,将table改为div布局 。下面给大家详细的介绍一下

尽量将table标签布局html重构div布局,可以节约至少40%的代码量。由于div代码少于table布局的html网页,所以搜索引擎索引权重也优于table布局的html网页。

缩减精简div、span、ul li等系列标签  

布局DIV+CSS网页时候,我们有时候可以节约一些DIV布局代码,减少代码量。

如下案例代码:

<div class="div"> 
  <ul> 
  <li>DIV</li> 
  <li>DIV</li> 
  <li>DIV</li> 
  </ul> 
</div> 
可以改为:
<ul class="div"> 
  <li>DIV</li> 
  <li>DIVC/li> 
  <li>DIV</li> 
</ul>
ログイン後にコピー

这样可以节约一对div标签,从而减少html代码量,起到压缩html作用。这样直接对ul命名css样式类,可以区别在一个页面不同地方使用ul li列表标签。

三、删除多余空格   -   TOP


删除多余空格换行,可以有效地压缩html代码占用字节,一般在开发完成后可以对html中代码进行删除换行和空格内容。

可以借助于DW软件进行批量删除html内标签之间空格

如:

<div class="divcss5"> 

  <div ...></div> 

</div> 

可以删除空格与换行后:

<div class="divcss5"><div ...></div></div>

これにより、スペースと改行が占めるバイト数を節約できます。

Web パブリッシング バージョンでは、DW を使用して冗長なスペースや空白行を削除できることに注意してください。再度編集したい場合は、DW ソフトウェアに移動してコードをフォーマットします。

4. テーブルタイプをレイアウトするときは、div レイアウトの代わりに table を適切に使用します - TOP


table データリストレイアウトの場合は、div レイアウトよりも table レイアウトを使用する方が優れているため、table を選択することをお勧めします。 , ただし、テーブル レイアウトを使用すると、html タグ コードが保存されず、div レイアウトよりも CSS スタイルが保存されます。

以下の表に示すようにデータ型は、TABLEタグ+CSSスタイルのレイアウトを使用することを推奨します

html Webページのコード圧縮テーブルタグレイアウトテーブル

このリスト型テーブルテーブルと同様に、使用することを推奨しますtable タグのレイアウト

5. Web ページの GZIP 圧縮 - TOP


Web ページの GZIP 圧縮機能を独自のサーバーに設定することをお勧めします。

1. GZIP を開くメリットは何ですか?

回答: Gzip をオンにすると、ユーザーのブラウザに出力されるデータが圧縮されるため、ネットワークを介して送信されるデータ量が削減され、閲覧速度が向上します。

2. IIS の Gzip 圧縮機能を有効にする方法:

回答: まず、静的ファイル (HTML) を圧縮する必要がある場合は、ハードディスク上にディレクトリを作成し、ユーザーに書き込み権限を与える必要があります。 IUSR_マシン名」。動的ファイル (PHP、asp、aspx) を圧縮する場合、そのページは毎回動的に生成され、圧縮後に放棄されるため、必要はありません。次に、IIS マネージャーで、[Web サイト] - [プロパティ] を右クリックします。下の特定のサイトではなく、Web サイト全体を選択します。 「サービス」タブに入り、「動的コンテンツ圧縮と静的コンテンツ圧縮を有効にする」を選択します。次に、Web サイトの下のサーバー拡張機能を選択し、新しいサーバー拡張機能を作成します。名前は重要ではありません。以下のファイルを追加するパスは c:windowssystem32inetsrvgzip.dll で、この拡張機能を有効にします。現時点では、静的コンテンツは圧縮できますが、動的コンテンツの場合、aspx ファイルは圧縮範囲外です。デフォルトの圧縮可能ファイルにはこの拡張子がついていないためです。また、管理インターフェースには拡張機能を追加する場所が見つかりません。現時点では、設定ファイルを変更することしかできません。 c:windowssystem32inetsrv に MetaBase.xml ファイルがあります。これをメモ帳で開くと、deflate、gzip、および Parameters という同じ名前の 3 つのセクションがあります。 2 つのセクションは基本的に同じです。これらの 2 つの段落のパラメータ HcScriptFileExtensions の下に aspx の行を追加します。圧縮する他の動的プログラムがある場合は、それらもここに追加します。 HcDynamicCompressionLevel は 9 に変更されます (0 ~ 10、9 が最もコスト効率が高いです)。次に、圧縮後の速度を体験するには、IIS サービスを再起動する必要があります。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。


関連書籍:

htmlとxhtmlの違いの詳しい説明

CSSを使用して画像回転効果を作成する方法

HTML Webページを最適化する方法

以上がHTML Webページの最適化と圧縮の実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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)

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

HTML のネストされたテーブル

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTMLの表の境界線

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML 左マージン

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブルのレイアウト

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML 内のテキストの移動

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリスト

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML の onclick ボタン

PHPでHTML/XMLを解析および処理するにはどうすればよいですか? PHPでHTML/XMLを解析および処理するにはどうすればよいですか? Feb 07, 2025 am 11:57 AM

PHPでHTML/XMLを解析および処理するにはどうすればよいですか?

See all articles