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内标签之间空格

如：

 

　　

 

 

可以删除空格与换行后：

이것은 공백과 개행 문자가 차지하는 바이트를 절약할 수 있습니다.

웹 게시 버전에서는 DW를 사용하여 중복된 공백과 빈 줄을 삭제할 수 있습니다. 다시 편집하려면 DW 소프트웨어로 이동하여 코드 형식을 지정하세요.

4. 테이블 유형을 레이아웃할 때 div 레이아웃 대신 테이블을 적절하게 사용 - TOP

테이블 데이터 목록 레이아웃이라면 테이블 레이아웃을 사용하는 것이 div 레이아웃보다 낫기 때문에 테이블을 선택하는 것이 좋습니다. , 그러나 테이블 레이아웃을 사용하는 것은 div 레이아웃보다 html 태그 코드를 저장하고 CSS 스타일을 저장하지 않습니다.

아래 표와 같이데이터 유형을 사용하는 것이 좋습니다. TABLE 태그 + CSS 스타일 레이아웃

html 웹 페이지 코드 압축 테이블 태그 레이아웃 테이블

이 목록 유형 테이블 테이블과 유사하게 사용하는 것이 좋습니다. 테이블 태그 레이아웃

5. 웹페이지 GZIP 압축 - TOP

웹페이지 Gzip 압축 기능은 자체 서버에 설정하는 것이 좋습니다.

1. GZIP을 열면 어떤 이점이 있나요?

답변: Gzip을 켜면 사용자 브라우저에 출력되는 데이터가 압축되어 네트워크를 통해 전송되는 데이터의 양이 줄어들고 탐색 속도가 빨라집니다.

2. IIS의 Gzip 압축 기능을 활성화하는 방법:

답변: 먼저 정적 파일(HTML)을 압축해야 하는 경우 하드 디스크에 디렉터리를 만들고 사용자에게 쓰기 권한을 부여해야 합니다. IUSR_머신 이름" . 동적 파일(PHP, asp, aspx)을 압축하는 경우 해당 페이지가 매번 동적으로 생성되고 압축 후에 포기되므로 필요하지 않습니다. 그런 다음 IIS 관리자에서 "웹 사이트" - 속성을 마우스 오른쪽 버튼으로 클릭합니다. 아래의 특정 사이트가 아니라 전체 웹 사이트입니다. "서비스" 탭으로 이동하여 동적 콘텐츠 압축 및 정적 콘텐츠 압축 활성화를 선택합니다. 그런 다음 웹 사이트에서 서버 확장을 선택하고 새 서버 확장을 만듭니다. 이름은 중요하지 않습니다. 아래 파일을 추가하는 경로는 c:windowssystem32inetsrvgzip.dll입니다. 그런 다음 이 확장을 활성화합니다. 이때 정적 콘텐츠는 압축이 가능하지만, 동적 콘텐츠의 경우 aspx 파일은 압축 범위에 포함되지 않습니다. 기본 압축 파일에는 이 확장자가 없기 때문입니다. 그리고 관리 인터페이스에서 확장을 추가할 수 있는 위치를 찾을 수 없습니다. 현재는 구성 파일만 수정할 수 있습니다. c:windowssystem32inetsrv 아래에 MetaBase.xml 파일이 있습니다. 이를 메모장으로 열고 IIsCompressionScheme을 찾을 수 있습니다. 이름이 같은 세 개의 섹션, 즉 세 번째 섹션은 걱정하지 마세요. 두 섹션은 기본적으로 동일합니다. 매개변수, 이 두 단락의 HcScriptFileExtensions 매개변수 아래에 aspx 줄을 추가하세요. 압축할 다른 동적 프로그램이 있는 경우 여기에도 추가하세요. HcDynamicCompressionLevel이 9로 변경됩니다(0-10, 9가 가장 비용 효율적인 것입니다). 그런 다음 압축 후 속도를 경험하려면 IIS 서비스를 다시 시작해야 합니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

html과 xhtml의 차이점에 대한 자세한 설명

CSS를 사용하여 이미지 회전 효과를 만드는 방법

HTML 웹 페이지를 최적화하는 방법

위 내용은 HTML 웹페이지 최적화 및 압축 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!