简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

고성능 HTML 애플리케이션 작성을 위한 몇 가지 제안_HTML/Xhtml_웹페이지 제작

WBOY
풀어 주다： 2016-05-16 16:36:28
원래의
1059명이 탐색했습니다.

웹페이지 성능을 어떻게 향상할 수 있나요?

대부분의 개발자는 서버 구성, 파일 압축 및 파일 병합은 물론 CSS 조정(작은 이미지 병합)을 통해 JavaScript 및 이미지를 통해 최적화합니다.

항상 인터넷의 핵심 언어였음에도 불구하고 잘못된 HTML은 항상 무시됩니다.

HTML은 점점 더 커지고 있습니다. 상위 100개 웹사이트의 각 HTML 페이지는 대부분 약 40K입니다. Amazon과 Yahoo는 수천 개의 HTML 페이지를 사용합니다. youtube.com의 메인 페이지에는 무려 3,500개의 HTML 요소가 있습니다.

HTML의 복잡성과 페이지의 요소 수를 줄이면 구문 분석 시간이 크게 향상되지 않습니다. 그러나 HTML은 매우 빠른 웹 페이지를 구축하고 다양한 장치에 적응하며 성공에 영향을 미치는 중요한 요소입니다.
이 기사에서는 간결하고 깔끔한 HTML을 작성하여 빠르게 로드되고 여러 장치를 지원하며 디버그 및 유지 관리가 쉬운 웹사이트를 만드는 방법을 배웁니다.

코드를 작성하는 데 정해진 방법은 없습니다. 특히 HTML은 더욱 그렇습니다. 이것은 단지 일반적인 경험일 뿐, 유일한 올바른 선택은 아닙니다.
HTML, CSS 및 자바스크립트

HTML은 구조와 내용을 표현하는 데 사용되는 마크업 언어입니다.

HTML을 사용하여 스타일과 스타일을 표시해서는 안됩니다. "더 크게" 표시되도록 제목 태그(h1~h6)에 텍스트를 넣거나 단지 들여쓰기를 위해 인용부호 요소를 사용하지 마세요. 대신 CSS를 사용하여 요소의 모양과 레이아웃을 변경하세요.

HTML 요소의 기본 모양은 브라우저의 기본 스타일을 통해 이루어집니다. Firefox, Internet Explorer 및 Opera는 모두 다릅니다. 예를 들어 Chrome에서는 h1 요소가 기본적으로 32px 크기로 렌더링됩니다.

세 가지 기본 원칙:

HTML을 사용하여 구조를 표현하고, CSS를 사용하여 다양한 스타일과 테마를 표현합니다. 사용자 작업에 응답하는 JavaScript입니다.

필요한 경우 HTML, CSS를 사용하고 필요한 경우 JavaScript를 사용하세요. 예: 대부분의 경우 유효성 검사에는 HTML 양식을 사용하고 애니메이션에는 CSS 또는 SVG를 사용할 수 있습니다.

HTML 코드에서 CSS와 JavaScript를 분리하세요. 캐시 가능하게 만들면 코드 디버깅이 더 쉬워집니다. 프로덕션 환경에서 CSS와 JavaScript는 축소 및 병합될 수 있으며 빌드 시스템의 일부로 포함되어야 합니다. 참고* JavaScript 구축(컴파일) 시스템 공모전
문서 문서 구조

참조

HTML5 문서 유형 사용:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html>
  3. <머리>
  4. <제목>레시피: 페스토 제목>
  5. 머리>
  6. <몸>
  8. <h1>페스토h1>
  9. <p>페스토 맛있어요!p>
  11. 몸>
  12. html>

헤드 요소와 같이 페이지 상단에 있는 CSS 파일을 인용하세요.

CSS 코드클립보드에 콘텐츠 복사
  2. 나의 페스토 레시피
    3. "/css/global.css"> "css/local.css"
  3. >
  4. 이러한 방식으로 브라우저는 혼란스러운 페이지 레이아웃을 렌더링하지 않고 HTML을 구문 분석하기 전에 스타일을 미리 로드할 수 있습니다.
    5. 본문이 닫히기 전 페이지 맨 아래에 JavaScript를 배치하세요. 이렇게 하면 JavaScript가 로드되기 전에 브라우저가 페이지를 렌더링할 수 있으므로 페이지 렌더링 시간이 향상됩니다.

JavaScript 코드

클립보드에 콘텐츠 복사

  1. ...
    2.   
  2.   
  3. <본문>   
  4.   ...   
  5.   "foo">Foo   
  6.   ...   
  7.   "js/local.js">   
  8.   
  9.   
  10. 　　js/local.js:   
  11.   
  12. 초기화();   
  13. var fooButton =   
  14.     document.querySelector('#foo');   
  15. fooButton.onclick = handleFoo();  

　합법적 HTML

　　웹사이트 구축에 적합한 HTML입니다.则。

　　但是，这不你放任的理由。다양한 HTML更容易调试，往往文件更small，速島更快，・用资源更少，因为它们渲染更快。无效的HTML让响应式设计难以实施。

　　使用模板의 时候写에는 매우 다양한 HTML이 있습니다.

　　현재 BUILD系统中验证HTML: 使用验证插件，如HTMLHint 및 SublimeLinter来检查你HTML적 설명.

　　使사용HTML5文档类型。

　　请务必保持HTML的层次：正确嵌套元素，确保没有任何未关闭的元素。它可以帮助调试者添加注释。

XML/HTML 코드复复内容到剪贴板
  1. <div id="foobar" >  
  2. ...   
  3. div> 
  4. <동영상 src="foo. webm" />
  7. <동영상 src="foo. webm"> 
  8. <p>동영상 요소는 지원되지 않습니다.p> 
  9. 동영상>

반대로 불필요한 코드를 제거하면 HTML 페이지가 더욱 깔끔해집니다

img 등과 같이 자체 닫는 요소에는 "/"를 추가할 필요가 없습니다.

속성을 ​​추가하지 않으면 설정 속성에는 값이 없습니다(이 경우 자동으로 재생되지 않으며 컨트롤 제어가 없습니다),

동영상, 속성이 없습니다

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <동영상 src="foo.webm"> 

다음 두 가지가 더 좋습니다

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <동영상 src="foo.webm" 자동 재생="false" 컨트롤="거짓">
  2. <동영상 src="foo. webm" 자동 재생="true" 컨트롤 ="사실"> 

이것이 더 읽기 쉽습니다

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <동영상 src="foo.webm" 자동 재생 컨트롤>

스타일렛 및 스크립트 태그에는 유형 속성이 필요하지 않습니다. 기본값은 css 및 javascript입니다.

프로토콜 주소를 최적화하는 것이 좋습니다(http 또는 https를 제거하면 현재 프로토콜에 따라 자동으로 구성됩니다)

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <a href="//en.wikipedia .org/wiki/Tag_soup">태그 수프a>

얼핏 보면 제목처럼 보이는 등 가독성을 높였습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <h2><a href="/연락처">연락처a><h2>

그리고 이건 링크 같아요

연락처>

소문자를 사용해야 합니다

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <아 HREF="/" >집아>

케이스를 섞어서 더 역겨워보이네요

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <H2>페스토h2> 

의미 태그

"Semantic"은 의미와 관련된 것을 의미합니다

HTML은 의미 있는 콘텐츠, 즉 콘텐츠와 일치하는 요소와 설명을 표시해야 합니다.

HTML5에는

,
및

의 제목은

,
,

관련 라벨：
html 高性能
원천：php.cn
이전 기사：HTML_HTML/Xhtml_Web 페이지 제작 시 rel 속성 분석 다음 기사：HTML의 태그에 대한 자세한 설명과 비활성화 방법_HTML/Xhtml_웹페이지 제작
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다. 다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...
에서 2024-04-06 19:39:29
0
1
441
사이트에 CSS 스타일이 적용되지 않음 Bootstrap5를 사용하여 웹사이트를 만들고 있는데 index.css 속성이 index.html에 적용되지 않습니다. 서비스 카드 위로 마우스를 가져가면 배경...
에서 2024-04-06 17:12:23
0
1
336
ASP 클래식 코드를 MYSQL 데이터베이스에 문자열로 저장할 가능성 ASP 클래식 코드를 MySQL 데이터베이스에 저장하고 끌어올 때 코드를 실행하도록 할 수 있습니까? 예를 들어 변수 이름을 문자열에 저장하고 표시하기 전에 AS...
에서 2024-04-06 13:38:43
0
1
358
높이가 예상한 것과 다른 CSS 그리드에 문제가 있습니다. 어떤 실수를 저지를 수 있습니까? 저는 현재 CSS 그리드를 배우고 있는데 이 카드를 그리드로 나누어서 만들어 달라는 요청을 받았습니다. 제가 만들고 싶은 그리드의 사진이 첨부되어 있습니다. 실제...
에서 2024-04-06 12:52:14
0
1
339
Vuetify v-card는 v-col에서 가능한 모든 높이에 맞습니다. vue와 vuetify를 사용하여 로그인/등록 페이지를 만들고 있습니다. 아래에 코드를 넣었습니다(저는 이탈리아 사람이기 때문에 텍스트는 이탈리아어로 되어 있지만...
에서 2024-04-06 10:29:26
0
1
406
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！