웹 페이지 로딩 속도를 높이기 위해 HTML 코드 최적화
- 巴扎黑원래의
- 2017-08-21 11:29:122509검색
웹 개발자는 HTML 페이지에 대한 액세스 속도를 높이기 위해 복잡한 구성 요소 기술을 마스터해야 합니까? 대답은 다음과 같습니다. 반드시 그런 것은 아닙니다! 실제로 간단하고 사용하기 쉬운 HTML 및 DHTML 기술이 많이 있습니다. 고도로 숙련된 베테랑이든 프로그래밍 초보자이든, 이러한 내용을 이해하는 것은 필수적입니다. M t 분명히 HTML, 웹 페이지의 다운로드 시간을 줄이기 위해 "공개 스크립트"
를 줄이는 열쇠는 파일 크기를 줄이는 것입니다. 여러 페이지가 일부 구성 요소 콘텐츠를 공유하는 경우 이러한 공통 부분을 별도로 분리하는 것을 고려할 수 있습니다. 예를 들어 여러 HTML 페이지에서 사용되는 스크립트 프로그램을 독립적인 .js 파일에 작성한 다음 다음과 같이 페이지에서 호출할 수 있습니다.
1a726d19958ad1cde9b50ef77d42d125< ;/script>
이런 식으로 공개 파일을 한 번만 다운로드한 후 버퍼에 들어가면 됩니다. 다음에 공용 파일이 포함된 html 페이지를 다시 호출하면 다운로드 시간이 크게 단축됩니다.
스타일 시트 콘텐츠가 지하에서 작동하도록 하세요
CSS는 HTML 데코레이터이며 아름다운 웹페이지는 CSS 없이는 존재할 수 없습니다. HTML 페이지에서 CSS를 참조하는 방법에는 여러 가지가 있으며, 방법에 따라 효율성도 달라집니다. 일반적으로 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 사이에 정의된 스타일 제어 코드를 추출하여 별도의 .css 파일에 저장한 다음 HTML 페이지에서 3e76e57fc5dd9b761bdd2082385f4936 태그 또는 @import 태그를 사용하여 인용할 수 있습니다.
c9ccee2e6ea535a969eb3f532ad9fe89
@import url("mysheet1.css")
531ac245ce3e4fe3d50054a55f265927
주의할 점: 1. c9ccee2e6ea535a969eb3f532ad9fe89 .css 파일 ;2. @import 및 LINK 태그는 HTML 페이지의 HEAD 부분에 정의되어야 합니다.
소중한 메모리를 절약하는 두 가지 방법
HTML 페이지가 차지하는 메모리 공간을 최소화하는 것은 페이지 다운로드 속도를 높이는 효과적인 방법입니다. 이와 관련하여 주의가 필요한 두 가지 문제가 있습니다.
1. 동일한 스크립팅 언어 사용
HTML 페이지는 스크립트 프로그램 지원과 분리될 수 없습니다. 우리는 종종 페이지에 다음과 같은 여러 스크립팅 언어를 포함합니다. 자바스크립트와 VBScript. 그러나 눈치채셨는지 궁금합니다. 이러한 혼합 사용으로 인해 페이지 액세스 속도가 느려집니다. 그 이유는 여러 스크립트 코드를 해석하고 실행하려면 여러 스크립트 엔진을 메모리에 로드해야 하기 때문입니다. 따라서 동일한 스크립트 언어를 사용하여 페이지에 코드를 작성해 보시기 바랍니다.
2. IFrame을 능숙하게 사용하세요
36879df9ec853b781d355f37a71b3fa0 태그를 사용해 본 적이 있나요? 매우 좋은 기능입니다. HTML 문서에 두 번째 페이지의 내용을 포함하려는 경우 일반적인 방법은 16a3272e017844f82176ca6782b05081 태그를 사용하는 것입니다. 하지만 36879df9ec853b781d355f37a71b3fa0을 사용하면 모든 것이 더 쉬워집니다. 예를 들어 문서 미리보기 페이지를 개발하려면 왼쪽에 일련의 항목을 배치하고 오른쪽에 미리 볼 문서가 포함된 IFRAME을 배치할 수 있습니다. 마우스가 왼쪽의 각 항목 링크 위로 지나갈 때 새 IFRAME이 생성됩니다. 오른쪽에 생성된 문서를 미리 봅니다. 그렇게 하면 코드 효율성은 의심할 여지 없이 효율적이지만 동시에 처리량이 많아지고 결과적으로 속도가 느려집니다.
상관없습니다. 해결책이 있습니다. 단일 IFRAME을 사용하면 됩니다. 마우스가 새 테마를 가리키면 IFRAME 요소의 SRC 속성만 수정하면 됩니다. 이렇게 하면 언제든지 하나의 미리보기 문서만 메모리에 남게 됩니다.
애니메이션 위치 지정 속성 선택
매일 인터넷을 탐색하면 확실히 많은 애니메이션 효과를 볼 수 있습니다. 예를 들어 귀여운 토끼가 페이지를 왔다 갔다 하고 있는데... 이 효과를 구현하는 핵심 기술은 CCS 포지셔닝입니다. 일반적으로 그래픽 위치 지정 목적을 달성하기 위해 element.style.left 및 element.style.top 두 가지 속성을 사용합니다. 그러나 이렇게 하면 몇 가지 문제가 발생합니다. 왼쪽 속성은 문자열을 반환하고 측정 단위(예: 100px)를 포함합니다. 따라서 새 위치 좌표를 설정하려면 먼저 문자열 반환 값을 처리한 후 다음과 같이 할당해야 합니다.
희미한 stringLeft, intLeft
stringLeft = element.style.left
intLeft =parseInt(stringLeft)
intLeft = intLeft + 10
element.style.left = intLeft
그런 일을 하려면 이렇게 복잡한 코드를 작성해야 한다고 생각하시겠죠. 더 간단한 방법이 있을까요? 물론! 해당 문자열 반환 값의 포인트 값에 해당하는 posLeft, posTop, posWidth 및 posHeight의 4가지 속성을 살펴보세요. 다음 속성을 사용하여 코드 구현을 구현하는 코드를 다시 작성합니다.
Element.style.poslect+= 10
코드가 짧고 빠릅니다!
여러 애니메이션의 루프 제어
애니메이션 효과를 만들 때 물론 타이머의 사용은 불가분의 관계입니다. 일반적인 방법은 window.setTimeout을 사용하여 페이지에 요소를 지속적으로 배치하는 것입니다. 그런데 페이지에 표시할 애니메이션이 여러 개인 경우 타이머를 여러 개 설정해야 합니까? 대답은 '아니오'입니다! 그 이유는 간단합니다. 타이머 기능은 귀중한 시스템 리소스를 많이 소모하기 때문입니다. 그러나 우리는 여전히 페이지에서 여러 애니메이션을 제어할 수 있습니다. 비결은 루프를 사용하는 것입니다. 루프에서는 다양한 변수 값을 기반으로 해당 애니메이션의 위치가 제어됩니다. 전체 루프에서 하나의 window.setTimeout() 함수 호출만 사용됩니다.
가시성은 디스플레이보다 빠릅니다
그림을 표시하고 사라지게 하면 매우 흥미로운 효과를 얻을 수 있습니다. 이를 달성하는 방법에는 두 가지가 있습니다. CSS 가시성 속성을 사용하거나 디스플레이 속성을 사용하는 것입니다. 절대 위치에 있는 요소의 경우 대화 상자와 가시성은 동일한 효과를 갖습니다. 둘 사이의 차이점은 display:none으로 설정된 요소는 더 이상 문서 흐름의 공간을 차지하지 않지만 visible:hidden으로 설정된 요소는 여전히 원래 위치를 유지한다는 것입니다.
하지만 절대 위치에 있는 요소를 처리하려면 가시성을 사용하는 것이 더 빠릅니다.
작게 시작
DHTML 웹 페이지를 작성할 때 중요한 팁은 작게 시작하는 것입니다. 처음으로 DHTML 페이지를 작성할 때 페이지에서 알고 있는 모든 DHTML 기능을 사용하려고 시도하지 마십시오. 한 번에 하나의 새로운 기능을 사용하고 결과 변경 사항을 주의 깊게 관찰할 수 있습니다. 성능 저하가 발견되면 그 이유를 빨리 알아낼 수 있습니다.
DEFER of scripts
DEFER는 스크립트 프로그램의 강력한 기능 중 하나인 '숨겨진 영웅'입니다. 한 번도 사용해본 적이 없으실 수도 있지만 여기 소개를 읽고 나면 이 제품 없이는 살 수 없을 것 같습니다. 이는 스크립트 세그먼트에 즉시 실행될 필요가 없는 코드가 포함되어 있음을 브라우저에 알리고 SRC 속성과 함께 사용하면 이러한 스크립트가 백그라운드에서 다운로드되어 전경의 콘텐츠가 표시될 수도 있습니다. 정상적으로 사용자에게
마지막으로 다음 두 가지 사항에 유의하세요.
1. document.write가 직접 출력 효과를 생성하므로 defer-type 스크립트 세그먼트에서 document.write 명령을 호출하지 마세요.
2. 또한 defer 스크립트 세그먼트에는 스크립트를 즉시 실행하는 데 사용되는 전역 변수나 함수를 포함하지 마십시오.
동일한 URL에 대해 대소문자 일관성을 유지하세요
UNIX 서버가 대소문자를 구분한다는 사실은 모두 알고 있지만 Internet Explorer의 버퍼도 대문자와 소문자 문자열을 다르게 처리한다는 사실을 알고 계셨나요? 따라서 웹 개발자는 동일한 링크에 대한 URL 문자열의 대문자 사용을 다른 위치에서도 일관되게 유지해야 한다는 것을 기억해야 합니다. 그렇지 않으면 동일한 위치의 다른 파일 백업이 브라우저의 버퍼에 저장되므로 동일한 위치에서 콘텐츠를 다운로드하라는 요청 수도 늘어납니다. 이는 의심할 여지없이 웹 액세스의 효율성을 감소시킵니다. 따라서 동일한 위치에 있는 URL의 경우 다른 페이지에서 URL 문자열 대소문자를 일관되게 유지하십시오.
태그에 시작과 끝이 있게 해주세요
우리가 직접 작성하거나 다른 사람의 HTML 코드를 볼 때 태그에 시작과 끝이 있는 상황을 접해본 적이 있을 것입니다. 예:
하지만 게으르지 말고 닫는 태그를 완전히 작성하세요. 이렇게 하면 HTML 코드 형식이 표준화될 뿐만 아니라 페이지 표시 속도도 빨라집니다. Internet Explorer는 단락이나 목록 항목이 끝나는 위치를 파악하는 데 시간을 소비하지 않기 때문입니다. 위의 내용은 HTML 페이지를 가속화하기 위한 10가지 처리 기술을 나열한 것입니다. 이를 설명하는 것은 매우 간단하지만 본질을 진정으로 이해하고 숙달하고 하나의 예에서 추론을 이끌어 내는 것만으로 더 빠르고 더 나은 프로그램을 작성할 수 있습니다. -->
🎜를 줄이는 열쇠는 파일 크기를 줄이는 것입니다. 여러 페이지가 일부 구성 요소 콘텐츠를 공유하는 경우 이러한 공통 부분을 별도로 분리하는 것을 고려할 수 있습니다. 예를 들어 여러 HTML 페이지에서 사용되는 스크립트 프로그램을 독립적인 .js 파일에 작성한 다음 다음과 같이 페이지에서 호출할 수 있습니다.
1a726d19958ad1cde9b50ef77d42d125< ;/script>
이런 식으로 공개 파일을 한 번만 다운로드한 후 버퍼에 들어가면 됩니다. 다음에 공용 파일이 포함된 html 페이지를 다시 호출하면 다운로드 시간이 크게 단축됩니다.
스타일 시트 콘텐츠가 지하에서 작동하도록 하세요
CSS는 HTML 데코레이터이며 아름다운 웹페이지는 CSS 없이는 존재할 수 없습니다. HTML 페이지에서 CSS를 참조하는 방법에는 여러 가지가 있으며, 방법에 따라 효율성도 달라집니다. 일반적으로 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 사이에 정의된 스타일 제어 코드를 추출하여 별도의 .css 파일에 저장한 다음 HTML 페이지에서 3e76e57fc5dd9b761bdd2082385f4936 태그 또는 @import 태그를 사용하여 인용할 수 있습니다.
c9ccee2e6ea535a969eb3f532ad9fe89
@import url("mysheet1.css")
531ac245ce3e4fe3d50054a55f265927
주의할 점: 1. c9ccee2e6ea535a969eb3f532ad9fe89 .css 파일 ;2. @import 및 LINK 태그는 HTML 페이지의 HEAD 부분에 정의되어야 합니다.
소중한 메모리를 절약하는 두 가지 방법
HTML 페이지가 차지하는 메모리 공간을 최소화하는 것은 페이지 다운로드 속도를 높이는 효과적인 방법입니다. 이와 관련하여 주의가 필요한 두 가지 문제가 있습니다.
1. 동일한 스크립팅 언어 사용
HTML 페이지는 스크립트 프로그램 지원과 분리될 수 없습니다. 우리는 종종 페이지에 다음과 같은 여러 스크립팅 언어를 포함합니다. 자바스크립트와 VBScript. 그러나 눈치채셨는지 궁금합니다. 이러한 혼합 사용으로 인해 페이지 액세스 속도가 느려집니다. 그 이유는 여러 스크립트 코드를 해석하고 실행하려면 여러 스크립트 엔진을 메모리에 로드해야 하기 때문입니다. 따라서 동일한 스크립트 언어를 사용하여 페이지에 코드를 작성해 보시기 바랍니다.
2. IFrame을 능숙하게 사용하세요
36879df9ec853b781d355f37a71b3fa0 태그를 사용해 본 적이 있나요? 매우 좋은 기능입니다. HTML 문서에 두 번째 페이지의 내용을 포함하려는 경우 일반적인 방법은 16a3272e017844f82176ca6782b05081 태그를 사용하는 것입니다. 하지만 36879df9ec853b781d355f37a71b3fa0을 사용하면 모든 것이 더 쉬워집니다. 예를 들어 문서 미리보기 페이지를 개발하려면 왼쪽에 일련의 항목을 배치하고 오른쪽에 미리 볼 문서가 포함된 IFRAME을 배치할 수 있습니다. 마우스가 왼쪽의 각 항목 링크 위로 지나갈 때 새 IFRAME이 생성됩니다. 오른쪽에 생성된 문서를 미리 봅니다. 그렇게 하면 코드 효율성은 의심할 여지 없이 효율적이지만 동시에 처리량이 많아지고 결과적으로 속도가 느려집니다.
상관없습니다. 해결책이 있습니다. 단일 IFRAME을 사용하면 됩니다. 마우스가 새 테마를 가리키면 IFRAME 요소의 SRC 속성만 수정하면 됩니다. 이렇게 하면 언제든지 하나의 미리보기 문서만 메모리에 남게 됩니다.
애니메이션 위치 지정 속성 선택
매일 인터넷을 탐색하면 확실히 많은 애니메이션 효과를 볼 수 있습니다. 예를 들어 귀여운 토끼가 페이지를 왔다 갔다 하고 있는데... 이 효과를 구현하는 핵심 기술은 CCS 포지셔닝입니다. 일반적으로 그래픽 위치 지정 목적을 달성하기 위해 element.style.left 및 element.style.top 두 가지 속성을 사용합니다. 그러나 이렇게 하면 몇 가지 문제가 발생합니다. 왼쪽 속성은 문자열을 반환하고 측정 단위(예: 100px)를 포함합니다. 따라서 새 위치 좌표를 설정하려면 먼저 문자열 반환 값을 처리한 후 다음과 같이 할당해야 합니다.
희미한 stringLeft, intLeft
stringLeft = element.style.left
intLeft =parseInt(stringLeft)
intLeft = intLeft + 10
element.style.left = intLeft
그런 일을 하려면 이렇게 복잡한 코드를 작성해야 한다고 생각하시겠죠. 더 간단한 방법이 있을까요? 물론! 해당 문자열 반환 값의 포인트 값에 해당하는 posLeft, posTop, posWidth 및 posHeight의 4가지 속성을 살펴보세요. 다음 속성을 사용하여 코드 구현을 구현하는 코드를 다시 작성합니다.
Element.style.poslect+= 10
코드가 짧고 빠릅니다!
여러 애니메이션의 루프 제어
애니메이션 효과를 만들 때 물론 타이머의 사용은 불가분의 관계입니다. 일반적인 방법은 window.setTimeout을 사용하여 페이지에 요소를 지속적으로 배치하는 것입니다. 그런데 페이지에 표시할 애니메이션이 여러 개인 경우 타이머를 여러 개 설정해야 합니까? 대답은 '아니오'입니다! 그 이유는 간단합니다. 타이머 기능은 귀중한 시스템 리소스를 많이 소모하기 때문입니다. 그러나 우리는 여전히 페이지에서 여러 애니메이션을 제어할 수 있습니다. 비결은 루프를 사용하는 것입니다. 루프에서는 다양한 변수 값을 기반으로 해당 애니메이션의 위치가 제어됩니다. 전체 루프에서 하나의 window.setTimeout() 함수 호출만 사용됩니다.
가시성은 디스플레이보다 빠릅니다
그림을 표시하고 사라지게 하면 매우 흥미로운 효과를 얻을 수 있습니다. 이를 달성하는 방법에는 두 가지가 있습니다. CSS 가시성 속성을 사용하거나 디스플레이 속성을 사용하는 것입니다. 절대 위치에 있는 요소의 경우 대화 상자와 가시성은 동일한 효과를 갖습니다. 둘 사이의 차이점은 display:none으로 설정된 요소는 더 이상 문서 흐름의 공간을 차지하지 않지만 visible:hidden으로 설정된 요소는 여전히 원래 위치를 유지한다는 것입니다.
하지만 절대 위치에 있는 요소를 처리하려면 가시성을 사용하는 것이 더 빠릅니다.
작게 시작
DHTML 웹 페이지를 작성할 때 중요한 팁은 작게 시작하는 것입니다. 처음으로 DHTML 페이지를 작성할 때 페이지에서 알고 있는 모든 DHTML 기능을 사용하려고 시도하지 마십시오. 한 번에 하나의 새로운 기능을 사용하고 결과 변경 사항을 주의 깊게 관찰할 수 있습니다. 성능 저하가 발견되면 그 이유를 빨리 알아낼 수 있습니다.
DEFER of scripts
DEFER는 스크립트 프로그램의 강력한 기능 중 하나인 '숨겨진 영웅'입니다. 한 번도 사용해본 적이 없으실 수도 있지만 여기 소개를 읽고 나면 이 제품 없이는 살 수 없을 것 같습니다. 이는 스크립트 세그먼트에 즉시 실행될 필요가 없는 코드가 포함되어 있음을 브라우저에 알리고 SRC 속성과 함께 사용하면 이러한 스크립트가 백그라운드에서 다운로드되어 전경의 콘텐츠가 표시될 수도 있습니다. 정상적으로 사용자에게
마지막으로 다음 두 가지 사항에 유의하세요.
1. document.write가 직접 출력 효과를 생성하므로 defer-type 스크립트 세그먼트에서 document.write 명령을 호출하지 마세요.
2. 또한 defer 스크립트 세그먼트에는 스크립트를 즉시 실행하는 데 사용되는 전역 변수나 함수를 포함하지 마십시오.
동일한 URL에 대해 대소문자 일관성을 유지하세요
UNIX 서버가 대소문자를 구분한다는 사실은 모두 알고 있지만 Internet Explorer의 버퍼도 대문자와 소문자 문자열을 다르게 처리한다는 사실을 알고 계셨나요? 따라서 웹 개발자는 동일한 링크에 대한 URL 문자열의 대문자 사용을 다른 위치에서도 일관되게 유지해야 한다는 것을 기억해야 합니다. 그렇지 않으면 동일한 위치의 다른 파일 백업이 브라우저의 버퍼에 저장되므로 동일한 위치에서 콘텐츠를 다운로드하라는 요청 수도 늘어납니다. 이는 의심할 여지없이 웹 액세스의 효율성을 감소시킵니다. 따라서 동일한 위치에 있는 URL의 경우 다른 페이지에서 URL 문자열 대소문자를 일관되게 유지하십시오.
태그에 시작과 끝이 있게 해주세요
우리가 직접 작성하거나 다른 사람의 HTML 코드를 볼 때 태그에 시작과 끝이 있는 상황을 접해본 적이 있을 것입니다. 예:
<P>有头无尾标记举例
<UL>
<LI>第一个
<LI>第二个
<LI>第三个
</UL> 위 코드에는 세 개의 cbf331b4cac0bfbcf2a714e444b23b14 닫는 태그가 누락되어 있습니다. 그러나 이것이 올바른 실행을 방해하지는 않습니다. HTML에는 FRAME, IMG, P와 같은 다른 태그가 있습니다. 하지만 게으르지 말고 닫는 태그를 완전히 작성하세요. 이렇게 하면 HTML 코드 형식이 표준화될 뿐만 아니라 페이지 표시 속도도 빨라집니다. Internet Explorer는 단락이나 목록 항목이 끝나는 위치를 파악하는 데 시간을 소비하지 않기 때문입니다. 위의 내용은 HTML 페이지를 가속화하기 위한 10가지 처리 기술을 나열한 것입니다. 이를 설명하는 것은 매우 간단하지만 본질을 진정으로 이해하고 숙달하고 하나의 예에서 추론을 이끌어 내는 것만으로 더 빠르고 더 나은 프로그램을 작성할 수 있습니다. -->
위 내용은 웹 페이지 로딩 속도를 높이기 위해 HTML 코드 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML의 파일에는 다음이 포함됩니다.다음 기사：HTML의 파일에는 다음이 포함됩니다.