알아야 할 HTML 최적화 팁-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

알아야 할 HTML 최적화 팁

高洛峰

Mar 12, 2017 pm 05:18 PM

html

웹페이지 성능을 향상시키기 위해 많은 개발자는 자바스크립트, 이미지 최적화, 서버 구성, 파일 압축 또는 CSS 조정과 같은 다양한 측면에서 시작합니다.

HTML이 웹 인터페이스 개발에 필수적인 핵심 언어임에도 불구하고 병목 현상에 도달했다는 것은 분명합니다. HTML 페이지의 로드도 점점 더 무거워지고 있습니다. 대부분의 페이지에는 평균 40K의 공간이 필요합니다. 예를 들어 일부 대형 웹사이트에는 수천 개의 HTML 요소가 포함되어 있어 페이지 크기가 더 커집니다.

HTML 코드의 복잡성과 페이지 요소 수를 효과적으로 줄이는 방법. 이 글에서는 주로 이 문제를 해결하기 위해 페이지 로드 속도를 높일 수 있는 간결하고 명확한 HTML 코드를 작성하는 방법을 소개합니다. . 이며 다양한 장치에서 잘 실행될 수 있습니다.

설계 및 개발 과정에서는 다음 원칙을 따라야 합니다.

구조적 분리: 스타일 콘텐츠가 아닌 HTML을 사용하여 구조를 추가합니다. ;
정리 유지: 작업 흐름에 코드 검증 도구를 추가하고 도구나 스타일 마법사를 사용하여 코드 구조와 형식을 유지하세요.
새로운 언어: 요소 구조와 의미 마크업을 가져옵니다.
접근성 보장: ARIA 속성 및 Fallback 속성 등을 사용합니다.
테스트: 웹사이트가 여러 기기에서 잘 실행되고 사용할 수 있도록 합니다. 에뮬레이터 및 성능 도구.

알아야 할 HTML 최적화 팁

HTML, CSS, JavaScript의 관계

HTML은 페이지의 구조와 내용을 조정하는 데 사용되는 마크업 언어입니다. . HTML은 스타일 내용을 수정하는 데 사용할 수 없으며 헤더 태그에 텍스트 내용을 입력할 수 없으므로 코드가 길고 복잡해집니다. 대신 CSS를 사용하여 레이아웃 요소와 모양을 수정하는 것이 더 적합합니다. HTML 요소 의 기본 모양은 브라우저의 기본 스타일 시트에 의해 정의됩니다. 예를 들어 Chrome에서는 h1 태그 요소가 32px Times 굵은 글꼴로 렌더링됩니다.

세 가지 일반적인 디자인 규칙:

HTML을 사용하여 페이지 구조를 구성하고, CSS를 사용하여 페이지 표시 방식을 수정하고, JavaScript를 사용하여 페이지 기능을 구현합니다. CSS ZenGarden은 행동 분리를 매우 잘 보여줍니다.
CSS나 JavaScript로 구현할 수 있다면 HTML 코드를 덜 사용하세요.
CSS 및 JavaScript 파일을 HTML과 별도로 저장합니다. 이는 캐싱 및 디버깅에 도움이 될 수 있습니다.

다음과 같이 문서 구조를 최적화할 수도 있습니다.

HTML5를 사용하세요. document type , 다음은 빈 파일입니다.

<!DOCTYPE html>
<html>

<head>
 <title>Recipes: pesto</title>
</head>

<body>

  <h1 id="Pesto">Pesto</h1>

  <p>Pesto is good!</p>

</body>
</html>

다음에서 CSS 파일을 참조하세요.

<head>
  <title>My pesto recipe</title>

  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">

</head>

이 두 가지 방법을 사용하면 브라우저는 구문 분석하기 전에 CSS 정보를 준비합니다. HTML 코드. 이는 페이지 로딩 성능을 향상시키는 데 도움이 됩니다.

페이지 하단의 닫는 본문 태그 앞에 JavaScript 코드를 입력하면 브라우저가 JavaScript 코드를 구문 분석하기 전에 페이지를 로드하므로 페이지 로딩 속도가 향상됩니다. 페이지 요소.

<body>

  ...

  <script src="/js/global.js">
  <script src="js/local.js">

</body>

Defer 및 비동기 속성을 사용하면 비동기 속성이 있는 스크립트 요소가 순서대로 실행된다는 보장이 없습니다.

JavaScript 코드에 핸들러를 추가할 수 있습니다. HTML 인라인 코드에 절대로 추가하지 마세요. 예를 들어 다음 코드는 쉽게 오류가 발생할 수 있고 유지 관리가 어렵습니다.

index.html:

<head>
  
  ...

  <script src="js/local.js">

</head>

<body onload="init()">

  ...

  <button onclick="handleFoo()">Foo</button>

  ...

</body>

다음 작성 방법이 더 좋습니다:

index.html:

<head>

  ...

</head>

<body>

  ...

  <button id="foo">Foo</button>

  ...

  <script src="js/local.js">

</body>

js/local. js:

init();
var fooButton =
    document.querySelector(&#39;#foo&#39;);
fooButton.onclick = handleFoo();

검증

웹페이지를 최적화하는 한 가지 방법은 브라우저가 불법 HTML을 처리하도록 하는 것입니다. 코드. 합법적인 HTML 코드는 디버그하기 쉽고, 더 적은 메모리를 차지하고, 더 적은 리소스를 소비하며, 구문 분석하기 쉽고, 렌더링 및 실행 속도가 더 빠릅니다. 불법적인 HTML 코드로 인해 반응형 디자인을 구현하기가 매우 어렵습니다.

템플릿을 사용할 때 합법적인 HTML 코드는 매우 중요합니다. 템플릿만으로는 잘 실행되지만 다른 모듈과 통합하면 다양한 오류가 보고되는 경우가 있으므로 HTML 코드의 품질을 보장해야 합니다. 다음 조치를 취하십시오.

작업 흐름에 유효성 검사 기능을 추가하십시오. HTMLHint 또는 SublineLinter와 같은 유효성 검사 플러그인을 사용하면 코드 오류를 감지하는 데 도움이 됩니다.
HTML5 문서 유형 사용
HTML 계층 구조를 쉽게 유지 관리하고 왼쪽 열린 부분에 중첩된 요소를 방지하세요. 상태 .
각 요소의 닫는 태그를 반드시 추가하세요.
불필요한 코드를 제거하세요. 자체 닫는 요소에 대해 닫는 태그를 추가할 필요가 없으며, 값이 있으면 True입니다.

<video src="foo.webm" autoplay controls>

코드 형식

형식 일관성으로 인해 HTML 코드를 쉽게 읽고, 이해하고, 최적화하고 디버깅할 수 있습니다.

语义标记

语义指意义相关的事物，HTML 可从页面内容中看出语义：元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素，如

，

选择合适的元素来编写代码可保证代码的易读性：

使用

(
,
…)表示标题，
注意使用
标签之前应添加
标签；
选择合适的HTML5语义元素如
，
,
,
;
使用

描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。
使用和标签替代和标签。
使用元素，输入类型，占位符及其他属性来强制验证。
将文本和元素混合，并作为另一元素的子元素，会导致布局错误，

例如：

<p>Name: <input type="text" id="name"></p>

换种写法会更好：

   1:  <p>

   2:    <label>Name:</label><input>

   3:  </p>

 <br>

布局

要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。

使用

元素修饰文本，而不是布局；默认

是自动提供边缘，而且其他样式也是浏览器默认提供的。
避免使用
分行，可以使用block元素或CSS显示属性来代替。
避免使用

来添加水平线，可使用CSS的border-bottom 来代替。
不到关键时刻不要使用p标签。
尽量少用Tables来布局。
可以多使用Flex Box
使用CSS 来调整边距等。

CSS

虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：

避免内联css
最多使用ID类一次
当涉及多个元素时，可使用Class来实现。

以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理，因此我们在日常开发中，能够考虑到用户体验，后期维护等方面，则会产生更高效的开发。在进行前端开发时，不忘借助开发工具来助力开发过程。新一代HTML5 / JavaScript UI控件Wijmo，大而全面的前端开发工具包，为企业应用提供更加灵活的操作体验，现已全面支持Angular 2。

위 내용은 알아야 할 HTML 최적화 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

메뉴에서 점선 분할 효과의 중심 정렬을 달성하기 위해 CSS의 Flexbox 레이아웃을 사용하는 방법은 무엇입니까?Apr 05, 2025 pm 01:24 PM

메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?

온라인 코드 편집기는 코드 입력을 구현하는 데 사용하는 HTML 요소는 무엇입니까?Apr 05, 2025 pm 01:21 PM

웹 코드 편집기의 HTML 요소 분석 많은 온라인 코드 편집기를 사용하면 사용자가 HTML, CSS 및 JavaScript 코드를 입력 할 수 있습니다. 최근에 누군가가 제안했습니다 ...

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

드림위버 CS6

시각적 웹 개발 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.