사용자 별 CSS 템플릿 허용

Question

웹 사이트에서 사용자가 원하는 모양과 느낌의 옵션을 사용하고 싶습니다. 배경과 텍스트 색상, 이미지, 글꼴 등을 선택하기위한 인터페이스를 구상합니다. 정보를 저장하고 사용하는 가장 좋은 방법은 무엇인지 모르겠습니다. 나는 사용자에게 연결된 데이터베이스 테이블에 모든 옵션을 저장할 계획이다.

각 사용자마다 CSS를 동적으로 생성하는 좋은 방법이 있습니까? CSS를 변경하고 저장하거나 각 페이지보기마다 다시 생성 할 때 CSS를 생성하는 것이 더 좋습니까? 이런 종류의 일을하기위한 패턴이 확립 되었습니까?

Answer 1

정적 인 부분과 사용자 정의 할 수있는 CSS 부분을 구분하십시오. 그렇게하면 평상시처럼 CSS의 대부분을 계속 제공 할 수 있습니다.

맞춤 설정할 수있는 CSS를 동적으로 생성하십시오. 성능에 문제가 없다면 최적화 또는 고급 캐싱을 시도하지 마십시오.

유일한 잠재적 인 성능 문제는 브라우저가 사용자 지정 가능한 CSS를 캐시 할 수 없다는 것입니다. 그러나 어쨌든 브라우저에서 캐시하지 않으려면 사용자의 색 구성표가 편집 할 때 바로 업데이트되지 않을 수 있습니다.

성능 문제가있는 경우 ETags에 대해 걱정할 필요가 없습니다. ETags는 브라우저가 이미 가지고있는 구성 요소를 다시 다운로드하지 못하도록 설계되었지만 CSS의 사용자 지정 가능 부분은 매우 작을 수 있습니다.

성능 문제가 발생할 경우 HTML 페이지에 직접 사용자 정의 가능한 CSS를 인라인하는 것을 고려하십시오. 그러면 추가 HTTP 요청이 저장됩니다. 그러나 필요가 없다면이 작업을 수행하지 마십시오.

Answer 2

먼저 생성 된 CSS에 적절한 캐싱 헤더를 사용하고 클라이언트가 요청할 때 CSS 원본의 유효성을 다시 검사하기 위해 ETag 헤더를 사용하십시오. 일부 빠른 설정 ETag 계산 알고리즘을 구현해야합니다 (예 : 사용자가 일부 설정을 변경하고 해당 값을 ETag로 반환 할 때마다 버전 필드 증가). 이 시나리오에서는 CSS가 사용자 에이전트 캐시에 저장되고 사용자가 F5 ETag를 누를 때에도 "변경 사항을 저장하고 저장하지만 실제로는 CSS를 생성하지 않고"각 페이지보기마다 재생성 "하도록 선택할 수 있습니다 클라이언트 측의 CSS가 여전히 유효한지 확인하는 데 사용됩니다.

물론, CSS는 일부 http 핸들러 (usercss.ashx 또는 이와 비슷한 것)에 의해 반환되어야합니다. 이 CSS에 대한 링크를 HTML 페이지에 포함 시키려면 캐시 된 콘텐츠 문제를 해결할 수있는 매개 변수를 추가해야합니다 (예 : '

). 내 경험에 따르면 사용자 CSS를 개별 리소스로 사용하도록 처리기를 사용하는 것이 좋습니다. HTML 페이지가 생성 될 때마다 HTML 페이지에 포함시키지 마십시오. 왜냐하면 마지막 경우에는 페이지가 생성 될 때마다 CSS를 다시 계산하거나 서버에 캐싱해야하기 때문에 두 경우 모두 다소 나쁜 아이디어입니다. 게다가,이 CSS는 다소 클 수 있습니다. 요청할 때마다 다운로드 할 이유가 없습니다.