2017-12-14 6 views
0

다음보기를 위해 CSS 파일을 미리 가져 오려고합니다. 그러나 브라우저에서 프리 페치 한 CSS 파일이 작동하지 않았습니다.프리 패치 된 CSS가 작동하지 않았습니다.

<link rel="prefetch" href="/modules/style/common.css"> 

그리고 chromeDev의 Network 보여줍니다 : 그건 내 사용의 enter image description here

내가 prefetch를 사용하여 직접 다음과 같은 CSS 파일을 가져 포기, CSS 규칙 작업 :

<link rel="stylesheet" type="text/css" href="/modules/style/common.css"> 

그리고 이번에 chromeDev의 Network은 다음을 보여줍니다. enter image description here

내가 볼 수있는 차이점은 빨간색 상자가 표시된 type입니다. 아무도이 문제를 해결하는 방법을 말해 줄래? 나는 봤지만 대답이 없다.

+0

나는 혼란 스럽다. 당신이 일하고 있다고 말하면서 무엇을 해결하려고 하는가? –

+2

'prefetch' 대신'preload'를 원했습니까? MDN에 따르면 "브라우저는 프리 패치 리소스를 프리로드 리소스보다 우선 순위가 낮습니다." – j08691

+0

우선 순위가 @j08691과 다르므로 프리 페치 이미지가 가장 낮고 다른 이미지가 가장 높습니다. – Scath

답변

0

프리 페치 힌트는 다음 페이지에서 필요한 리소스를 프리 페치하는 데 관한 것입니다. 2 페이지가 있다고 가정 해 봅시다.

  • /인덱스
  • /이후

포스트는 post.css 파일이 필요합니다. 색인 페이지는 사용자가 게시 페이지로 이동한다는 것을 "인식"합니다. 따라서 색인 페이지는 브라우저가 post.css을 프리 페치하도록 지시합니다.

<link rel="prefetch" href="/css/post.css">

하지만, 포스트 페이지 어쨌든 그것을 사용하는 브라우저를 말해야한다. post.css 이후

<link rel="stylesheet" type="text/css" href="/css/post.css">

이미 브라우저가 캐시에서 서비스를 제공 할 것이다, 프리 페치된다.

Btw, 저는 사용자가 사이트를 탐색하는 방법을 분석하는 오픈 소스 프로젝트 (https://github.com/sirko-io/engine)를 연구 중이므로 다음 페이지에서 필요한 리소스를 미리 실행할 수 있습니다. 이 프로젝트의 목적은 프리 페치 힌트를 의미가있을 때 자동으로 추가하는 것입니다.