본문에 CSS 정의가 존재하면?
웹 페이지를 작성하다보면 BODY 내에 CSS를 정의하는 경우가 많다.
페이지를 여러개로 쪼개는 경우 이런 일이 발생할 소지가 꽤 끄다고 할 수 있다.
하지만, 브라우져의 경우 본문을 파싱하다 정의된 CSS를 만나면 처음부터 다시 파싱한다. (어라 CSS정의가 또 있네? 내가 빼먹은게 있나?)
이럴경우 페이지내의 컨텐츠가 많다면 당연 로딩속도가 느려지게 된다. 많으면 많을 수록 더욱 느려지는 건 당연지사...
아래의 예는 P 태그를 바디 안에서 다시 정의했다. 이경우 전에 나온 P 태그 또한 동일한 스타일 시트가 적용되는 것을 볼 수 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 파싱</title>
<style type="text/css">
p {
font: 2em "Verdana, Arial, Helvetica, sans-serif" bold;
}
</style>
</head>
<body>
<p>first paragraph</p>
<style type="text/css">
p { border: 1px solid #00F; }
</style>
<p>second paragraph</p>
</body>
</html>
(0) 
(0)