[javascript] 작은 파비콘이 또 다른 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 요소가 렌더링에서 차단되고 요청 수를 줄이지 않기 때문에 허용 된 솔루션은 끔찍합니다!