2016-08-30 2 views
1

내가 후로드 페이지를 CSS 을 적용하는 것은 "깜박이"효과를 일으킬 수있는 많은 소스에서 알고 렌더링 페이지에서 결과 - 페이지가 CSS를 다시 렌더링을 의미합니다. 그러나JS의 CSS에 대한 조작 방법이

<head></head> 
<body> 
<link rel="stylesheet"... /> 
</body> 

, 나는 페이지가로드 된 후 JS와 (를 인라인하지 ) CSS를 적용하기위한 모든 소스를 찾을 수 있으며이 재 렌더링에 의해 반영 방법은 다음과 같습니다 예를 들어

그것은 자기. 예를 들어

:

HTML :

<head> 
<link rel="stylesheet" href="style.css" type="text/css" media="all" /> 
</head> 
<body> 
<div id="divid" class="displaynone"></div> 
<script> 
function showit(){ 
document.getElementById("divid").className += " displayblock";} 
window.onload = showit; 
</script> 
</body> 

CSS :

.displaynone {display:none;} 
.displayblock {display:block;} 

두 번째 예는 페이지가로드 된 후 CSS를 다시 렌더링하도록 강요 당할 것이다 것인가? displayblock이 실제로 div에 어떻게 적용되는지 깊이 알고 싶습니다.

답변

1

마크 업에서 DOM 요소 뒤에 <link rel="stylesheet"... />을 적용하면 "깜박임"효과가 발생할 수 있습니다. 이것은 브라우저가 CSS 파일을로드 할 때 (네트워크 요청이 이루어진 경우) ViewPort에 DOM이 이미 표시되어 있기 때문에 발생합니다 (아직 스타일이 적용되지 않았습니다).

<link rel="stylesheet"... />을 두 번째로 추가하는 경우 브라우저는 ViewPort에서 DOM을 렌더링하기 전에 CSS 파일을 다운로드합니다. 이 시점에서 JavaScript는 클래스 속성을 DOM으로 변경하고 모든 CSS가 이미로드되어 있으므로 깜박임이 없습니다.

시각적 표현과 관련된 속성으로 DOM을 변경하면 브라우저에서 "페인트"를 실행합니다. 이는 ViewPort 영역이 부분적으로 또는 완전히 다시 렌더링되었음을 의미합니다.

브라우저에 관한 흥미로운 기사는 painting and performancerendering path입니다. Chrome Dev Tools을 사용하는 경우에도 관심이 있습니다.

+0

약간의 어쩌면 약간의 변덕 스러움이 있지만,이 대답 내에서 텍스트를 클릭하면 전체 단락이 서서히 사라집니다. http://i.imgur.com/5NC8jTP.gifv - 수정 : 답변을 수락하거나 수정 한 후 수정되었습니다. –

+0

고마워요, 저는 방금 구걸에서 "깜박"(첫 번째 예에서)하는 이유를 인터넷 검색 및 시도하면서 똑같은 것으로 생각했습니다. – greenh

+0

@reenreen 당신은 오신 것을 환영합니다 :) – GibboK

관련 문제