KR102018445B1

KR102018445B1 - 캐스캐이딩 스타일 시트 파일들의 압축

Info

Publication number: KR102018445B1
Application number: KR1020177010286A
Authority: KR
Inventors: 리신 하오
Original assignee: 알리바바 그룹 홀딩 리미티드
Priority date: 2014-10-15
Filing date: 2015-10-14
Publication date: 2019-09-04
Also published as: SG11201701997UA; EP3207461A4; JP2017532655A; CN105577719B; JP6373489B2; CN105577719A; US9747385B2; KR20170072203A; EP3207461A1; US20160110324A1; TW201617940A

Abstract

본 발명의 일 실시예는 캐스캐이딩 스타일 시트(CSS) 파일의 압축을 용이하게 하는 시스템을 제공한다. 동작 동안, 시스템은 CSS 파일을 로컬 저장 디바이스에 저장하고 CSS 파일에서의 병합 파라미터를 식별한다. 병합 파라미터는, 반복된 선택자, 선택자에서 반복된 특성, 및 상이한 선택자들에서 특성의 동일한 값 중 하나일 수 있다. 그 후, 시스템은 병합 파라미터에 대해 병합 조건이 충족되는지를 결정하고, 압축된 병합 파라미터를 획득하기 위해 CSS 파일에서의 병합 파라미터를 병합한다. 병합 조건은, 병합 파라미터의 병합이 CSS 파일에서의 원래의 스타일과 일치하는지를 나타낸다.

Description

캐스캐이딩 스타일 시트 파일들의 압축{COMPRESSION OF CASCADING STYLE SHEET FILES}

본 출원은 컴퓨터 기술들의 분야에 관한 것으로, 특히, 네트워크 통신에 대한 데이터 압축을 위한 방법 및 시스템에 관한 것이다.

컴퓨터 및 네트워크 기술들의 진보에 따라, 상이한 애플리케이션들로부터 사용자들에 의해 수행된 다양한 동작들이 웹 서비스들에 대한 광범위한 액세스를 초래한다. 예를 들어, 다중의 사용자들은 상이한 운영 시스템들에서의 상이한 브라우저들상에서 구동하는 웹-인터페이스들 뿐만 아니라 상이한 플랫폼들상에서 구동하는 모바일 애플리케이션들과 같은, 상이한 애플리케이션들을 통해 전자 상거래 웹사이트 상에서 동시에 쇼핑할 수 있다. 웹 서비스들을 호스팅하는 서버가 대응하는 쇼핑 웹 페이지를 상이한 사용자들에게 제시함에 의해, 전자 상거래 서비스를 용이하게 한다.

그러나, 시스템에 동시에 액세스하는 상이한 애플리케이션들은 사용자 활동들의 수의 증가를 초래할 수 있어서, 결과적으로, 증가된 양의 웹 페이지들이 서버로부터 액세스된다. 다수의 이들 웹 페이지들은 캐스캐이딩 스타일 시트(CSS)를 사용하여 표현될 수 있다. CSS 파일은 클라이언트 디바이스에서 브라우저에 대해 웹 페이지에 대한 프리젠테이션 스타일을 제공하기 위해 웹 페이지와 함께 네트워크를 통해 통상적으로 전송된다. CSS 파일은 통상적으로 텍스트 포맷이다. CSS 파일이 압축되는 경우에, CSS 파일의 크기는 작아진다. 그 결과, 압축된 CSS 파일은 네트워크를 통해 더욱 효율적으로 송신될 수 있다.

다수의 방법들이 CSS 파일 압축을 위해 이용가능하지만, CSS 파일들의 광범위한 압축에는 일부 문제점들이 여전히 남아 있다.

이러한 실시예의 변형에서, 시스템은 압축된 병합 파라미터의 길이에 기초하여 압축된 병합 파라미터가 유효한지를 결정한다.

이러한 실시예의 변형에서, 시스템은 제1 선택자와 제2 선택자가 인접하는지를 결정함으로써 병합 조건이 충족되는지를 결정한다. 제1 선택자와 제2 선택자가 인접하지 않는 경우에, 시스템은 제1 선택자와 제2 선택자 사이의 제3 선택자가 제1 및 제2 선택자들에 포함된 특성을 포함하는지를 결정한다.

추가의 변형에서, 시스템은 특성이 (ⅰ) 제1, 제2, 및 제3 선택자들에서 동일한 값, 및 (ⅱ) 제1, 제2, 및 제3 선택자들에서의 상이한 우선순위들 중 하나 이상을 갖는지를 결정함으로써 병합 조건이 충족되는지를 더 결정한다.

이러한 실시예의 변형에서, 시스템은 (ⅰ) 병합 파라미터의 특성의 후자 값이 특성의 전자 값을 오버라이트하고, 후자 값이 동일하거나 더 높은 우선순위를 갖는다, 또는 (ⅱ) 특성의 전자 값이 특성의 후자 값을 오버라이트하고 전자 값이 더 높은 우선순위를 갖는다라는 것을 결정함으로써 병합 조건이 충족되는지를 결정한다.

이러한 실시예의 변형에서, 시스템은 선택자에 대한 특성의 제2 값을 제거함으로써 병합 파라미터를 병합한다. 제2 값은 (ⅰ) 제1 값 이전에 나타날 수 있고, (ⅱ) 제1 값보다 낮은 우선순위를 가질 수 있거나, 또는 (ⅲ) 제1 값과 오버라이팅 관계를 가질 수 있다.

이러한 실시예의 변형에서, 시스템은 CSS 파일의 선택자들 및 대응하는 특성들을 테이블에 표현하고, 각각의 특성에 대한 테이블에서 공통 영역을 결정한다.

추가의 변형에서, 시스템은 특성에 대한 테이블에서 현재 최대 공통 영역을 식별하고, 특성을 공통 인자로서 추출하며, 특성을 포함하는 각각의 선택자를 가로질러 공통 인자를 병합한다.

이러한 실시예의 변형에서, 시스템은 복수의 압축된 병합 파라미터들에 기초하여 압축된 CSS 파일을 생성한다.

이러한 실시예의 변형에서, 시스템은 CSS 파일에서 모든 선택자들의 특성들을 알파벳 순서로 구성함으로써 압축을 위한 CSS 파일을 준비한다.

본원에 통합되고 명세서의 일부를 구성하는 본원에서의 첨부한 도면들은 본 출원의 여러 예시적인 실시예들을 예시하고, 설명과 함께, 본 출원을 제한하지 않으면서 본 출원을 예시하는 역할을 한다.
도 1a는 본 출원의 실시예에 따른, 네트워크를 가로지른 예시적인 압축된 CSS 파일 송신을 예시한다.
도 1b는 본 출원의 실시예에 따른, 예시적인 강화된 CSS 파일 압축 프로세스를 예시한다.
도 2a는 본 출원의 실시예에 따른, 데이터 압축 시스템의 강화된 CSS 파일 압축 프로세스를 예시하는 흐름도를 제시한다.
도 2b는 본 출원의 실시예에 따른, 강화된 CSS 파일 압축을 위한 데이터 압축 시스템의 검증 프로세스를 예시하는 흐름도를 제시한다.
도 2c는 본 출원의 실시예에 따른, 강화된 CSS 파일 압축을 위한 데이터 압축 시스템의 오버라이트 검증 프로세스를 예시하는 흐름도를 제시한다.
도 3a는 본 출원의 실시예에 따른, 강화된 CSS 파일 압축을 위한 공통 인자들의 예시적인 그래픽 선택을 예시한다.
도 3b는 본 출원의 실시예에 따른, 공통 인자들에 기초한 데이터 압축 시스템의 강화된 CSS 파일 압축 프로세스를 예시하는 흐름도를 제시한다.
도 4는 본 출원의 실시예에 따른, 예시적인 데이터 압축 시스템의 개략적인 구조도이다.
도면들에서, 동일한 참조 부호들은 동일한 도면 엘리먼트들을 지칭한다.

본 발명의 실시예들은 압축 무결성을 보장하면서 반복된 선택자들, 및 CSS 파일에서의 반복된 특성들 및 값들을 병합함으로써 CSS 파일을 효율적으로 압축하는 문제점을 해결한다. 이러한 방식으로, CSS 파일의 강화된 압축은 네트워크를 통해 편리하게 송신되는 더 작은 크기를 발생시킨다.

기존의 기술들로, CSS 파일을 압축하는 것은 CSS 파일에서 마진들, 주석들, 및 반복된 문자들을 제거하여 파일의 크기를 감소시킨다. 더욱이, 일부 압축기들은 무효 문자들을 또한 제거할 수 있다. 그러나, 이러한 압축은 CSS 파일의 선택자들 내의 그리고 선택자들을 가로지르는 리던던시를 현저하게 감소시키지 못한다. 특히, CSS 파일을 사전 프로세싱하는 것은 직접 압축되지 않을 수 있는 대량의 리던던트 CSS 코드를 생성할 수 있다. 네트워크를 가로질러 이러한 CSS 파일을 송신하는 것은 비효율적이 된다.

이러한 문제점을 해결하기 위해, 본 발명의 실시예들은 CSS 파일의 강화된 압축을 용이하게 하는 시스템을 제공한다. 시스템은 반복된 선택자들(예를 들어, 동일한 선택자의 다중의 선언)을 병합하고 동일한 선택자에서의 반복된 특성들을 제거함으로써 CSS 파일을 압축한다. 그 후, 시스템은 동일한 선택자에서 오버라이트된 스타일 스테이트먼트(예를 들어, 특성의 오버라이트된 값)을 제거하고 동일한 특성들을 포함하는 선택자들을 집계한다. 시스템은 또한 공통 인자들을 추출하고 병합한다. 각각의 단계가 이전의 단계에 기초하여 수행되어야 하기 때문에 이들 5개의 단계들이 순차적일 수 있다는 것에 유의해야 한다.

도 1a는 본 출원의 실시예에 따른, 네트워크를 가로지른 예시적인 압축된 CSS 파일 송신을 예시한다. 이러한 예에서, CSS 파일 압축을 위한 데이터 압축 시스템(102)이 서버(112)에서 CSS 파일(122)의 강화된 압축을 위해 서버(112)에 배치된다. 서버(112)는 CSS 파일을 로컬 저장 디바이스에 저장할 수 있다. CSS 파일(122)이 클라이언트 디바이스(114)에서 브라우저에서의 웹 페이지(130)에 대한 프리젠테이션 스타일을 제공하기 위해 웹 페이지(130)와 함께, 네트워크(150)(예를 들어, 로컬 영역 네트워크(LAN), 광역 네트워크(WAN), 인터넷)를 통해 전송된다. 프리젠테이션 스타일은 웹 페이지(130)가 브라우저에서 사용자(101)에게 제시되는 방법을 지시한다.

기존의 기술들에 의하면, 네트워크(150)를 통한 송신 이전에 CSS 파일(122)에 압축 기법에 적용된다. 통상적으로, CSS 파일(122)을 압축하는 것은 CSS 파일(122)에서 마진들, 주석들, 반복 및 무효 문자들을 제거하는 것을 포함한다. 그러나, 이러한 압축은 CSS 파일(122)의 선택자들 내의 그리고 선택자들을 가로지른 리던던시를 현저하게 감소시키지 못한다. 따라서, 네트워크(150)를 가로질러 CSS 파일(122)을 송신하는 것은 비효율적이 된다. 이러한 문제점을 해결하기 위해, 시스템(102)은 CSS 파일(122)을 압축하여 압축된 CSS 파일(124)을 생성한다. 일부 실시예들에서, 시스템(102)은 모든 선택들의 특성들을 알파벳 순서로 구성함으로써 압축을 위한 CSS 파일을 준비한다. 서버(112)는 또한 압축된 CSS 파일(124)을 로컬 저장 디바이스에 저장한다. 클라이언트 디바이스(114)가 웹 페이지(130)를 요청할 때마다, 서버(112)는 압축된 CSS 파일(124)을 네트워크(150)를 통해 클라이언트 디바이스(114)에 송신한다.

도 1b는 본 출원의 실시예에 따른, 예시적인 강화된 CSS 파일 압축 프로세스를 예시한다. 시스템(102)은 다수의 단계들에 기초하여 압축된 CSS 파일(124)을 생성한다. 강화된 압축 프로세스 동안, 시스템(102)은 반복된 선택자들을 병합한다(동작(S152)). 예를 들어, .a{margin:0}.a{padding:0}에서의 선택자들은 동일하다. 따라서, 선택자들은 .a{margin:0;padding:0}로서 병합될 수 있다. 시스템(102)은 또한 동일한 선택자에서 동일한 특성에 대한 반복된 값 할당들을 제거한다(동작(S154)). 특성 "margin"의 값이 .a{margin:0;margin:1px}에서 반복되기 때문에, 시스템(102)은 마진의 값을 .a{margin:1px}로서 압축할 수 있다. 그 후, 시스템(102)은 동일한 선택자 내의 동일한 특성에 대한 오버라이트된 값 할당을 제거한다(동작(S156))(예를 들어, 특성의 오버라이트된 값). 예를 들어, "background"가 "background-color"를 또한 포함하기 때문에, .a{background-color:#FFF; background:#000 url(xxx.jpg)}는 .a{background:#000 url(xxx.jpg)}로서 압축될 수 있다.

시스템(102)은 동일한 특성들에 대한 동일한 값 할당을 포함하는 선택자들을 집계한다(동작(S158)). 특성들 "margin" 및 "color"가 .a{margin:0;color:#000} .b{margin:0;color:#000}에서 동일한 값들을 갖는다. 따라서, 선택자들(.a 및 .b)은 .a,.b{margin;0;color:#000}로서 병합될 수 있다. 시스템(102)은 CSS 파일(122)에서 공통 인자들을 더 추출하고 병합한다(동작(S160)). 예를 들어, 시스템(102)은 .a{margin:0;padding:0} .b{margin:0;padding:1}로부터 공통 인자 마진을 추출할 수 있고 이들을 .a,.b{margin:0}.a{padding:0}.b{padding:1}로서 병합할 수 있다. 이러한 방식으로, 시스템(102)은 압축된 CSS 파일(124)을 생성한다.

도 2a는 본 출원의 실시예에 따른, 데이터 압축 시스템의 강화된 CSS 파일 압축 프로세스를 예시하는 흐름도를 제시한다. 동작 동안, 시스템은 CSS 파일의 후보 병합 파라미터를 식별한다(동작(S201)). CSS 파일은 압축되지 않은 임의의 원래의 CSS 파일일 수 있다. CSS 파일은 또한 압축된 CSS 파일일 수 있으며, 이 압축된 CSS 파일은 종래의 압축 방법들(예를 들어, 마진들, 주석 문자들, 무효 및 반복된 문자들이 제거되었을 수 있음)을 사용하여 압축되었다. 동작(S201)에서, 시스템은 CSS 파일에서 병합될 수 있는 파라미터를 결정한다. 파라미터는 CSS 파일에 반복적으로 제시되는 엘리먼트이다.

파라미터는 반복된 선택자, 선택자에서 반복된 특성, 또는 상이한 선택자들에서 특성의 동일한 값일 수 있다. 예를 들어, .a{margin:0}.b{padding:0}.a{padding:0}는 반복된 선택자(.a)를 포함한다. 따라서, 선택자(.a)는 후보 병합 파라미터로서 식별될 수 있다. 다른 한편으로, .a{margin:0;margin:1px}는 선택자(.a)에서 반복된 특성 "margin"을 포함한다. 더욱이, .a{margin:0;padding:0}.b{margin:0;padding:1}은 선택자들(.a 및 .b)에서 특성 "margin"에 대해 동일한 값 0을 포함한다. 유사하게, .a{margin:0;padding:0;color:#FFF;padding:1}.b{margin:0;padding:1}.a{margin:0;padding:1;color:#FFF}는 동일한 특성 "padding"을 포함하는 동일한 선택자(.a)를 포함하고, 선택자들(.a 및 .b)은 특성들 "margin" 및 "padding" 각각에 대해 동일한 값들 0 및 1을 포함한다.

그 후, 시스템은 병합 조건이 충족되는지를 체크한다(동작(S202)). 병합 조건은, 병합 파라미터의 병합이 원래의 CSS 파일에서 원래의 스타일(즉, 특성들의 원래의 값들)과 일치하는지를 결정하기 위해 사용된다. 일치하는 경우에, 병합 조건이 충족된다. 병합 조건이 충족되면, 시스템은 CSS 파일에서 식별된 병합 파라미터를 병합하고(동작(S203)), 모든 파라미터들이 검사되었는지를 체크한다(동작(S204)). 병합 조건이 충족되지 않으면, 시스템은 모든 파라미터들이 또한 검사되었는지를 체크한다(동작(S204)). 모든 파라미터들이 검사되지 않은 경우에, 시스템은 CSS 파일의 후보 병합 파라미터를 계속 식별한다(동작(S201)). 일부 실시예들에서, 시스템은 병합된 선택자(들)의 길이가 더 긴지 여부를 또한 체크할 수 있다. 더 긴 경우에, 시스템은 병합을 폐기할 수 있다. 예를 들어, 선택자들이 .aaaaaaaaa{margin:0;padding:0}.bbbbbbbbbb{margin:0;padding:1}에서 병합되는 경우에, 획득된 선택자는 더 긴 명칭: .aaaaaaaaa,.bbbbbbbbbb{margin:0}.aaaaaaaaa{padding:0}.bbbbbbbbbb{padding:1}을 갖는다. 길이가 더 길기 때문에, 시스템은 병합을 폐기한다.

모든 파라미터들이 검사된 경우에, 시스템은 병합된 파라미터들에 기초하여 압축된 CSS 파일을 획득한다(동작 S205)). 그 후, 시스템은 압축된 CSS 파일이 원래의 CSS 파일보다 감소된 파일 길이를 갖는지를 체크한다(동작(S206)). 압축된 CSS 파일이 감소된 파일 길이를 갖는 경우에, 시스템은 압축된 CSS 파일을 사용한다(동작(S207)). 그렇지 않으면, 시스템은 압축된 CSS 파일을 폐기하고, 원래의 CSS 파일을 사용한다(동작(S208)). 시스템이 각각의 병합 동작 이후에 길이를 체크하는 경우에, 압축된 CSS 파일은 더 큰 파일 크기를 갖지 않을 수 있다는 것에 유의해야 한다.

도 2b는 본 출원의 실시예에 따른, 강화된 CSS 파일 압축을 위한 데이터 압축 시스템의 검증 프로세스를 예시하는 흐름도를 제시한다. 검증 프로세스는 후보 병합 파라미터에 대한 병합 조건이 충족되는지를 결정한다. 시스템은 2개의 선택자들(A 및 B)이 서로 인접하는지를 결정한다(동작(S221)). 예를 들어, .a{margin:0}.a{padding:0}에서, 2개의 선택자들은 서로 인접한다. 다른 한편으로, .a{margin:0}.b{padding:1px}.a{padding:0}에서, 선택자들(.a)은 서로 인접하지 않는다.

A와 B가 인접하지 않으면(동작(S222)), 시스템은 중간 선택자(C)가 선택자들(A 및 B)과 동일한 특성을 포함하는지를 결정한다(동작(S223)). 중간 선택자(C)에 포함된 특성이 선택자들(A 및 B)의 특성들과 상이한 경우에, 선택자들(A 및 B)의 병합은 선택자(C)의 특성에 영향을 미치지 않을 수 있으며, 병합 조건이 충족된다. 선택자(C)가 선택자(A)에는 포함되지만 선택자(B)에는 포함되지 않는 특성을 포함하는 경우에, 선택자(A)와 선택자(B)의 병합은 중간 선택자(C)에 영향을 미치지 않을 수 있다. 유사하게, 선택자(C)가 선택자(B)에는 포함되지만 선택자(A)에는 포함되지 않는 특성을 포함하는 경우에, 선택자(B)와 선택자(A)의 병합은 중간 선택자(C)에 영향을 미치지 않을 수 있다. 이들 2개의 환경들하에서, 병합 조건이 충족된다.

선택자들이 동일한 특성을 갖는 경우에(동작(S224)), 시스템은 선택자들(A, B, 및 C)에서의 특성이 동일한 값을 갖는지를 체크한다(동작(S225)). 특성이 동일한 값을 갖지 않으면(동작(S226)), 시스템은 특성이 선택자들(A 및 B)과는 상이한 선택자(C)에서의 우선순위를 갖는지를 체크한다(동작(S227)). 특성이 상이한 우선순위를 갖는 경우에(동작(S228)), 시스템은 병합 조건이 충족되었는지를 결정한다(동작(S230)). 선택자들(A 및 B)이 인접하거나(동작(S222)), 선택자(C)가 선택자들(A 및 B)과 동일한 특성을 갖지 않거나(동작(S224)), 선택자들(A, B, 및 C)에서의 특성이 동일한 값을 갖거나(동작(S226)), 또는 선택자(C)에서의 특성이 상이한 우선순위를 갖는(동작(S228)) 경우에, 시스템은 병합 조건이 충족되었다는 것을 결정한다(동작(S230)).

예를 들어, .a{margin:0;padding:1}.b{padding:1px}.a{padding:0}에서, 각각의 선택자는 특성 "padding"을 포함하지만, 값들은 상이하다. 따라서, 시스템은 병합 조건이 충족되지 않았다는 것을 결정한다. 다른 한편으로, .a{margin:0;padding:1 }.b{padding:1px !important}.a{padding:0}, .a{margin:0;padding:1 }.b{padding:1px }.a{padding:0 !important}, 또는 .a{margin:0;padding:1 !important}.b{padding:1px }.a{padding:0}에서, 중간 선택자에서의 특성 "padding"은 상이한 우선순위를 갖는다. 따라서, 시스템은 병합 조건이 충족되었다는 것을 결정한다.

CSS 파일(122)에서, 동일한 특성의 값들이 동일한 우선순위를 갖는 경우에, 후자의 값이 전자의 값을 오버라이트하여 압축된 CSS 파일을 획득한다. 특성의 값들이 상이한 우선순위들을 갖는 경우에, 더 높은 우선순위를 갖는 값이 더 낮은 우선순위를 갖는 값을 오버라이트하여 압축된 CSS 파일을 획득한다. 도 2c는 본 출원의 실시예에 따른, 강화된 CSS 파일 압축을 위한 데이터 압축 시스템의 오버라이트 검증 프로세스를 예시하는 흐름도를 제시한다. 동작 동안, 시스템은 동일한 선택자 내에서 상이한 값들을 갖는 특성을 식별한다(동작(S241)).

그 후, 시스템은 후자 값이 전자 값을 오버라이트하는지를 체크한다(동작(S242)). 그러한 경우에, 시스템은 후자 값이 더 높은 우선순위를 갖는지를 체크한다(동작(S243)). 그렇지 않으면, 시스템은 전자 값이 더 높은 우선순위를 갖는지를 체크한다(동작(S244)). 후자 값이 전자 값을 오버라이트하고 더 높은 우선순위를 갖는 경우에, 시스템은 병합 조건이 충족되었다는 것을 결정한다(동작(S246)). 유사하게, 전자 값이 후자 값을 오버라이트하고 더 높은 우선순위를 갖는 경우에, 시스템은 병합 조건이 충족되었다는 것을 결정한다(동작(S246)). 그렇지 않으면, 시스템은 병합 조건이 충족되지 않았다는 것을 결정한다(동작(S245)).

동일한 선택자에서의 특성들 중에서 오버라이트하는 관계가 없을 때, 병합 조건이 충족된다는 것에 유의해야 한다. 그렇지 않으면, 특성의 값들이 동일한 우선순위를 갖는 경우에, 후자 값은 전자 값을 직접적으로 오버라이트할 수 있다. 예를 들어, .a{margin:0;margin:1px}는 .a{margin:1px}로서 직접적으로 병합될 수 있다. 여기서, .a{margin:1px}는 압축된 병합 파라미터로서 고려될 수 있다. 동일한 특성의 값들이 상이한 우선순위들을 갖는 경우에, 더 높은 우선순위를 갖는 값이 더 낮은 우선순위를 갖는 값을 오버라이트한다. 예를 들어, .a{margin:0 !important;margin:1px}는 .a{margin:0 !important}로서 병합되고, 또는 .a{margin:0;margin:1px !important }는 .a{ margin:1px !important}로서 병합된다.

후자 값이 전자 값을 오버라이트하고, 후자 값이 동일하거나 전자 값보다 높은 우선순위를 갖는 경우에, 병합 조건이 충족된다. 이러한 경우에, 후자 값은 병합을 위해 전자 값을 오버라이트한다. 예를 들어, .a{background-color:#FFF;background:#000 url(xxx.jpg)}가 .a{background:#000 url(xxx.jpg)}로서 병합된다. 다른 한편으로는, 전자 값이 후자 값을 오버라이트하고, 전자 값이 후자 값보다 높은 우선순위를 갖는 경우에, 병합 조건이 충족된다. 이러한 경우에, 더 높은 우선순위를 갖는 전자 값이 후자 값을 오버라이트한다. 예를 들어, .a{ background:#000 url(xxx.jpg) !important; background-color:#FFF }가 .a{ background:#000 url(xxx.jpg) !important }로서 병합된다.

일부 시나리오들에서, 병합 판정은 복잡할 수 있다. 예를 들어, .a{margin:0;padding:0;color:#FFF}.b{margin:0;padding:1;color:#FFF}.c{margin:0;padding:1;color:#000}에서, 이들 3개의 선택자들 각각은 동일하고 상이한 값들 모두를 갖는 동일한 특성을 갖는다. 각각의 길이들을 비교하기 위해 모든 가능성들이 고찰되고 모든 결과들이 계산되는 경우에, 최단의 병합된 선택자들이 선택될 수 있다. 그러나, n개의 선택자들 및 m개의 특성들이 존재하는 경우에, n!m!개의 가능성들이 존재한다. 이러한 광범위한 계산은 실제로 가능하지 않을 수 있다. 이러한 문제점을 해결하기 위해, 본 발명의 실시예들은 공통 인자들의 선택을 위한 그래픽 선택 알고리즘을 제공한다.

도 3a는 본 출원의 실시예에 따른, 강화된 CSS 파일 압축을 위한 공통 인자들의 예시적인 그래픽 선택을 예시한다. n개의 선택자들(302, 304, 및 306)(예를 들어, 선택자들(.a, .b, 및 .c 각각) 및 m개의 특성들(312, 314, 및 316)(예를 들어, 특성들 "margin", "padding", "color" 각각)이 존재한다는 것을 가정한다. 그래픽 선택 알고리즘은 n개의 행 및 m개의 열들을 갖는 2차원 테이블(300)을 생성한다. 동작 동안, 시스템은 병합을 최대화하는 특성을 먼저 선택한다. 다시 말해, 시스템은 테이블(300)에서 공통 영역(예를 들어, 특성에 대해 동일한 값을 갖는 그리드들의 수)을 최대화하는 특성을 선택한다.

테이블(300)에서, 특성(312)의 값들은 각각의 선택자에 대해 동일하다. 따라서, 특성(312)에 대해 병합될 수 있는 그리드들의 수는 3이다. 따라서, 시스템은 특성(312)에 대한 공통 영역을 3인 것으로 결정한다. 동일한 방식으로, 시스템은 특성들(314 및 316)에 대한 공통 영역을 각각 2 및 2인 것으로 결정한다. 테이블(300)을 사용하는 그래픽 선택 프로세스 동안, 시스템은 공통 영역이 3인 열을 먼저 선택하고, 대응하는 공통 인자(즉, 대응하는 특성)를 추출한다. 시스템은 각각의 선택자에 대한 공통 인자를 병합한다. 도 3a의 예에서, 공통 인자 "margin"을 추출하고 병합하는 것은 .a,.b,.c{margin:0}을 산출한다.

그 후, 시스템은 공통 영역이 2인 열을 선택하고 병합한다. 2개의 열들이 동일한 공통 영역을 갖기 때문에, 하나가 병합을 위해 선택될 수 있다(예를 들어, 랜덤 선택). 테이블(300)에서 그리드들의 세트가 병합되면, 이들 그리드들은 추가의 계산에서 배제된다. 도 2b와 함께 설명된 바와 같이, 그리드들의 병합이 검증을 필요로 한다는 것에 유의해야 한다. 병합기 이후에, 공통 인자에 대한 길이가 감소되지 않은 경우에, 추출은 공통 인자에 대해 수행되지 않는다. 도 3a의 예에서, 그래픽 선택 알고리즘을 사용하여 공통 인자들을 추출하고 병합하는 것은 a,.b,.c{margin:0}.a,.b{color:#FFF}.a{padding:0}.b,.c{padding:1}.c{color:#000}을 산출한다. 여기서, 길이는 21개 문자들 만큼 감소된다.

도 3b는 본 출원의 실시예에 따른, 공통 인자들에 기초한 데이터 압축 시스템의 강화된 CSS 파일 압축 프로세스를 예시하는 흐름도를 제시한다. 동작 동안, 시스템은 도 3a와 함께 설명한 바와 같이, 그래픽 표현(예를 들어, 테이블)으로부터 CSS 파일에서 각각의 특성에 대한 공통 영역을 계산한다(동작(S351)). 시스템은 최대 공통 영역을 갖는, 병합되지 않은 특성을 식별한다(동작(S352)). 그 후, 시스템은 병합 조건이 충족되는지를 체크한다(동작(S353)). 병합 조건은 병합 파라미터들의 병합이 원래의 스타일과 일치하는지를 결정하기 위해 사용된다. 일치하는 경우에, 병합 조건이 충족된다. 일부 실시예들에서, 병합 조건은 병합시에 길이의 감소를 또한 포함할 수 있다.

병합 조건이 충족되면, 시스템은 CSS 파일에서 식별된 특성을 병합하고(동작(S354)), 그래픽 표현의 모든 특성들이 검사되었는지를 체크한다(동작(S355)). 병합 조건이 충족되지 않으면, 시스템은 모든 특성들이 검사되었는지를 체크한다(동작(S355)). 모든 특성들이 검사되지 않았으면, 시스템은 최대 공통 영역을 갖는 다음의 특성으로 계속된다(동작(S352)). 모든 특성들이 검사된 경우에, 시스템은 병합된 특성들에 기초하여 압축된 CSS 파일을 획득한다(동작(S356)). 그 후, 시스템은 압축된 CSS 파일이 원래의 CSS 파일보다 감소된 파일 길이를 갖는지를 체크한다(동작(S357)). 압축된 CSS 파일이 감소된 파일 길이를 갖는 경우에, 시스템은 압축된 CSS 파일을 사용한다(동작(S358)). 그렇지 않으면, 시스템은 압축된 CSS 파일을 폐기하고, 원래의 CSS 파일을 사용한다(동작(S359)).

도 4는 본 출원의 실시예에 따른, 예시적인 데이터 압축 시스템의 개략적인 구조도이다. 데이터 압축 시스템(400)은 CSS 파일을 압축하기 위해 사용될 수 있다. 시스템(400)은 프로세서(410), 메모리(420), 및 저장 디바이스(430)를 포함한다. 저장 디바이스(430)는 메모리(420)에 로딩될 수 있으며 상술한 방법들을 수행하기 위해 프로세서(410)에 의해 실행될 수 있는 명령어들을 통상적으로 저장한다. 일 실시예에서, 저장 디바이스(430)에서의 명령어들은 파라미터 식별 모듈(432), 평가 모듈(434), 병합 모듈(436), 및 그래픽 선택 모듈(438)을 구현할 수 있고, 이들 모두는 다양한 수단들을 통해 서로 통신할 수 있다.

일부 실시예들에서, 모듈들(432, 434, 436, 및 438)은 하드웨어에서 부분적으로 또는 전체적으로 구현될 수 있으며 프로세서(410)의 일부일 수 있다. 추가로, 일부 실시예들에서, 시스템은 개별 프로세서 및 메모리를 포함하지 않을 수 있다. 대신에, 그들의 특정한 작업들을 수행하는 것에 부가하여, 모듈들(432, 434, 436, 및 438)은 개별적으로 또는 협력하여, 특수용 계산 엔진들의 일부일 수 있다.

저장 디바이스(430)는 프로세서(410)에 의해 실행될 프로그램들을 저장한다. 구체적으로, 저장 디바이스(430)는 CSS 파일의 강화된 압축을 위한 시스템(애플리케이션)을 구현하는 프로그램을 저장한다. 동작 동안, 애플리케이션 프로그램은 저장 디바이스(430)로부터 메모리(420)로 로딩될 수 있고 프로세서(410)에 의해 실행될 수 있다. 그 결과, 시스템(400)은 상술한 기능들을 수행할 수 있다. 시스템(400)은 임의의 디스플레이(480), 키보드(460), 및 포인팅 디바이스(470)에 더 결합될 수 있으며, 하나 이상의 네트워크 인터페이스들을 통해 네트워크(482)에 결합될 수 있다.

동작 동안, 특성 식별 모듈(432)은 도 2a와 함께 설명한 바와 같이, CSS 파일의 병합 파라미터를 결정한다. 병합 파라미터는 선택자, 특성, 및 상이한 특성들에 할당된 값들을 포함할 수 있다. 평가 모듈(434)은 결정된 병합 파라미터가 병합 조건을 충족하는지를 결정한다. 병합 모듈(436)은 압축된 CSS 파일을 획득하기 위해 CSS 파일에서 병합 파라미터들을 병합한다. 일부 실시예들에서, 그래픽 선택 모듈(438)은 CSS 파일에서의 특성들을 그래픽 표현(예를 들어, 테이블)으로 표현하고, 도 3b와 함께 설명한 바와 같이, 그래픽 표현에 기초하여 CSS 파일의 공통 인자들을 추출하고 병합한다.

이러한 상세한 설명에 설명한 데이터 구조들 및 컴퓨터 명령어들은 컴퓨터 시스템에 의한 사용을 위해 코드 및/또는 데이터를 저장할 수 있는 임의의 디바이스 또는 매체일 수 있는 컴퓨터-판독가능 저장 매체상에 통상적으로 저장된다. 컴퓨터-판독가능 저장 매체는 디스크 드라이브들, 자기 테이프, 컴팩트 디스크들(CDs), 디지털 다기능 디스크들 또는 디지털 비디오 디스크들(DVDs), 또는 현재 공지되어 있거나 추후에 개발될 컴퓨터-판독가능 매체를 저장할 수 있는 다른 매체들과 같은 휘발성 메모리, 비휘발성 메모리, 및 자기 및 광학 저장 디바이스들을 포함하지만, 이에 제한되지 않는다.

상세한 설명에 설명한 방법들 및 프로세스들은 상술한 바와 같은 컴퓨터-판독가능 저장 매체에 저장될 수 있는 코드 및/또는 데이터로서 실시될 수 있다. 컴퓨터 시스템이 컴퓨터-판독가능 저장 매체상에 저장된 코드 및/또는 데이터를 판독하고 실행할 때, 컴퓨터 시스템은 데이터 구조들 및 코드로서 실시되고 컴퓨터-판독가능 저장 매체 내에 저장된 방법들 및 프로세스들을 수행한다.

더욱이, 본원에 설명하는 방법들 및 프로세스들은 하드웨어 모듈들 또는 장치에 포함될 수 있다. 이들 모듈들 또는 장치는 응용 주문형 집적 회로(ASIC) 칩, 필드-프로그램가능한 게이트 어레이(FPGA), 특정한 시간에 특정한 소프트웨어 모듈 또는 코드의 피스를 실행하는 전용 또는 공유 프로세서, 및/또는 현재 공지되어 있거나 추후에 개발될 다른 프로그램가능한-로직 디바이스들을 포함할 수 있지만, 이에 제한되지 않는다. 하드웨어 모듈들 또는 장치가 활성화될 때, 이들은 이들 내에 포함된 방법들 및 프로세스들을 수행한다.

상기 설명은 본 기술분야의 통상의 기술자가 실시예들을 만들고 사용할 수 있게 하기 위해 제시되며, 특정한 애플리케이션 및 그것의 요건들의 맥락에서 제공된다. 개시된 실시예들에 대한 다양한 수정예들이 본 기술분야의 통상의 기술자에게는 자명할 것이고, 본원에 정의된 일반적인 원리들은 본 개시내용의 사상과 범위를 벗어나지 않으면서 다른 실시형태들 및 응용들에 적용될 수 있다. 따라서, 본 발명은 나타내어진 실시예들에 제한되는 것이 아니라, 본원에 개시된 원리들 및 특징들과 일치하는 최광의 범위에 따라야 한다.

Claims

웹 페이지에 대한 스타일을 나타내는 캐스캐이딩 스타일 시트(CSS) 파일의 압축을 용이하게 하는 방법으로서,
상기 웹 페이지를 호스팅(hosting)하는 서버에 의해, 제1 선택자(selector) 및 제2 선택자에서 반복된 코드를 식별함으로써 상기 CSS 파일에서 상기 제1 및 제2 선택자를 식별하는 단계 - 상기 반복된 코드는 상기 제1 및 제2 선택자 각각에서 나타남 -;
상기 반복된 코드에 대해 병합 조건이 충족되는지를 결정하는 단계;
상기 병합 조건이 충족된다고 결정하는 것에 응답하여 상기 제1 및 제2 선택자에서 상기 반복된 코드를 병합하는 것이 상기 CSS 파일에 의해 원래 나타내어진 상기 스타일과 동일한 스타일을 상기 웹 페이지에 대해 생성한다고 결정하는 단계;
상기 병합이 상기 동일한 스타일을 생성한다고 결정하는 것에 응답하여, 압축된 CSS 파일을 얻기 위해 상기 CSS 파일에서 상기 제1 및 제2 선택자에서의 상기 반복된 코드를 병합하는 단계; 및
상기 웹 페이지에 대한 요청을 수신하는 것에 응답하여, 상기 웹 페이지 및 상기 압축된 CSS 파일을 포함하는 웹 응답을 생성하는 단계
를 포함하는, 방법.
제1항에 있어서,
병합된 반복된 코드의 길이에 기초하여 상기 압축된 CSS 파일이 유효한지를 결정하는 단계를 더 포함하는, 방법.
제1항에 있어서,
상기 반복된 코드에 대해 병합 조건이 충족되는지를 결정하는 단계는
상기 CSS 파일에서 상기 제1 선택자와 상기 제2 선택자가 서로 바로 옆에 인접(immediately adjacent)하는지를 결정하는 단계; 및
상기 제1 선택자와 상기 제2 선택자가 서로 바로 옆에 인접하지 않는다는 것에 응답하여, 상기 제1 선택자와 상기 제2 선택자 사이의 제3 선택자가 상기 제1 및 제2 선택자들에 포함된 특성(property)을 포함하는지를 결정하는 단계를 포함하는, 방법.
제3항에 있어서,
상기 반복된 코드에 대해 병합 조건이 충족되는지를 결정하는 단계는,
상기 반복된 코드가
상기 제1, 제2, 및 제3 선택자들에서 동일한 값; 및
상기 제1, 제2, 및 제3 선택자들에서 상이한 우선순위들
중 하나 이상을 포함하는지를 결정하는 단계를 더 포함하는, 방법.
제1항에 있어서,
상기 반복된 코드의 특성에 할당된 2개의 값 중 전자 값 및 후자 값을 식별하는 단계 - 상기 반복된 코드에서 상기 후자 값은 상기 전자 값보다 이후에 나타남 -; 및
상기 특성의 상기 후자 값이 상기 특성의 상기 전자 값을 오버라이트하고(overwrite) 상기 후자 값이 상기 전자 값과 동일하거나 더 높은 우선순위를 갖거나, 상기 특성의 상기 전자 값이 상기 특성의 상기 후자 값을 오버라이트하고 상기 전자 값이 상기 후자 값보다 더 높은 우선순위를 갖는다는 결정에 응답하여 상기 제1 및 제2 선택자에서 상기 반복된 코드를 병합하는 것이 상기 CSS 파일에 의해 원래 나타내어진 상기 스타일과 동일한 스타일을 상기 웹 페이지에 대해 생성하는 것으로 결정하는 단계를 더 포함하는, 방법.
제1항에 있어서,
상기 반복된 코드를 병합하는 단계는 상기 제1 및 제2 선택자에서 상기 반복된 코드에서의 특성에 할당된 2개의 값 중 제2 값을 제거하는 단계를 포함하고,
상기 제2 값은 상기 2개의 값 중 제1 값 이전에 나타나거나, 상기 제1 값보다 낮은 우선순위를 갖거나, 상기 제1 값과 오버라이팅 관계를 갖는, 방법.
제1항에 있어서,
상기 CSS 파일의 선택자들 및 대응하는 특성들을 테이블에 표현하는 단계; 및
각각의 특성에 대한 상기 테이블에서의 공통 영역을 결정하는 단계를 더 포함하는, 방법.
제7항에 있어서,
제1 특성에 대한 상기 테이블에서의 현재 최대 공통 영역을 식별하는 단계;
상기 제1 특성을 공통 인자로서 추출하는 단계; 및
상기 제1 특성을 포함하는 각각의 선택자에 걸쳐 상기 공통 인자를 병합하는 단계를 더 포함하는, 방법.
제1항에 있어서,
복수의 병합된 반복된 코드들에 기초하여 상기 압축된 CSS 파일을 얻는 단계를 더 포함하는, 방법.
제1항에 있어서,
상기 압축된 CSS 파일을 얻기 전에, 상기 CSS 파일에서 모든 선택자들의 특성들을 알파벳 순서로 정렬하는 단계를 더 포함하는, 방법.
프로세서에 의해 실행될 때, 상기 프로세서로 하여금 웹 페이지에 대한 스타일을 나타내는 캐스캐이딩 스타일 시트(CSS) 파일의 압축을 용이하게 하는 방법을 수행하게 하는 명령어들을 저장하는 컴퓨터 판독 가능한 비일시적 저장 매체로서,
상기 방법은
상기 웹 페이지를 호스팅(hosting)하는 서버에 의해, 제1 선택자 및 제2 선택자에서 반복된 코드를 식별함으로써 상기 CSS 파일에서 상기 제1 및 제2 선택자를 식별하는 단계 - 상기 반복된 코드는 상기 제1 및 제2 선택자 각각에서 나타남 -;
상기 반복된 코드에 대해 병합 조건이 충족되는지를 결정하는 단계;
상기 병합 조건이 충족된다고 결정하는 것에 응답하여 상기 제1 및 제2 선택자에서 상기 반복된 코드를 병합하는 것이 상기 CSS 파일에 의해 원래 나타내어진 상기 스타일과 동일한 스타일을 상기 웹 페이지에 대해 생성한다고 결정하는 단계;
상기 병합이 상기 동일한 스타일을 생성한다고 결정하는 것에 응답하여, 압축된 CSS 파일을 얻기 위해 상기 CSS 파일에서 상기 제1 및 제2 선택자에서의 상기 반복된 코드를 병합하는 단계; 및
상기 웹 페이지에 대한 요청을 수신하는 것에 응답하여, 상기 웹 페이지 및 상기 압축된 CSS 파일을 포함하는 웹 응답을 생성하는 단계
를 포함하는, 컴퓨터 판독 가능한 비일시적 저장 매체.
제11항에 있어서,
상기 방법은 병합된 반복된 코드의 길이에 기초하여 상기 압축된 CSS 파일이 유효한지를 결정하는 단계를 더 포함하는, 컴퓨터 판독 가능한 비일시적 저장 매체.
제11항에 있어서,
상기 반복된 코드에 대해 병합 조건이 충족되는지를 결정하는 단계는
상기 CSS 파일에서 상기 제1 선택자와 상기 제2 선택자가 서로 바로 옆에 인접하는지를 결정하는 단계; 및
상기 제1 선택자와 상기 제2 선택자가 서로 바로 옆에 인접하지 않는다는 것에 응답하여, 상기 제1 선택자와 상기 제2 선택자 사이의 제3 선택자가 상기 제1 및 제2 선택자들에 포함된 특성을 포함하는지를 결정하는 단계를 포함하는, 컴퓨터 판독 가능한 비일시적 저장 매체.
제13항에 있어서,
상기 반복된 코드에 대해 병합 조건이 충족되는지를 결정하는 단계는,
상기 반복된 코드가
상기 제1, 제2, 및 제3 선택자들에서 동일한 값; 및
상기 제1, 제2, 및 제3 선택자들에서 상이한 우선순위들
중 하나 이상을 포함하는지를 결정하는 단계를 더 포함하는, 컴퓨터 판독 가능한 비일시적 저장 매체.
제11항에 있어서,
상기 방법은
상기 반복된 코드의 특성에 할당된 2개의 값 중 전자 값 및 후자 값을 식별하는 단계 - 상기 반복된 코드에서 상기 후자 값은 상기 전자 값보다 이후에 나타남 -; 및
상기 특성의 상기 후자 값이 상기 특성의 상기 전자 값을 오버라이트하고(overwrite) 상기 후자 값이 상기 전자 값과 동일하거나 더 높은 우선순위를 갖거나, 상기 특성의 상기 전자 값이 상기 특성의 상기 후자 값을 오버라이트하고 상기 전자 값이 상기 후자 값보다 더 높은 우선순위를 갖는다는 결정에 응답하여 상기 제1 및 제2 선택자에서 상기 반복된 코드를 병합하는 것이 상기 CSS 파일에 의해 원래 나타내어진 상기 스타일과 동일한 스타일을 상기 웹 페이지에 대해 생성하는 것으로 결정하는 단계
를 더 포함하는, 컴퓨터 판독 가능한 비일시적 저장 매체.
제11항에 있어서,
상기 반복된 코드를 병합하는 단계는 상기 제1 및 제2 선택자에서 상기 반복된 코드에서의 특성에 할당된 2개의 값 중 제2 값을 제거하는 단계를 포함하고,
상기 제2 값은 상기 2개의 값 중 제1 값 이전에 나타나거나, 상기 제1 값보다 낮은 우선순위를 갖거나, 상기 제1 값과 오버라이팅 관계를 갖는, 컴퓨터 판독 가능한 비일시적 저장 매체.
제11항에 있어서,
상기 방법은
상기 CSS 파일의 선택자들 및 대응하는 특성들을 테이블에 표현하는 단계; 및
각각의 특성에 대한 상기 테이블에서의 공통 영역을 결정하는 단계를 더 포함하는, 컴퓨터 판독 가능한 비일시적 저장 매체.
제17항에 있어서,
상기 방법은
제1 특성에 대한 상기 테이블에서의 현재 최대 공통 영역을 식별하는 단계;
상기 제1 특성을 공통 인자로서 추출하는 단계; 및
상기 제1 특성을 포함하는 각각의 선택자에 걸쳐 상기 공통 인자를 병합하는 단계를 더 포함하는, 컴퓨터 판독 가능한 비일시적 저장 매체.
제11항에 있어서,
상기 방법은 복수의 병합된 반복된 코드들에 기초하여 상기 압축된 CSS 파일을 얻는 단계를 더 포함하는, 컴퓨터 판독 가능한 비일시적 저장 매체.
제11항에 있어서,
상기 방법은, 상기 압축된 CSS 파일을 얻기 전에, 상기 CSS 파일에서 모든 선택자들의 특성들을 알파벳 순서로 정렬하는 단계를 더 포함하는, 컴퓨터 판독 가능한 비일시적 저장 매체.