작은 파비콘이 또 다른 HTTP 요청을 요구하는 것은 어리석지 않습니까? 파비콘을 스프라이트에 어떻게 넣을 수 있습니까?
누구나 HTML로 favicon.ico 링크를 설정하는 방법을 알고 있습니다.
<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">
그러나 작은 몇 바이트 아이콘의 경우 또 다른 HTTP 요청 이 필요하다는 것은 바보 같은 생각 입니다. 그래서 background-position=0px -200px;귀중한 HTTP 요청을 가속화하고 저장하기 위해 어떻게 이미지를 스프라이트 (예 :)의 일부로 만들 수 있을지 궁금했습니다 . 로고와 다른 아트 워크를 사용하여 기존 스프라이트 이미지로 가져 오려면 어떻게해야합니까?
favicon.ico폭포 그래프의 항목 번호 31을 가리키는 로봇 이 내 애완 동물 ZAM입니다. 그는 일반적으로 더 행복하고 웹에서 창의적인 업그레이드를 할 때가되었음을 알려주는 좋은 지적이 있습니다.하지만 그와 나는 그의 복장에 동의하지 않습니다.
@yc의 답변 을 약간 개선하면 일반적으로 사용 및 캐시되는 JavaScript 파일에서 base64로 인코딩 된 favicon을 주입 favicon.ico하고 관련 meta태그 에 데이터 URI를 제공하여 요청의 표준 브라우저 동작을 억제합니다 .
이 기술은 추가 http 요청을 피하고 Windows 7의 최신 버전의 Chrome, Firefox 및 Opera에서 작동하는 것으로 확인되었습니다. 그러나 Internet Explorer 9에서는 작동 하지 않는 것 같습니다.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Suppress browser request for favicon.ico -->
<link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
<script src="script.js"></script>
...
script.js
var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";
var docHead = document.getElementsByTagName('head')[0];
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);
/* Other JS would normally be in here too. */
데모 : turi.co/up/favicon.html
대부분의 경우 다른 HTTP 요청은 일반적으로 첫 번째 액세스 후 브라우저 캐시에 덤프되므로 다른 HTTP 요청이 발생하지 않는다고 생각합니다.
이것은 실제로 제안 된 "솔루션"보다 효율적입니다.
데이터 URI를 사용해 볼 수 있습니다. HTTP 요청이 없습니다!
<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">
페이지에 정적 캐싱이 없으면 즐겨 찾기 아이콘을 캐시 할 수 없으며 즐겨 찾기 아이콘 이미지의 크기에 따라 소스 코드가 부풀어 질 수 있습니다.
데이터 URI 즐겨 찾기 아이콘은 대부분의 최신 브라우저에서 작동하는 것 같습니다. Mac의 최신 버전의 Chrome, Firefox 및 Safari에서 작동합니다. Internet Explorer 및 일부 버전의 Opera에서는 작동하지 않는 것 같습니다.
Old IE가 걱정된다면 (그리고 요즘은 안될 수도 있음), 기존 Internet Explorer는 기존 favicon.ico를 전통적인 방식으로로드하는 IE 조건부 주석을 포함시킬 수 있습니다. 지원 데이터 URI Favicons
`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" /><![endif]--> `
- favicon.ico 파일을 루트 디렉토리에 포함시켜 두 가지 방법으로 요청하는 브라우저를 포함하십시오. 브라우저가 이미 수행 한 작업을 확인하고 있다면 404 응답으로 HTTP 요청을 낭비하지 않을 수 있기 때문에 .
또한 인기있는 다른 사이트의 즐겨 찾기 아이콘을 사용하여 즐겨 찾기 아이콘을 캐시 http://google.com/favicon.ico하여 캐시에서 제공 할 수 있습니다.
댓글 작성자가 지적했듯이, 일부 브라우저는 우리가 고안 한 트릭에 관계없이 favicon.ico를 요청 하기 때문에 그렇게 할 수 있다고해서 의미하지는 않습니다. 이렇게하면 저장하는 오버 헤드의 양은 gzipping, 정적 콘텐츠에 대한 미래의 만료 헤더 사용, JavaScript 파일 축소, 스프라이트 또는 데이터 URI에 배경 이미지 삽입 등의 작업을 통해 얻는 비용에 비해 미미한 수준입니다. CDN 등에서 정적 파일 제공
다음과 같이 base64로 인코딩 된 파비콘을 사용할 수 있습니다.
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
좋은 지적과 좋은 생각이지만 불가능합니다. 파비콘은 하나의 개별 리소스 여야합니다. 다른 이미지 파일과 결합 할 방법이 없습니다.
이 페이지 에서 흥미로운 해결책을 찾았습니다 . 독일어이지만 코드를 이해할 수 있습니다.
아이콘의 base64 데이터를 외부 스타일 시트에 넣으면 캐시됩니다. 웹 사이트 헤드에서 ID로 즐겨 background-image찾기 아이콘을 정의해야하며 해당 즐겨 찾기 아이콘은 해당 ID의 스타일 시트에서 로 설정됩니다 .
link#icon {
background-image:url("data:image/x-icon;base64,<base64_image_data>");
}
그리고 HTML
<html>
<head>
<link id="icon" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/styles.css" />
...
</head>
<body>
...
</body>
</html>
정말 문제가 되나요?
많은 브라우저가 즐겨 찾기 아이콘을 낮은 우선 순위로로드하여 페이지로드를 차단하지 않으므로 추가 요청이지만 중요한 경로는 아닙니다.
JS가 검색되고 실행될 때까지 아래의 모든 DOM 요소가 렌더링에서 차단되고 요청 수를 줄이지 않기 때문에 허용 된 솔루션은 끔찍합니다!
적절한 해결책은 HTTP 파이프 라이닝 을 사용하는 것 입니다.
HTTP 파이프 라이닝은 해당 응답을 기다리지 않고 여러 HTTP 요청을 단일 소켓에 기록하는 기술입니다. 파이프 라이닝은 HTTP가 아닌 1.0 / 1.1에서만 지원됩니다.
서버가이를 지원해야하지만 반드시 참여할 필요는 없습니다.
HTTP 파이프 라이닝을 위해서는 클라이언트와 서버 모두 지원해야합니다. 파이프 라이닝을 지원하려면 HTTP / 1.1 호환 서버가 필요합니다. 이는 서버가 응답을 파이프 라인하는 데 필요하지는 않지만 클라이언트가 파이프 라인 요청을 선택하는 경우 실패하지 않아야 함을 의미합니다.
많은 브라우저 클라이언트가 필요할 때하지 않습니다.
대부분의 브라우저에서 HTTP 파이프 라이닝이 비활성화되어 있습니다.
- Opera에는 기본적으로 파이프 라이닝이 활성화되어 있습니다. 휴리스틱을 사용하여 연결된 서버에 따라 사용되는 파이프 라이닝 수준을 제어합니다.
- Internet Explorer 8은 버그가 많은 프록시 및 헤드 라인 차단과 관련된 문제로 인해 요청을 파이프 라인하지 않습니다.
- Mozilla 브라우저 (예 : Mozilla Firefox, SeaMonkey 및 Camino)는 파이프 라인을 지원하지만 기본적으로 비활성화되어 있습니다. 특히 휴리스틱을 사용하여 IIS 서버의 파이프 라이닝을 해제합니다.
- Konqueror 2.0은 파이프 라이닝을 지원하지만 기본적으로 비활성화되어 있습니다. [citation needed]
- Chrome은 파이프 라이닝을 지원하지 않습니다.
Firefox에서 파이프 라이닝을 활성화하고 거기서 시도하거나 Opera (shudder)를 사용하는 것이 좋습니다.
좋은 생각이지만 Google이 홈페이지에서 수행하지 않은 경우 (현재) 수행 할 수 없습니다.
실제로 질문에 대한 답변이 아니라 Marcel 과 yahelc 의 답변을 칭찬 하기 위해 404 favicon 문제에 대한 우아한 해결책을 제공합니다.
일부 앱과 브라우저 및 favicon.com을 확인하지 않고 사이트 루트에 아이콘이 없으면 204 응답 헤더 를 사용하여 요청에 간단히 응답 할 수 있습니다 .
아파치 예제 :
.htacces 또는 .conf의 Apache 옵션 하나 (그리고 내가 좋아하는 것), 간단한 하나의 라이너 :
Redirect 204 /favicon.ico
아파치 옵션 2 :
<Files "favicon.ico">
ErrorDocument 204 ""
</Files>
자세한 내용을 보려면 Stoyan Stefanov의 http://www.phpied.com/204-no-content/ 블로그 게시물이 있습니다 .
죄송하지만 파비콘을 다른 리소스와 결합 할 수는 없습니다.
이것은 기본적으로 두 가지 옵션이 있음을 의미합니다.
즐겨 찾기
href아이콘이없는 사이트에 익숙한 경우 이미로드 된 비 아이콘 리소스 (예 : 스타일 시트, 스크립트 파일 또는 프리 페치로 혜택을받는 일부 리소스)를 가리킬 수 있습니다. .)
(간단히 테스트 한 결과 이것이 모든 주요 브라우저에서 작동하는 것은 아닙니다.)추가 HTTP 요청을 수락하고 즐겨 찾기 아이콘 파일에 공격적인 HTTP 캐시 제어 헤더가 설정되어 있는지 확인하십시오.
제어 할 수있는 다른 웹 사이트가있는 경우 다른 정적 리소스와 함께이 웹 사이트의 즐겨 찾기 아이콘을 미리로드 할 수도 있습니다.
작동하지 않는 PS Creative 솔루션 :
- 이상한 CSS 데이터 URI 트릭 (댓글 작성자 Felix Geenen이 링크 함) 이 작동하지 않습니다 .
- Javascript를 사용하여 favicon
<link>요소의 주입 지연 (사용자 @yc가 제안한대로)을 수행하면 HTTP 요청이 두 번 발생하여 상황이 악화 될 수 있습니다.
더 작은 데이터 공간을 위해 ICO 형식 대신 8 비트 PNG를 사용할 수 있습니다. 변경해야 할 것은 "data : image / x-icon"MIME 유형 헤더 대신 "data : image / png"를 사용하는 것입니다.
<link
href="data:image/png;base64,your-base64-encoded-string-goes-here"
rel="icon" type="image/png"
/>
"type"속성은 "image / png"또는 "image / x-icon"일 수 있으며 둘 다 작동합니다.
gimp 또는 convert를 사용하여 ICO를 8 비트 png로 변환 할 수 있습니다.
convert favicon.ico -depth 8 -strip favicon.png
base64 명령을 사용하여 PNG 바이너리를 base64 문자열로 인코딩하십시오.
base64 favicon.png
가장 쉬운 방법은 다음과 같습니다.
<!DOCTYPE html><html><head>
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>
어떤 아이콘을 나타 냅니까? 아래에서 답변하고 공감하십시오!
페이지의 모든 단일 이미지는 별도의 http 요청입니다. 파비콘에 필요한 비극은 없습니다.
'development' 카테고리의 다른 글
| 여권 직렬화 직렬화 이해 (0) | 2020.03.18 |
|---|---|
| 파이썬 변수의 유형을 확인하는 가장 좋은 방법은 무엇입니까? (0) | 2020.03.18 |
| 조각에서 onCreate (), onCreateView () 및 onActivityCreated ()의 차이점 및 사용 (0) | 2020.03.18 |
| 인코딩을 감지하고 모든 것을 UTF-8로 만듭니다. (0) | 2020.03.18 |
| XAMPP / Apache가 htdocs 외부에 파일을 제공하게하십시오 (0) | 2020.03.18 |