CSS 게임 그림 Base 64 인 코딩

base 64 인 코딩 이 무엇 입 니까?　　
개념 을 말 하 는 것 이 아니 라 바로 본론 으로 들 어 갑 니 다.그림 의 base 64 인 코딩 은 그림 데 이 터 를 문자열 로 인 코딩 할 수 있 습 니 다.이 문자열 을 사용 하여 그림 주 소 를 대체 할 수 있 습 니 다.
이렇게 하 는 것 은 무슨 의의 가 있 습 니까?우리 가 본 웹 페이지 의 모든 그림 은 http 요청 다운 로드 를 소모 해 야 한 다 는 것 을 알 고 있 습 니 다.
그래,어쨌든 그림 의 다운 로드 는 서버 에 요청 해 야 한다.그림 의 다운 로드 는 서버 에 요청 하지 않 고 HTML 다운로드 와 함께 로 컬 로 다운로드 할 수 있다 면 다행 이 고,base 64 는 이 문 제 를 해결 할 수 있다.
그럼 그림 의 base 64 인 코딩 은 어떻게 생 겼 나 요?밤 을 들다.www.google.com 의 첫 페이지 검색 상자 오른쪽 에 있 는 작은 아이콘 은 base 64 인 코딩 을 사용 합 니 다.우 리 는 볼 수 있다.

// css    
#fkbx-spch, #fkbx-hspch {
  background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
}

// html  img      
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

위 는 각각 그림 의 base 64 인 코딩 이 css 에 있 는 쓰기 와 html태그 에 있 는 쓰기 입 니 다.base 64 인 코딩 은 이렇게 생 겼 습 니 다.물론 base 64 인 코딩 은 그림 인 코딩 뿐만 아니 라 가능 합 니 다.
thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa(복사 하지 마 나 는 정말 씨앗 이 아니 야)
헤헤 맞아요.신 뢰 의'전용 주소'도 Base 64 로 암호 화 되 어 있 습 니 다.관심 이 있 으 면 구 글 에서 군말 하지 않 습 니 다.
Base 64 인 코딩 을 왜 사용 합 니까?　　
그럼 왜 base 64 로 그림 파일 을 전송 합 니까?http 요청 을 절약 할 수 있 기 때문에 앞에서 도 언급 되 었 습 니 다.그림 의 base 64 인 코딩 은 전단 최적화 의 일환 이 라 고 할 수 있다.효 익 은 비록 작 지만,에너지 가 부족 하면 많은 것 을 이 룰 수 있다.
여기까지 말 하면 CssSprites 기술 을 언급 할 수 밖 에 없다.후자 도 http 요청 을 줄 이기 위해 페이지 의 많은 작은 그림 을 큰 그림 으로 합 쳤 다.그렇다면 그림 의 base 64 인 코딩 과 CssSprites 는 어떤 차이 점 이 있 습 니까?어떻게 선택해 야 합 니까?
따라서 여기 서 base 64 를 명확 하 게 사용 하 는 전 제 는 base 64 에 인 코딩 된 그림 의 충분 한 크기 가 작 다 는 것 이다.블 로그 원 의 로 고 를 예 로 들 면:

그림 에서 보 듯 이 블 로그 원 의 로 고 는 3.27KB 로 이미 매우 작 지만 이 를 base 64 인 코딩 으로 바 꾸 면 생 성 된 base 64 문자열 인 코딩 은 무려 4406 개 에 달한다.즉,그림 이 인 코딩 된 후에 생 성 된 문자열 인 코딩 크기 는 일반적으로 원래 파일 보다 약간 크다 는 것 이다.base 64 인 코딩 이 gzip 에 압축 되 더 라 도 압축 률 이 50%이상 에 이 를 수 있 습 니 다.한 요소 의 css 스타일 이 2000 자 를 넘 었 다 고 상상 해 보 세 요.css 의 전체적인 가 독성 에 큰 영향 을 줄 것 입 니 다.코드 의 중복 으로 인해 base 64 인 코딩 을 사용 하면 얻 는 것 보다 잃 는 것 이 많 습 니 다.
그렇다면 base 64 인 코딩 이 쓸모 가 없다 는 뜻 일 까?안 그러면페이지 의 그림 이 다음 과 같은 요 구 를 만족 시 키 면 base 64 는 낯 선 사람 을 크게 드 러 낼 수 있다.
그림 이 충분히 작고 용도 의 특수성 때문에 사이다 그림(CssSprites)으로 만 들 수 없다 면 전체 사이트 에서 의 재 활용 성 이 높 고 업데이트 되 지 않 을 것 이다.
그러면 이때 base 64 인 코딩 으로 그림 을 전송 하 는 것 은 칼날 에 강철 을 사용 하 는 것 이 라 고 할 수 있 습 니 다.심사숙고 한 후에 이 규칙 에 부합 되 는 것 중 하 나 는 우리 가 자주 만 나 는 것 입 니 다.바로 페이지 의 배경 그림 background-image 입 니 다.많은 곳 에서 우 리 는 아주 작은 그림 을 만들어 서 대략 몇 px*몇 px 인 다음 에 페이지 를 배경 그림 으로 평평 하 게 깔 것 이다.배경 그림 이기 때문에 사이다 그림 에 넣 을 수 없 지만 사이트 의 많은 페이지 가 존재 합 니 다.이런 그림 은 수 십 바이트 에 불과 하지만 http 요청 이 필요 합 니 다.매우 가치 가 없습니다.그렇다면 이 때 그것 을 base 64 인 코딩 으로 바 꾸 는 것 이 어 떻 겠 습 니까?
다음은 50 바이트 밖 에 없 는 2*2 배경 그림 입 니 다.이 를 base 64 인 코딩 으로 바 꾸 면 100 여 개의 문자 만 있 고 http 요청 에 비해 이러한 전환 은 더욱 숭배 할 만하 다.

CssSprites 와 Base 64 인 코딩
내 가 언제 이 두 가지 최적화 방법 을 사용 하 는 지 에 대한 견 해 를 간단하게 진술 하 다.
CssSprites 를 사용 하여 큰 그림 으로 통합:
페이지 는 다양한 스타일 을 가지 고 있 으 며,스킨 케 어 기능 이 필요 하 며,CssSprites 를 사용 할 수 있 습 니 다.
사 이 트 는 이미 완벽 해 져 서 더 이상 3 일 2 일의 변경 이 없 을 것 이다(예 를 들 어 button 크기,색상 등).
사용 시 도형 내용 을 중복 할 필요 가 없습니다.
Base 64 인 코딩 비용 이 없어 서 그림 업데이트 의 유지 보수 난이 도 를 낮 춥 니 다.(그러나 Sprites 가 css 와 그림 을 동시에 수정 하 는 것 은 부 담 스 러 울 수 있 습 니 다)
CSS 파일 의 부 피 를 늘 리 지 않 습 니 다.
base 64 를 사용 하여 직접 그림 을 문자열 로 인 코딩 하여 CSS 파일 에 기록 합 니 다:
추가 요청 없 음
아주 작 거나 아주 간단 한 그림
배경 그림 중복 사용 등 단독 그림 처럼 사용 할 수 있 습 니 다.
크로스 필드 문제 가 없 으 며 캐 시,파일 헤더 또는 cookies 문 제 를 고려 할 필요 가 없습니다.
더욱 편리 하 게 그림 을 Base 64 인 코딩 으로 변환 합 니 다.
그림 을 base 64 인 코딩 으로 바 꾸 는 데 많은 도구 가 있 습 니 다.예 를 들 어 본 논문 에서 제 가 사용 하 는 것 입 니 다.http://www.pjhome.net/web/html5/encodeDataUrl.htm그러나 많은 이들 사 이 트 는 외국 사이트 로 벽 에 자주 접속 되 지 않 는 다.여기 서 더 빠 른 방법 을 소개 합 니 다.바로 크롬 브 라 우 저 를 이용 하 는 것 입 니 다.
chrome 아래 에 창 을 새로 만 든 다음 전환 할 그림 을 브 라 우 저 에 직접 끌 어 다 놓 고 콘 솔 을 열 고 Source 를 누 르 십시오.아래 그림 과 같이 그림 을 누 르 면 오른쪽 에 이 그림 의 base 64 인 코딩 이 표 시 됩 니 다.편리 하지 않 습 니까?

일부 오점
Base 64 는 장점 이 있 지만 단점 도 뚜렷 하고 사용 에 있어 뚜렷 한 결함 이 있다.
1.Base 64 를 사용 하 는 것 은 성능 최적화 가 아니다.
예,Base 64 를 사용 하면 그림 의 HTTP 요청 을 줄 일 수 있 지만 그 와 동시에 지불 하 는 대 가 는 CSS 파일 의 부피 가 커지 는 것 이 좋 습 니 다.
CSS 파일 의 부피 가 커지 는 것 은 무엇 을 의미 하 는가?CRP 의 차단 을 의미 합 니 다.
CRP(Critical Rendering Path,관건 적 인 렌 더 링 경로):브 라 우 저가 서버 에서 HTML 페이지 의 요청 을 받 았 을 때 화면 에 렌 더 링 을 하려 면 여러 절 차 를 거 쳐 야 합 니 다.브 라 우 저 는 이 일련의 실행 을 완성 하거나 렌 더 링 을 할 때 흔히'관건 적 인 렌 더 링 경로'라 고 부 릅 니 다.
쉽게 말 하면 그림 은 관건 적 인 렌 더 링 경 로 를 막 지 않 고 Base 64 로 전환 하 는 그림 은 CSS 파일 의 부 피 를 크게 증가 시 켰 다.CSS 파일 의 부 피 는 렌 더 링 에 직접적인 영향 을 주어 사용자 가 장시간 공백 화면 을 주시 하 게 만 들 었 다.HTML 과 CSS 는 렌 더 링 을 막 고 그림 은 그렇지 않 습 니 다.
2.페이지 분석 CSS 생 성 CSSOM 시간 증가
Base 64 는 CSS 와 섞 여 브 라 우 저가 CSS 트 리 를 분석 하 는 데 걸 리 는 시간 을 크게 증가 시 켰 다.사실 CSS 트 리 를 해석 하 는 과정 은 매우 빠 르 고 보통 몇 십 에서 몇 밀리초 사이 에 미묘 하 다.
CSS 개체 모델(CSSOM):CSSOM 은 웹 페이지 에 설 치 된 CSS 스타일 의 맵 으로 DOM 과 유사 하지만 HTML 이 아 닌 CSS 만 을 대상 으로 합 니 다.
CSSOM 생 성 과정:

CSSOM 생 성 과정 은 크게 HTML 을 분석 하고 문서 의 head 부분 에서 링크 표 시 를 만 났 습 니 다.이 표 시 는 외부 CSS 스타일 시트 를 참조 하여 이 스타일 시트 를 다운로드 한 후 상기 과정 에 따라 CSSOM 트 리 를 생 성 합 니 다.여기 서 우리 가 알 아야 할 것 은 CSS 가 렌 더 링 을 막 는 것 이다.
그리고 가장 중요 한 것 은 추 가 된 분석 시간 이 모두 관건 적 인 렌 더 링 경로 에 있다 는 것 이다.
따라서 우리 가 Base 64 기술 을 사용 해 야 할 때 상기 문 제 를 의식 하고 취사선택 하여 사용 해 야 한다.
이상 은 CSS 게임 이미지 Base 64 인 코딩 에 대한 상세 한 내용 입 니 다.CSS 게임 이미지 Base 64 인 코딩 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!