사진 기술 없이 웹 사이트 성능 최적화 css

사진 기술 정의

CSS를 사용 하지 않고 그림 같은 효과 생성 하는 기술을 이미지 (IMG 태그에 이미지를 제외 하 고 CSS에 의해 도입 배경 이미지); 즉, 그것은 순수 CSS를 사용 하 여 사진 효과 만드는 기술입니다.

둘째, 왜 "그림"?

우선, YSlow 통계를 통해 우리 시 나 Weibo 파일의 최신 버전을 보려면, 스타일 시트 http://www.aliyun.com/zixun/aggregation/19352.html "> (파일 CSS 파일 크기 206.8 K 이며 CSS 이미지 크기는 623.8K. 그것은 분명 CSS 파일은 CSS 이미지 보다 훨씬 작습니다.

물론, 단순히 이러한 두 비교, 아직도 무엇을 설명할 수 없다.
우리는 CSS 파일 및 CSS 이미지 관계를 계산 하는 아래
그림으로 저장 하면, (아래와 같이) CSS 이미지 사진, 각 그림, 작은 작은 경우에 화살표의 시리즈 구성 1 KB 바 얻을 하는 방법.
예를 들어 Weibo의이 작은 삼각형 그림

만약 우리 모두가 모방 CSS의 형태로이 작은 화살표, 얼마나 많은 공간 자원이 이다? 첫 번째 코드를 살펴 보자.
HTML 코드는 다음과 같습니다.

CSS 코드는 다음과 같습니다.

위의 코드에서 볼 수 있습니다 CSS 파일 전체에서에 미만 200 자, 만약 우리가 1 문자 같음 1B에 따라 계산, 200 자는 아마 다운로드 리소스의 4/5 하기 그림의 직접 사용 보다 0.2 KB 크기를 크게 줄일 요청 리소스의. 만약 우리가 사용 하는 그림 기술을 달성 하기 위해, 가능한 한 많이 분명히 페이지 로딩 속도 향상 시킬 수 있습니다 둘째, 우리가 각 CSS 이미지 로드는 HTTP 요청이 필요 합니다 알고; 제한 된 수의 요청을 발행 하는 각 브라우저, CSS 이미지의 수를 감소, 분명히 HTTP 요청의 수를 줄일 수 페이지의 프레 젠 테이 션 속도 개선, 다시, 자주 사용 하는 마이크로 마이크로 보 수 보 학생 알 피부, 변경 경우 그림 기술 없이 CSS 사용 하 여, 우리 간단 하 게 바꿀 필요가 CSS 코드의 유지 보수 향상 속성 실현 될 수 있다.
위의 분석을 통해 그림 기술 없이 CSS를 사용 하 여 요약할 수 있습니다 다음 3 장점
요청된 된 리소스의 크기를 줄이기 위해
Http 요청 수를 줄이기 위해
서비스 개선
셋째, CSS 사진 기술, 마이크로-블로그에 실용적인 응용 프로그램?

위의 공연을 통해 우리 없는 사진 기술, 마이크로 블로그 응용 프로그램에는 흔히 볼 수 있습니다.

4, 아무 그림 기술을 달성 방법

약 4 개의 방법이 있다: 하나는 생성 하는 사진을 통해 배경색, 테두리 및 다른 문자, 그림을 생성 하는 고 3는 CSS3 그라디언트, 등 (이 호환 되지 않는 낮은 수준의 브라우저의 문제를 고려해 야)를 통해 사진을 생성 하는; 4는 c s s 3에 대 한 사용자 지정 글꼴 (@ Font-face) 사진을 생성 하.
CSS 배경 색상, 삼각형 등 일부 그래픽을 생성 하기 위해 속성을 사용 합니다. 순수한 CSS2 콘텐츠 i e 6와 호환 수 있습니다.
1 작은 사각형 배경 색상으로 생성, 결과 다음과 같습니다.

CSS 코드:

2 작은 사각형 테두리가 생성, 결과 다음과 같습니다.

CSS 코드:

3 작은 삼각형 테두리에 의해 생성 된 효과 다음과 같습니다.

CSS 코드:

4 삼각형 테두리에 의해 생산, 효과 다음과 같습니다.

CSS 코드:

5 간접 삼각형 테두리에 의해 생성, 효과 다음과 같습니다.

HTML 구조:

CSS 코드:

위의 5 종류의 그래픽을 통해 다음 그래픽을 얻을 수 있습니다, 효과 다음과 같습니다.

여기만 그래픽 코드의 중간, 다른, 관심 있는 학생 들 공부할 수 있습니다, 더 재미 있는 그래픽 완료을 기다리고 있습니다.
HTML 구조:

CSS 코드:

2입니다. 날카로운 모서리, 점, 화살표 등 캐릭터에서 사진 만들기 i e 6와 호환 될 수 있는 CSS2 카테고리 이기도 합니다. 이 보에서 널리 이용 되는, 여기 혼자 데모를 작성 하지 않습니다.
1) 날카로운 각도, 효과 차트는 다음과 같습니다.

HTML 구조:

CSS 코드:

2) 점, 효과 차트는 다음과 같습니다.

HTML 구조:

CSS 스타일:

3) 화살표, 효과 아래와 같습니다.

HTML 구조:

CSS 스타일:

Microblogging 명예의 전당에는 특정 정의 하지만 다양 한 브라우저에서에서 작동 수 있도록 글꼴 스타일에 몇 가지 제한을 확인 하는 것이 좋습니다.

3입니다. IE 브라우저 사용에서 CSS3 상자 그림자, 국경-반경, 그라데이션 그라데이션, 새로운 속성을 사용 하 여 그래픽을 생성 하 고 다른 CSS3 그라디언트를 사용 하 여 그래픽을 생성 하기 위해 배경 IE 그라데이션 필터 하지만 필터 리소스를 사용 하 여 매우 큰 될 것입니다, 그래서, 실제 프로젝트에 대 한 필터를 사용 하 여 균형.
먼저 Google 검색 버튼 예제를 봐

CSS 스타일:

Google이 검색 단추는 필터를 사용 하지 않는, IE 브라우저는 점진적 과정을 하지 않습니다, 우리 모두가 알고 Google는 회사의 성능에 대해 매우 우려 하 고 때로는 최고의 성능에 대 한 시각적 경험의 작은 희생은 허용.
Taobao에 "더 보기" 버튼을 봐.

CSS 스타일:

Taobao이이 단추, 필터를 사용 하 여 완벽 하 게 호환 수 ie, 물론,이 수 하지 Taobao 관심을 지불 하지 않는 성능, 말할 수 있습니다만 게임 결과의 성능과 비주얼 경험.
4. c s s 3 사용자 정의 글꼴 (@font-face) 비록이 방법, 그림의 진정한 의미에 속해 있지 않으면만 편집 하 고, 더 중요 한 것은, 그것의 크기를 유지 하기 쉬운 컬러 CSS, 직접 할 덜 사용 사진을 통해 제어할 수 있습니다 사진을, 생성 하.
특정 응용 프로그램, 마이크로 보 마이크로 바 아이콘

HTML 구조:

CSS 스타일:

관심 있는 학생 들은 @ 하나님을 참조 하는 이론적 근거, 시작 쓰기, 뿐만 아니라 기사의 특정 구현에 관해서는 비행 "CSS3 아이콘 글꼴 완전 한 가이드" http://www.qianduan.net/css3-icon-font-guide.html를 썼다.

짧은, CSS에서 아니 사진 기술, 우리는 CSS 스타일 개념을 형성 하는 데 필요한 서 면, 내가 실제 상황, 몇 가지 합리적이 고 효과적인 성능 최적화를 할 수 없는 사진 기술의 유연한 사용에 따라 찬반 양론의 무게를 실제 프로젝트에 그림 기술 없이 죽이 필요가 없습니다.

(Weibo UDC 원래 블로그, 복제, 소스를 표시 하시기 바랍니다 오신 것을 환영 합니다 가입)