CSS 렌더링 속도에 영향을 미치는 10가지 작성 및 사용 제안 페이지 1/3_Experience Exchange
- PHP中文网원래의
- 2016-05-16 12:04:531367검색
저는 최근에 CSS를 거의 작성하지 않고 앞으로는 덜 작성할 수도 있습니다. 그래서 여러분에게 도움이 되기를 바라면서 제 경험을 공유하고 싶습니다!
이 글은 클라이언트 브라우저에서 웹 페이지의 렌더링 속도를 향상시키는 CSS 부분에 대해 주로 작성했으며, 10가지 항목을 임시로 요약했습니다.
1. *{} #jb51 *{} 피하세요
브라우저마다 HTML 태그에 대한 해석이 다르기 때문에 최종 웹 페이지 효과는 브라우저마다 다를 수 있습니다. 이러한 위험을 제거하기 위해 디자이너는 일반적으로 CSS 시작 부분에서 모든 태그의 모든 기본 속성을 제거하여 모든 태그에 대해 균일한 속성 값의 효과를 얻습니다. 따라서 * 와일드카드가 있습니다. * 모든 태그를 순회합니다.
*{margin:0; padding:0}
#jb51 *{margin:0; padding:0}문제는 다음과 같습니다. 다음과 같이 작성합니다:
a .Traversal은 많은 시간을 소비합니다. HTML 코드가 표준화된 방식으로 작성되지 않았거나 특정 태그가 반드시 일치하지 않는 경우 이 시간은 더 길어질 수 있습니다.
b. 많은 태그에는 이 속성이나 속성이 자체적으로 통합되어 있으므로 다시 설정하는 데 시간이 걸립니다.
권장 해결 방법:
이러한 태그는 사용하지 마세요. 다른 브라우저에서 자주 사용됩니다. 해석의 효과는 다르기 때문에 가능한 한 많이 사용하는 태그를 사용해야 합니다.
b. 대신에 일반적으로 사용하는 태그를 처리하세요. , li, p, h1 {margin:0; padding:0}
2. 일부 필터를 사용하지 마세요
IE의 일부 필터는 FIREFOX에서 지원되지 않습니다. 일부 효과를 작성할 때, 필터는 리소스가 매우 부족합니다. 특히 일부 페더링, 그림자 및 전면 투명 효과는 다음과 같습니다.
추천 해결 방법:
a. 사용할 수 없다면 사용하지 마세요. 한편으로는 IE에서만 사용할 수 있는 효과가 많습니다. 🎜>b. 이런 경우에는 최상의 효과를 위해 사진을 배경으로 사용하는 것이 좋습니다. (속도 최적화에 대해서만 이야기하고 있습니다. 실제 응용 프로그램에서는 계속 사용할 수 있습니다. 작은 부분들. 어떤 사람들은 사진을 사용하려면
<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）！