HTML 최적화는 웹 페이지를 가속화합니다

웹 페이지의 다운로드 시간을 줄이는 핵심은 파일 크기를 줄이는 것입니다. 여러 페이지가 일부 성분 내용을 공유하면 이러한 공통 부품을 별도로 분리하는 것을 고려할 수 있습니다. 예를 들어, 여러 HTML 페이지에서 사용한 스크립트를 독립적 .js 파일로 작성한 다음 다음과 같이 페이지에서 호출 할 수 있습니다.

<scriptsrc = myfile.js> </script>

이러한 방식으로 공개 파일은 한 번만 다운로드 한 다음 버퍼를 입력하면됩니다. 다음에 공개 파일이 포함 된 HTML 페이지에 다시 전화하면 다운로드 시간이 크게 줄어 듭니다.

CSS는 HTML 드레스 업이며 아름다운 웹 페이지는 없을 수 없습니다. HTML 페이지에서 CSS를 참조하는 방법에는 여러 가지가 있으며 다른 방법의 효율성은 다릅니다. 일반적으로 <style> </style> 사이에 정의 된 스타일 제어 코드를 추출하고 별도의 .CSS 파일로 저장 한 다음 <link> 태그 또는 @import 태그의 HTML 페이지에서 참조 할 수 있습니다.

<스타일>

@ImportUrl (mysheet1.css);

</스타일>

참고 사항 : 1. 2. @import 및 링크 태그는 HTML 페이지의 헤드 부분에 정의되어야합니다.

HTML 페이지가 차지하는 메모리 공간을 최소화하는 것은 페이지 다운로드 속도를 높이는 효과적인 방법입니다. 이와 관련하여 다음에주의를 기울여야 할 두 가지 문제가 있습니다.

HTML 페이지는 스크립트 프로그램의 지원과 분리 할 수 ​​없습니다. 우리는 종종 JavaScript 및 vbscript와 같은 여러 스크립팅 언어를 페이지에 포함시킵니다. 그러나 당신이 눈치 채지 못하는지 모르겠습니다. 그러한 혼합물은 페이지의 액세스 속도가 느려집니다. 그 이유는 여러 스크립트 코드를 해석하고 실행하려면 여러 스크립트 엔진을 메모리에로드해야합니다. 따라서 페이지에 동일한 스크립팅 언어로 코드를 작성하십시오.

<iframe> 태그를 사용 했습니까? 매우 훌륭한 기능입니다. HTML 문서에 두 번째 페이지의 내용을 포함하려면 일반적인 방법은 <frameset> 태그를 사용하는 것입니다. 그러나 <iframe>을 사용하면 모든 것이 간단 해집니다. 예를 들어, 문서 미리보기 페이지를 개발하려면 왼쪽에 일련의 주제와 오른쪽에 iframe을 배치 할 수 있으며, 여기에는 미리 볼 문서가 포함되어 있습니다. 마우스가 왼쪽의 각 주제 링크를 통과하면 문서를 미리 볼 수 있도록 오른쪽에 새 iframe을 만듭니다. 그렇게함으로써 코드 효율은 의심 할 여지없이 효율적이지만 동시에 처리가 심하고 속도가 느린 속도로 이어집니다.

단일 Iframe 만 사용하십시오. 마우스가 새로운 주제를 가리키면 iframe 요소의 SRC 속성 만 수정하면됩니다. 이런 식으로 하나의 미리보기 문서만이 언제든지 메모리에 남아 있습니다.

매일 온라인으로 페이지를 탐색하면 많은 애니메이션 효과가 나타납니다. 예를 들어, 귀여운 작은 토끼가 페이지에서 앞뒤로 걷고 있습니다 ...이 효과를 달성하기위한 핵심 기술은 CCS 포지셔닝입니다. 일반적으로 그래픽 포지셔닝의 목적을 달성하기 위해 element.style.left 및 element.style.top을 사용합니다. 그러나이를 수행하면 몇 가지 문제가 발생합니다. 왼쪽 속성은 문자열을 반환하고 측정 단위 (예 : 100px)를 포함합니다. 따라서 새 위치 좌표를 설정하려면 먼저 다음과 같이 값을 할당하기 전에 문자열의 리턴 값을 처리해야합니다.

Dimstringleft, Intleft

stringleft = emeter.style.left

intleft = parseint (Stringleft)

intleft = intleft 10

요소 .style.left = intleft;

당신은 그런 작은 일을하기 위해 그러한 복잡한 코드를 작성해야한다고 생각할 것입니다. 더 간결한 방법이 있습니까? 이 4 가지 속성을보십시오 : Posleft, Postop, Poswidth 및 Posgeight는 해당 문자열 리턴 값의 포인트 수에 해당합니다. 자,이 속성을 사용하여 코드를 다시 작성하여 위의 코드에서 구현 한 기능을 구현하십시오.

요소 .style.posleft = 10

코드는 짧지 만 더 빠릅니다!

물론 애니메이션 효과와 관련하여 타이머 사용은 분리 할 수 ​​없습니다. 일반적인 방법은 Window.SetTimeout을 사용하여 페이지에서 요소를 지속적으로 찾는 것입니다. 그러나 페이지에 여러 개의 애니메이션이 표시되면 여러 타이머를 설정해야합니까? 대답은 아니오입니다! 그 이유는 간단합니다. 타이머 함수는 많은 귀중한 시스템 리소스를 소비합니다. 그러나 우리는 여전히 페이지에서 여러 애니메이션을 제어 할 수 있으며 트릭은 루프를 사용하는 것입니다. 루프에서 다른 변수 값에 따라 해당 애니메이션의 위치를 ​​제어하면 하나의 Window.settimeout () 함수 호출 만 전체 루프에서 사용됩니다.

그림이 나타나고 때때로 보이게하면 흥미로운 효과가 생깁니다. 이를 달성하는 두 가지 방법이 있습니다. CSS의 가시성 속성 또는 디스플레이 속성을 사용하십시오. 절대 위치 요소의 경우, Diplay 및 가시성은 동일한 효과를 갖습니다. 둘의 차이점은 표시되도록 설정된 요소가 표시된다는 것입니다. 없음은 더 이상 문서 스트림의 공간을 차지하지 않으며 가시성으로 설정된 요소는 여전히 원래 위치에 남아 있습니다.

그러나 절대 위치의 요소를 처리하려면 가시성을 사용하는 것이 더 빠릅니다.

DHTML 웹 페이지를 작성하는 데 중요한 팁은 다음과 같습니다. DHTML 페이지를 처음으로 작성할 때는 페이지에 알고있는 모든 DHTML 기능을 사용하지 마십시오. 한 번에 단일 새로운 기능 만 사용할 수 있으며 결과 변경 사항을주의 깊게 관찰 할 수 있습니다. 성능이 떨어졌다면 그 이유를 빨리 찾을 수 있습니다.

DEFER는 스크립팅 프로그램의 강력한 기능 중에서 이름이없는 영웅입니다. 당신은 그것을 사용한 적이 없을 수도 있지만, 여기서 소개를 읽은 후에는 당신이 그것 없이는 살 수 없다고 생각합니다. 브라우저에 스크립트 세그먼트에 즉시 실행할 필요가없는 코드가 포함되어 있으며 SRC 속성과 함께 이러한 스크립트를 백그라운드에서 다운로드 할 수 있으며 전경의 내용이 사용자에게 정상적으로 표시됩니다.

1. Defer-Type 스크립트 블록에서 word.write 명령을 호출하지 마십시오. document.write가 직접 출력 효과를 생성하기 때문입니다.

2. 또한 DEFER 스크립트 블록에서 스크립트를 즉시 실행하는 데 사용할 전역 변수 또는 함수를 포함하지 마십시오.

우리는 모두 UNIX 서버가 CASE에 민감하다는 것을 알고 있지만 Internet Explorer의 버퍼도 케이스 문자열을 다르게 취급한다는 것을 알고 있습니까? 따라서 웹 개발자로서 다른 위치에서 동일한 링크의 URL 문자열의 사례 일관성을 유지해야합니다. 그렇지 않으면 동일한 위치에있는 다른 파일의 백업이 브라우저 버퍼에 저장되며 동일한 위치에서 콘텐츠를 다운로드하라는 요청 수가 증가합니다. 이 모든 것은 의심 할 여지없이 웹 액세스 효율성을 줄입니다. 따라서 동일한 위치에있는 URL은 다른 페이지에서 URL 문자열의 사례 일관성을 유지하십시오.

다른 사람들의 HTML 코드를 스스로 작성하거나 볼 때, 우리는 마크가 끝나지 않는 상황을 만났을 것입니다. 예를 들어:

<p> 머리와 꼬리 자국이없는 예

<ul>

<li> 첫 번째

<li> 두 번째

<li> 세 번째

</ul>

분명히 위의 코드에는 3 개의 엔드 태그가 누락되었습니다. 그러나 이것은 제대로 실행되는 것을 막지 않습니다. HTML에는 프레임, IMG 및 P와 같은 몇 가지 태그가 있습니다.

그러나 제발 게으르지 마십시오. 엔드 마크를 그대로 작성하십시오. 이것은 HTML 코드 형식 표준을 만들뿐만 아니라 페이지의 디스플레이 속도를 높이게합니다. Internet Explorer는 단락 또는 목록 항목이 끝나는 위치를 판단하고 계산하는 데 시간을 소비하지 않기 때문입니다.

머리와 꼬리 자국이있는 <p> 예 </p>

<ul>

<li> 첫 </li>

<li> 두 번째 </li>

<li> 세 번째 </li>

</ul>

자, 위의에는 HTML 페이지 속도를 높이기위한 10 가지 처리 기술이 나와 있습니다. 이것을 설명하는 것은 간단하지만, 그것의 본질을 진정으로 이해하고 습득하고 한 예 또는 다른 예에서 배우는 것은 더 빠르고 더 나은 프로그램을 쓸 수 있습니다.