CSS가 dwt와 외부 스타일 시트에 포함됩니다.

Question

46 페이지로 새 웹 사이트를 만들었습니다. http://www.lampshade111.com/ 동적 웹 템플릿을 사용하는 Microsoft Expression Web 4를 사용합니다. 모든 CSS는 dwt 페이지의 제목에 포함되어 모든 개별 웹 페이지로 업데이트되었습니다. 모든 것이 완벽하게 보입니다. 아무런 문제가 없습니다.

그러나 내가 읽은 모든 것은 외부 스타일 시트를 사용하는 것이 좋습니다. 따라서 "우수 사례"의 정신에서 dwt 제목에서 css를 제거하고 dwt에 외부 스타일 시트를 사용 (링크)했습니다. 물론 개별 페이지는 dwt에 의해 업데이트되고 링크 된 CSS 파일은 모든 페이지에 표시됩니다. 다시 말하지만, 모든 것이 이전처럼 완벽하게 작동합니다.

문제점 : 외부 스타일 시트를 사용한 후 내 웹 사이트를 볼 때 브라우저에서 웹 사이트가 훨씬 느려집니다.

나는 256 페이지가있는 다른 웹 사이트를 가지고 있으며 모든 CSS는 외부 스타일 시트가없는 마스터 dwt의 제목 안에 포함되어 있습니다. http://www.hoylelamps.com/ 수년 동안 정상적으로 작동했습니다.

질문 : dwt의 제목에 CSS를 사용하지 않는 이유가 있습니까? 외부 스타일 시트보다 효율적 (빠름)이라고 생각하십니까? 이 주제에 대한 정보를 찾을 수 없습니다.

어떤 도움을 주셔서 감사합니다. - Jim

Answer 1

왜 외부 스타일 시트가 외부 스타일 시트보다 "훨씬 느리다"는 것을 상상할 수 없습니다. 링크 된 스타일 시트는로드되는 즉시 캐시되며 두 번로드 할 필요가 없습니다. 즉, 각 페이지에서 완전히 다른 형식을 사용하지 않는 한로드하는 두 번째 및 세 번째 페이지가 더 빨라야합니다.

하나의 리소스 만로드해야하기 때문에 포함 된 스타일 시트가 더 빨리 실행됩니다. 그러나 시간이 지남에 따라 스타일 시트가 포함 된 여러 페이지를 유지하는 데 필요한 작업은 훨씬 부담이됩니다. 모든 페이지에서 하나의 CSS 규칙을 변경할 때마다 기억해야하므로 모든 페이지에서 변경해야하며 모든 페이지를 다시 업로드해야합니다. 그렇게하지 않으면 사이트 전체에서 형식이 다른 개별 페이지가 생깁니다.

외부 연결 스타일 시트가이 문제를 배제합니다. 하나의 스타일 시트, 하나의 파일을 수정하고 업로드 할 수 있습니다. 페이지로드를 만들거나 더 느리게 반응 할 내가 그 생각할 수있는 유일한 물건은 다음과 같습니다

• 매우 큰 스타일 시트
• 대신 "링크"명령의 "가져 오기"사용 (일부 브라우저에 다르게 반응 이 명령들)
• 비표준 CSS 또는 매우 조밀 한 스타일 명령을 사용 중입니다.

CSS를 보지 않고서는 더 이상 제안 할 수 없습니다. 브라우저가 처음에 두 개의 파일을로드해야한다는 사실 때문에 파일이 약간 더 느리게 작동합니다. 그러나 전체 사이트가 더 천천히 실행되는 이유를 이해하는 것은 어렵습니다.

여기에 몇 가지 제안은 다음과 같습니다

• 당신이 확인하고 다른 브라우저 및 다른 컴퓨터에서 페이지를 테스트 한 적이 있습니까?어쩌면 그것은 페이지가 아닐 수도 있습니다. 브라우저 나 사용중인 컴퓨터 일 수 있습니다.
• 스타일 시트가 큰 경우 논리 구성 요소로 나누십시오. 나는 모든 페이지에 나타나지 않는 표, 양식 및 특수 구성 요소를 포맷하는 스타일 시트가 있습니다. 해당 페이지와 관련된 CSS 만로드하십시오. 하나의 메인 스타일 시트와 언급 된 것과 같은 특정 유형의 구성 요소를위한 특수 스타일 시트가 있습니다.
• 사용중인 명령 유형을 확인하십시오. 캐스케이드, 상속 및 특이성을 최대한 활용하고 있습니까? CSS를 가능한 한 효율적으로 작성하십시오.

처음에는 포함 된 스타일 시트를 쉽게 유지할 수 있지만 포함 된 스타일 시트가있는 대형 웹 사이트를 업데이트하고 유지 관리하는 것은 훨씬 부담이됩니다.

희망이 있습니다.