CSS 렌더링 속도에 영향을 미치는 10가지 작성 및 사용 제안 페이지 1/3_Experience Exchange

저는 최근에 CSS를 거의 작성하지 않고 앞으로는 덜 작성할 수도 있습니다. 그래서 여러분에게 도움이 되기를 바라면서 제 경험을 공유하고 싶습니다!

이 글은 클라이언트 브라우저에서 웹 페이지의 렌더링 속도를 향상시키는 CSS 부분에 대해 주로 작성했으며, 10가지 항목을 임시로 요약했습니다.

1. *{} #jb51 *{} 피하세요

브라우저마다 HTML 태그에 대한 해석이 다르기 때문에 최종 웹 페이지 효과는 브라우저마다 다를 수 있습니다. 이러한 위험을 제거하기 위해 디자이너는 일반적으로 CSS 시작 부분에서 모든 태그의 모든 기본 속성을 제거하여 모든 태그에 대해 균일한 속성 값의 효과를 얻습니다. 따라서 * 와일드카드가 있습니다. * 모든 태그를 순회합니다.

이렇게 작성하면 페이지의 모든 태그 여백도 0이 됩니다.

*{margin:0; padding:0}

이렇게 작성하면 jb51과 동일한 ID 아래의 모든 태그의 여백도 모두 0입니다.

#jb51 *{margin:0; padding:0}

문제는 다음과 같습니다. 다음과 같이 작성합니다:
a .Traversal은 많은 시간을 소비합니다. HTML 코드가 표준화된 방식으로 작성되지 않았거나 특정 태그가 반드시 일치하지 않는 경우 이 시간은 더 길어질 수 있습니다.
b. 많은 태그에는 이 속성이나 속성이 자체적으로 통합되어 있으므로 다시 설정하는 데 시간이 걸립니다.

권장 해결 방법:
이러한 태그는 사용하지 마세요. 다른 브라우저에서 자주 사용됩니다. 해석의 효과는 다르기 때문에 가능한 한 많이 사용하는 태그를 사용해야 합니다.
b. 대신에 일반적으로 사용하는 태그를 처리하세요. , li, p, h1 {margin:0; padding:0}

2. 일부 필터를 사용하지 마세요

IE의 일부 필터는 FIREFOX에서 지원되지 않습니다. 일부 효과를 작성할 때, 필터는 리소스가 매우 부족합니다. 특히 일부 페더링, 그림자 및 전면 투명 효과는 다음과 같습니다.




추천 해결 방법:
a. 사용할 수 없다면 사용하지 마세요. 한편으로는 IE에서만 사용할 수 있는 효과가 많습니다. 🎜>b. 이런 경우에는 최상의 효과를 위해 사진을 배경으로 사용하는 것이 좋습니다. (속도 최적화에 대해서만 이야기하고 있습니다. 실제 응용 프로그램에서는 계속 사용할 수 있습니다. 작은 부분들. 어떤 사람들은 사진을 사용하려면

HTTP 요청이 하나 더 필요하다고 말할 수도 있습니다. 하하...)

<style> 
body {margin:100px;} 
#login_b {width:200px;height:200px;background:#000;-moz-opacity:0.2; filter:alpha(opacity=20);
margin:-30px 0 0 600px; position:absolute;} 
#login_t { z-index:10;border:1px solid #006600;width:200px;height:200px;background:#FFF;
margin:-35px 0 0 595px; position:absolute;} 
#info{ background:#009900; height:155px;} 
</style> 

<div id="info"> 
<div id="login_t">test</div> 
<div id="login_b"></div> 
</div>

올해 5월 12일 지진 당시 많은 웹사이트가 하룻밤 사이에 회색으로 변했습니다. 그들은 CSS 코드 한 줄만 사용했습니다:


프로그램 코드






그러나 이러한 웹 페이지는 속도가 매우 느리고, 열면 CPU가 급상승합니다. 컴퓨터 구성이 좋지 않으면 목숨을 잃는다고 해도 과언이 아닙니다.

body{filter: gray;}

3. 페이지에서 절대 위치 지정을 덜 자주 사용하세요

절대 위치 지정(위치:절대)은 웹 페이지 레이아웃에서 매우 일반적으로 사용됩니다. 특히 플로팅 효과를 만들 때 더욱 그렇습니다. 페이지가 더 좋아 보입니다. 그러나 웹 페이지에서
절대 위치 지정을 너무 많이 사용하면 웹 페이지가 매우 느려지게 됩니다. 이 점에서 FIREFOX의 성능은 IE보다 더욱 나쁩니다.

예:

프로그램 코드




제안 해결 방법:
a. 값이 무엇인지 설명할 만한 좋은 값은 없습니다. 또한 절대 위치 지정 태그의 내용에 따라 다릅니다. 여기서는
을 이렇게 쓰면 성능 문제가 발생할 수 있으므로 아껴서 사용하세요.
b. 해결 방법으로 동일한 효과를 얻을 수 있으면 해결 방법을 사용하세요.

<style>li{ position:absolute;}</style> 
<ul> 
<li style="left:10px; top:20px">001</li> 
<li style="left:30px; top:70px">001</li> 
<li style="left:40px; top:50px">001</li> 
…… 
</ul>

4. 배경 배경 이미지 타일링

일부 웹페이지의 배경이나 페이지의 특정 부분의 배경은 일반적으로 타일링 후에 여러 개의 이미지가 타일링됩니다. 문제는 한 번이면 괜찮지만, 여러 번이면 소용없다는 점이다.

간단한 예:

예 1: 페이지를 스크롤하여 속도가 어떤지 확인하세요.


예 2: 같은 효과, 다시 시도해 보세요!

<div style="height:8000px; background:url(http://img.jb51.net/images/i2008962026.gif)"></div>

지침: 위의 두 가지 효과를 테스트해 보세요. 컴퓨터 상태가 좋지 않을수록 더 확실해집니다. 컴퓨터 구성이 매우 좋다면 8000px를 변경해 보세요. 9000000px로 해보세요. 그래도 안되면

더 크게 바꾸고, 걱정되더라도 혼내지 마세요!

권장 사례:

<div style="height:8000px; background:url(http://img.jb51.net/images/120089620424.gif)"></div>

a. 색상이 적은 이미지는 GIF 이미지로 만들어야 합니다.

b. 색상이 적은 GIF 이미지는 최대한 커야 합니다. 이미지는 더 커야 합니다. 위의 두 예는 매우
작고 두 번째 사진은 더 크지만 속도는 매우 다릅니다.
5. 가능한 한 많은 속성을 상속받도록 합니다.

부모를 덮어쓰는 대신 하위의 일부 속성을 부모를 상속하도록 합니다.

간단한 예:

<style> 
a:link,a:visited{color:#0000FF} 
a:hover,a:active{color:#FF0000} 
#jb51 a:link,#jb51 a:visited{ font-weight:bold} 
#jb51 a:hover,#jb51 a:active{ font-style: italic;} 
</style> 
<div><a href="#">test</a><div> 
<div id="jb51"><a href="#">jb51</a></div>

<style> 
a:link,a:visited{color:#0000FF} 
a:hover,a:active{color:#FF0000} 
#jb51 a:link,#jb51 a:visited{ font-weight:bold} 
#jb51 a:hover,#jb51 a:active{ font-style: italic;} 
</style> 
<div><a href="#">test</a><div> 
<div id="jb51"><a href="#">jb51</a></div>

实际上我是让jb51去继承我默认设置的属性，因为那些属性已经存在了。

另外再说几个不是特别重要的地方，平时注意一点就行了，没有上边这几个影响那么大：

6、CSS的路径别太深；
例如：

程序代码

#jb51 #info #tool #sidebar h2{ font-size:12px;}

7、能简写的一些就简写；
例如：

#jb51{pading-top:10px; padding-right:50px; padding-left:50px; padding-bottom:4px;}

改成：

#jb51{padding:10px 50px 4px 50px}

 
这个对渲染速度没有影响；只是少几个字符； 

8、别放空的的class或没有的class在HTML代码中； 

9、float 的应用 
这个东西我的感觉是如果使用不当，百分百有性能问题，而且还非常的大，但实在不知道怎么样能弄一个例子出来；这里只能建议大家如果不是很明白float是怎么工作的，还是少使用为妙。 

10、合理的布局 
为什么这么说呢，合理的布局，可以改变CSS的写法以及渲染过程。 

其实有些不能总结为CSS部分； 

 以上就是10条影响CSS渲染速度的写法与使用建议第1/3页_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！