전통문화대전망 - 전통 미덕 - H5+C3 프런트엔드 인터페이스 최적화 방법

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

이번에는 H5+C3 가 프런트 엔드 인터페이스를 최적화하는 방법, H5+C3 가 프런트 엔드 인터페이스를 최적화하는 방법에 대한 고려 사항이 있습니다. 다음은 실전 사례입니다. 사이트 프런트엔드에 대한 최적화는 현재 많은 사람들이 비교적 신경을 쓰는 일이며, 현재 많은 사람들이 반드시 해야 할 일이다. 그렇다면 프런트 엔드 최적화를 위해 HTML 과 CSS 를 어떻게 사용할 수 있을까요? 다음 문장 들은 프런트 엔드 최적화를 위한 몇 가지 팁을 제공합니다. 관심 있는 것을 함께 알아보세요.

웹 컨텐츠

감소 $ [NC]// 클라이언트 요청 주소

rewriterule (.*) $/$1 [r = 31, l]/ 가장 일반적인 것은 Javascript 가 콘텐츠 로드를 지연시킬 수 있다는 것입니다. 즉, 웹 페이지를 개발할 때 먼저 웹 페이지가 JavaScript 가 없을 때 정상적인 페이지 효과를 잘 표시할 수 있도록 한 다음 로드 스크립트를 연기하여 고급 기능 효과를 얻을 수 있습니다. 미리 로드 는 위와 정반대입니다. 즉, 일부 웹 페이지의 리소스를 미리 로드한 다음 세 가지 범주로 나뉩니다. 1. 무조건 미리 로드 이 방법은 웹 페이지 로드가 완료되면 바로 타오바오가 로드하는 것과 같은 다른 콘텐츠를 로드하는 것입니다. 예상 로드 이것은 비교적 크다. 이는 일반적으로 웹 페이지를 재설계할 때, 사용자의 액세스 행위로 인해 로컬로 오래된 웹 페이지의 캐시가 있고, 새로 디자인된 웹 사이트는 없다. 디자이너는 기존 웹 페이지에 새로운 웹 사이트를 미리 추가하여 사용할 수 있는 콘텐츠를 미리 추가할 수 있다. 이렇게 하면 새 웹 페이지가 먼저 일부 리소스를 로컬에 다운로드할 수 있다 DOM 요소 수 감소 웹 페이지에 요소가 너무 많으면 웹 페이지 성능에 영향을 주고 웹 페이지 로드와 스크립트 실행도 가중될 수 있습니다. JS 를 사용할 때 몇 가지 효과를 얻을 수 있습니다. 먼저 관련 DOM 요소를 찾은 다음 관련 작업을 수행해야 하는지 생각해 보십시오. 만약 우리 홈페이지에 원소가 너무 많다면, 아주 뚜렷한 시차가 있을 수 있지 않을까요? 따라서 DOM 요소 수를 줄여도 웹 페이지 성능에 영향을 줍니다. 도메인 이름을 기준으로 내용 구분 많은 경우 다른 대형 사이트를 볼 때 사진의 주소가 사이트의 기본 도메인 이름과 다를 수 있습니다. 관련 리소스를 저장하기 위해 여러 도메인 이름을 사용합니다. 그렇다면 왜 이렇게 사용해야 합니까? (윌리엄 셰익스피어, Northern Exposure (미국 TV 드라마), 도메인 이름, 도메인 이름, 도메인 이름 등) 실제로 브라우저는 일반적으로 같은 도메인 이름의 다운로드 연결 수에 제한이 있으며 도메인 이름에 따라 다운로드를 나누면 브라우저 병렬 다운로드 연결을 간접적으로 늘릴 수 있습니다. 사이트의 전반적인 다운로드 자원 능력을 크게 향상시켰다. 이를 통해 성능을 최적화할 수 있습니다.

iframe 수 감소

전에 iframe 사용 방법에 대해 얘기했지만 실제 프로젝트에서는 사용할 때 장단점에 주의를 기울여야 합니다.

이점:

느린 컨텐츠를 로드하는 데 사용할 수 있으며, 스크립트는

단점을 병렬로 다운로드할 수 있습니다.

iframe 컨텐츠가 비어 있으면 로드 시간도 소모되고 페이지 로드 방지

44 는 서버 리소스를 찾을 수 없는 일반적인 경우다 두 번째는 웹 페이지에 외부 스크립트를 로드해야 한다는 것입니다. 그 결과 44 가 반환되어 다른 스크립트 다운로드를 차단할 뿐만 아니라 다운로드한 컨텐츠 (44) 클라이언트도 자바스크립트로 구문 분석됩니다. CSS 스타일 시트 맨 위 웹 페이지 컨텐츠가 위에서 아래로 로드되는 방식 때문에 가능한 한 웹 페이지의 head 에 CSS 스타일을 배치하면 웹 페이지가 더 빨리 로드되는 것처럼 보일 수 있습니다. 내용이 많은 웹 페이지에는 매우 중요하며, 적어도 사용자가 항상 흰색 화면을 기다리게 하지 않는 것이 좋습니다. 이런 사용자 체험도 좋습니다. 스타일시트를 맨 아래에 놓으면 브라우저가 다운로드된 웹 페이지의 렌더링을 거부할 수 있습니다. 대부분의 브라우저는 구현 시 다시 그리지 않으려고 노력하기 때문입니다. 그래서 이것도 하나의 중점이다. CSS 표현식 방지 일부 기본 CSS3 의 작은 파트너들은 항상 강력한 이개능력을 우러러보며, 일부 CSS 표현식으로 CSS 속성을 동적으로 설정하고, IE5~IE8 에서 지원되며, 다른 브라우저에서는 표현식이 무시됩니다. 다른 CSS 표현식의 문제점은 우리가 생각했던 것보다 훨씬 더 많이 재계산되었다는 것입니다. 따라서 부적절한 사용으로 인한 성능 저하를 방지하기 위해 최대한 사용하지 않는 것이 좋습니다.

@import

대신 link 태그를 사용합니다. 웹 페이지 디자인에서는 가능한 link 태그를 사용하여 CSS 를 참조하고 @ import 를 사용하여 참조하지 마십시오. 그 이유는 간단합니다. CSS 스타일을 웹 페이지의 내용 아래쪽에 두는 것으로 이해할 수 있습니다. 그림 이미지 최적화 웹 페이지 제작에서 banner 와 같은 사진이 매우 느리게 로드되는 동시에 웹 사이트의 속도에도 영향을 미친다는 것을 알 수 있습니다. 몇 백 K, 몇 M 입니다. 그렇다면 과연 이런 사진에 최적화된 공간이 있을까! -응? 오늘 저는 디자이너들이 자주 가는 이지도망 입니다. 원도와 최적화 후의 (이지도) 사진이 5 여 K 이상 차이가 난다는 것을 알 수 있습니다. 사진이 많은 사이트에 대해서는 전체 역의 사진을 최적화해 보겠습니다. 상상해 보세요. 그래서 이 사진들 최적화는 강력하게 추천하겠습니다. 빈 그림 방지 src img 태그를 사용할 때는 빈 그림 src 를 사용하지 않도록 합니다. 빈 그림 SRC 는 여전히 브라우저에서 서버로 요청을 보낼 수 있기 때문에 시간 낭비와 서버 자원 낭비입니다. 특히 귀하의 사이트가 매일 많은 사람들이 방문할 때, 이런 빈 요청으로 인한 피해는 CSS Sprite 최적화 Spirite 에서 수평으로 그림을 배열하는 것을 소홀히 해서는 안 되며, 수직으로 배열하면 파일 크기가 늘어납니다. Spirite 에서 더 가까운 색상을 결합하면 색상 수를 줄일 수 있습니다. PNG8 형식에 맞게 256 색 이하가 이상적입니다.

스프라이트 이미지 중간에 큰 간격을 두지 마십시오. 이렇게 하면 파일 크기가 크게 늘어나지는 않지만 사용자 에이전트에게는 픽셀 지도로 이미지 압축을 풀기 위해 더 적은 메모리가 필요합니다. HTML 에서 그림 확대/축소 안 함 큰 그림을 사용하여 페이지에 맞게 그림 크기를 조정하지 말고 작은 그림이 필요하면 작은 그림을 직접 사용하세요. 그 이유는 간단합니다. 서로 다른 장치에 대해 가장 좋은 효과를 낼 수 있습니다. 큰 그림을 로드하는 것이 아니라 전체적인 효과를 얻을 수 있습니다. 휴대전화 사용자라면 이 취소는 여전히 매우 큽니다. 결국 이것은 유량에 관한 시대이기 때문입니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 작고 캐시할 수 있는 favicon.ico 일반 기업 웹 사이트나 역장은 아이콘 파일 Favicon.ICO 를 추가하는 것을 좋아합니다. 서버 유무에 관계없이 브라우저는 이 아이콘을 요청하려고 합니다. 따라서 이 아이콘이 존재하고 파일이 가능한 한 작다는 것을 확인해야 합니다. 1k 보다 작은 긴 만료 시간 요약: 마지막으로 이 문서는 주로 HTML, CSS, Javascript, images 등에만 관련된 초급 웹 디자이너를 대상으로 합니다. 물론, 위에서 언급한 몇 가지 상귀적인 프런트 엔드 최적화 팁은 당신이 GET 에 도착했습니까? (시드 비셔스, Northern Exposure (미국 TV 드라마), 스포츠명언) 귀하의 웹 페이지에 이와 비슷한 실수를 하지 마십시오. 그렇지 않으면 정말 사용자 경험에 영향을 미칩니다. 결국, 지금은 웹 2. 시대입니다. 사용자가 귀하의 웹 페이지에 만족하지 않으면 개발자에 대한 부정입니다. 그래서 더 나은 웹 페이지를 만들기 위해 우리는 가능한 한 많은 작은 세부 사항에 주의를 기울입니다. 이 글의 사례를 보고 이미 방법을 익혔다고 믿습니다. 더 멋진 Gxl 네트워크의 다른 관련 문장!