ホームページ > 記事 > ウェブフロントエンド > HTML Webページの最適化と圧縮の実装手順

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

php中世界最好的语言オリジナル: 2017-11-29 11:57:413172ブラウズ

想要对自己的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内标签之间空格

如：

2664b5c137162ed32cb2c4b60e3a831f

　　ca532c8fbc0323c93614f1e58a1d475316b28748ea4df4d9c2150843fecfba68

16b28748ea4df4d9c2150843fecfba68

可以删除空格与换行后：

2664b5c137162ed32cb2c4b60e3a831fca532c8fbc0323c93614f1e58a1d475316b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

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

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 サイトの他の関連記事に注目してください。