H5+C3이 프런트엔드 인터페이스를 최적화하는 방법-H5 튜토리얼-php.cn

이번에는 H5+C3로 프런트엔드 인터페이스를 최적화하는 방법과 H5+C3으로 프런트엔드 인터페이스를 최적화할 때 주의사항에 대해 알려드리겠습니다.

웹사이트의 프런트 엔드를 최적화하는 것은 지금 많은 사람들이 관심을 갖고 있는 일이자, 많은 사람들에게 꼭 필요한 작업이기도 합니다. 그렇다면 더 나은 프런트 엔드 최적화를 위해 HTML과 CSS를 어떻게 사용합니까? 다음 기사에서는 프런트 엔드 최적화에 대한 몇 가지 팁을 제공합니다. 관심이 있으시면 함께 알아보십시오.

웹 콘텐츠

http 요청 수를 줄이세요

웹사이트 응답 시간의 대부분은 웹 리소스를 다운로드하는 데 소요됩니다. 여기서 리소스는 이미지, CSS, JS, Flash 등을 의미합니다. 여기서 말하는 요청 수를 줄이는 것이 응답 시간을 단축하는 열쇠입니다.

일반적으로 말하면 두 가지 유형으로 나눌 수 있습니다.

하나는 페이지 디자인을 단순화하여 요청 수를 줄이는 것입니다.

둘째, 웹 페이지의 더 복잡한 스크립트 또는 CSS 파일은 여러 스크립트를 사용하거나 하나의 파일로 패키지할 수 있습니다. 이미지는 CSS Sprites(이미지 접합 기술)를 사용하여 여러 이미지를 하나의 이미지로 결합한 다음 CSS를 사용하여 표시할 위치를 제어합니다. 이 사진을 통해 요청 수를 줄일 수 있습니다. 이 섹션의 내용은 JD.com 아래 섹션의 CSS 포지셔닝을 참조하세요.

페이지 점프 방지

페이지 점프를 방지하는 목적은 무엇입니까? 즉, 클라이언트는 서버로부터 점프 응답을 받으면 서버 응답에 있는 위치에 지정된 주소에 따라 다시 요청을 보냅니다. 즉, SEO

에서 흔히 사용하는 301 리디렉션입니다. 예:

이제 소스코드 시대를 맞이하는 학생들이 소스코드 포럼에 참여하길 바랍니다. 서버사이드 301 리다이렉션을 구현하는 방법입니다

RewriteEngine On

RewriteCond %{HTTP_HOST} !^www.itsource.cn$ [NC]//클라이언트가 요청한 주소입니다

RewriteRule ^(.*)$ http://bbs.itsource.cn/$1 [R=301,L]//클라이언트가 실제로 본 웹페이지입니다

지연 로딩

여기서 말하는 지연 로딩은 먼저 웹 페이지에 처음 로드되는 가장 작은 콘텐츠가 무엇인지 알아야 하며 나머지 콘텐츠는 지연 로딩을 사용하여 구현할 수 있습니다.

가장 일반적인 방법은 Javascript가 콘텐츠 로드를 지연시킬 수 있다는 것입니다. 이 방법은 먼저 웹페이지를 개발할 때 웹페이지가 자바스크립트 없이 정상적인 페이지 효과를 표시할 수 있는지 확인한 다음 지연된 로딩 스크립트를 사용하여 일부 고급 기능적 효과를 완성하는 것입니다.

미리 로드 중

이 방법은 위의 방법과 정확히 반대입니다. 즉, 웹 페이지의 일부 리소스가 미리 로드된다는 의미입니다.

1. 무조건 조기 로딩

이 방법은 웹페이지가 로드된 후 즉시 다른 콘텐츠를 로드하는 것입니다. 예를 들어 Taobao는 로드가 완료된 후 일부 사진을 로드합니다

2. 조건부 로딩

바이두 검색 등 사용자가 입력한 정보를 바탕으로 로드해야 할 콘텐츠를 추론합니다.

H5+C3이 프런트엔드 인터페이스를 최적화하는 방법

예상대로 로드 중

이는 좀 더 발전된 상황입니다. 일반적으로 웹 페이지를 다시 디자인할 때 발생합니다. 사용자의 액세스 동작으로 인해 이전 웹 페이지의 로컬 캐시가 있지만 새로 디자인된 웹 사이트는 미리 추가할 수 없습니다. 일부 캐시는 이전 웹 페이지에 저장됩니다. 이 경우 새 웹 페이지에서는 먼저 일부 리소스를 로컬 영역에 다운로드합니다.

DOM 요소 수 줄이기

웹페이지에 요소가 너무 많으면 웹페이지 성능에도 영향을 미치게 되고, 우리가 평소에 사용하는 웹페이지의 부하와 스크립트 실행도 늘어나게 된다고 생각하시면 됩니다. JS에서 어떤 효과를 얻으려면 먼저 관련 DOM 요소를 찾은 다음 관련 작업을 수행해야 합니까? 우리 웹 페이지에 요소가 너무 많으면 시간 차이가 아주 확연하게 나타나나요? 따라서 DOM 요소 수를 줄이는 것은 여전히 웹 페이지 성능에 영향을 미칩니다.

도메인 이름을 기준으로 콘텐츠 구분

다른 대형 웹사이트를 보면 이미지의 주소가 해당 웹사이트의 기본 도메인 이름과 다른 경우가 많고, 관련 리소스를 저장하기 위해 여러 도메인 이름을 사용하는 경우가 있는데 왜 이런 식으로 사용되는 걸까요? 실제로 브라우저에서는 일반적으로 동일한 도메인 이름에 대한 다운로드 연결 수에 제한이 있습니다. 도메인 이름을 기준으로 다운로드 콘텐츠를 나누면 브라우저의 병렬 다운로드 연결 수가 간접적으로 늘어날 수 있습니다. 웹사이트의 전반적인 다운로드 리소스 용량이 크게 향상됩니다. 이를 통해 성능 최적화 효과를 달성합니다.

iframe 수를 줄이세요

앞서 iframe의 사용법에 대해 이야기했지만, 실제 프로젝트에서는 사용 시 장점과 단점에 주의하시기 바랍니다.

장점:

느린 콘텐츠를 로드하는 데 사용할 수 있으며 스크립트를 병렬로 다운로드할 수 있습니다

단점:

빈 콘텐츠가 있는 iframe을 사용하면 로딩 시간이 소모되고 페이지가 로딩되지 않습니다

404를 피하세요

404는 공통 서버 리소스를 찾을 수 없습니다. 첫째, 사용자 경험에 영향을 미치고 쓸모 없는 정보를 반환하는 페이지를 엽니다. 둘째, 외부 스크립트를 웹 페이지에 로드해야 하며 404가 반환됩니다. 이는 다른 스크립트의 다운로드를 차단할 뿐만 아니라 클라이언트가 다운로드한 콘텐츠(404)도 Javascript로 구문 분석합니다.

CSS

스타일시트를 상단에 고정

웹 콘텐츠는 위에서 아래로 로드되므로 웹 페이지 로드 속도를 높이기 위해 CSS 스타일을 웹 페이지 헤드에 배치하려고 최선을 다합니다. 이는 콘텐츠가 많은 웹 페이지에 매우 중요합니다. 사용자가 페이지를 기다리게 하지 않아도 됩니다. 흰색 화면에서는 이 사용자 경험도 꽤 좋습니다.

스타일 시트를 맨 아래에 놓으면 대부분의 브라우저는 이를 구현할 때 다시 그리는 것을 피하려고 노력하기 때문에 브라우저가 다운로드한 웹 페이지 렌더링을 거부하는 상황이 발생합니다. 그래서 이것도 중요한 포인트입니다.

CSS Expressions

을 피하세요 기본 CSS3에 익숙한 일부 친구들은 항상 CSS3의 강력한 열기 기능에 감탄했으며 일부 CSS 표현식을 사용하여 CSS 속성을 동적으로 설정하는 것을 좋아합니다. 이는 IE5~IE8에서 지원되며 다른 브라우저에서는 표현식이 무시됩니다.

다른 CSS 표현식의 문제점은 우리가 생각하는 것보다 훨씬 더 많이 다시 계산된다는 점입니다. 따라서 부적절한 사용으로 인한 과도한 성능 오버헤드를 방지하기 위해 해당 표현식을 사용하지 않으려고 노력합니다.

@import

대신 링크 태그를 사용하세요. 웹 페이지 디자인에서는 CSS를 참조하기 위해 링크 태그를 사용하고 @import를 사용하지 않는 것이 좋습니다. 이유는 매우 간단합니다. CSS 스타일을 웹 페이지의 콘텐츠 하단에 배치하기 위함이라는 것을 알 수 있습니다. .

사진

이미지 최적화

웹 페이지를 제작할 때 배너와 같은 이미지의 로드 속도가 매우 느리고 웹 사이트 속도에도 영향을 미치며 수백 K에서 몇 메가바이트에 이릅니다. 그렇다면 그러한 사진을 최적화할 여지가 있습니까? ?

오늘은 디자이너들이 자주 찾는 이미지 최적화 플랫폼 Zhitu.com

을 소개해드리려고 합니다. 보시다시피 원본 이미지와 최적화된(스마트 이미지) 이미지의 차이는 500K 이상입니다. 이미지가 많은 웹사이트의 경우 전체 사이트의 모든 이미지를 최적화하면 다음과 같습니다. 얼마나 많은 트래픽이 절약될까요! 따라서 저는 이러한 이미지 최적화를 적극 권장합니다.

빈 이미지를 피하세요 src

img 태그를 사용할 때 빈 이미지 src를 사용하지 마세요. 빈 이미지 src로 인해 브라우저가 서버에 요청을 보내게 되므로 시간과 서버 리소스가 완전히 낭비됩니다. 특히 귀하의 웹사이트가 매일 많은 사람들이 방문할 때, 이러한 빈 요청으로 인한 피해는 무시할 수 없습니다

CSS Sprite 최적화

Spirite에서 이미지를 가로로 정렬하고, 세로로 정렬하면 파일 크기가 늘어납니다. Spirite에서는 서로 가까운 색상을 결합하면 색상 수를 줄일 수 있습니다. 이상적인 상황은 PNG8 형식에 적응하기 위한 256 색상 미만입니다. 성령 형상의 중간에 큰 간격을 두지 마십시오. 이로 인해 파일 크기가 많이 늘어나지는 않지만 사용자 에이전트가 이미지를 픽셀 맵으로 압축 해제하는 데 더 적은 메모리가 필요합니다.

HTML에서 이미지 크기를 조정하지 마세요

페이지에 맞게 이미지 크기를 조정하려면 큰 이미지를 사용하지 마세요. 작은 이미지가 필요한 경우 작은 이미지를 사용하세요. 그 이유는 매우 간단합니다. 전체 효과를 얻기 위해 큰 이미지를 로드하는 대신, 이 비용은 결국 트래픽이 상당히 큽니다. 집중형 웹사이트 시대.

작고 캐시 가능한 favicon.ico를 사용하세요

일반적으로 기업 웹사이트나 웹마스터는 아이콘 파일 favicon.ico를 추가하는 것을 좋아합니다. 서버에 있는지 여부에 관계없이 브라우저는 이 아이콘을 요청하려고 합니다. 따라서 이 아이콘이 존재하고 파일이 가능한 한 작은지 확인해야 합니다. 만료 시간을 길게 설정하세요

. 요약:

마지막으로 이 기사는 주로 초보 웹 디자이너를 대상으로 합니다. 이 기사의 내용은 HTML, CSS, Javascript, 이미지 등에 관한 것입니다. 물론 몇 가지 다른 방법도 있는데, 이에 대해서는 다음 기사에서 설명하겠습니다.

물론 위에서 언급한 일반적인 프런트엔드 최적화 팁을 얻으셨나요? 웹페이지에 이와 유사한 오류가 발생하지 않도록 하세요. 그렇지 않으면 사용자 경험에 큰 영향을 미치게 됩니다. 결국 지금은 WEB2.0 시대입니다. 사용자가 웹페이지에 만족하지 못하는 것은 개발자의 잘못입니다. 아니요, 그래서 더 좋고 뛰어난 웹페이지를 만들기 위해 우리는 이러한 작은 세부 사항에도 최대한 많은 관심을 기울이고 있습니다.

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