CSS渲染速度改善的十个方法与建议

2020-05-11 07:50:31易采站长站整理

  例如:
  <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>
  建议的解决办法:
  尽可能少用,这个少用的值是多少,也没有一个非常好的值来说明;还要看绝定定位这个标签里边的内容的多少;在这里我只能说,这样写会有性能问题,少用。
  如果能用变通实现同样的效果,就用变通的办法

  四、background 背景图片的平铺
  有些网页的背景或页面中某块的背景通常要用到图片的平铺,平铺后就会有平铺次数的问题,如果是单次还好,如果是多次,就废了。
  举个简单的例子:

  例一:滚动一下你的页面,看速度怎么样?
  <div style="height:8000px; background:url(https://www.jb51.net/uploads/userup/0902/251AH4SJ.gif)"></div>
  例二:同样效果,再试一下这个!
  <div style="height:8000px; background:url(http://huoche.7234.cn/images/jb51/manilwxp3bg.gif)"></div>
  说明:测试上边的两个效果,你的电脑越差越明显,如果你的电脑配置非常好,你就把上的8000px改成9000000px试一下,如果还不行,就改的更大一些,整死机别骂我!
  建议的作法:
  色彩少的图片要作成gif图片;
  平铺的图片尽可能大一些,如果是色彩少的GIF图片,图片大一些,实际大小也不会大多少;上边的两个例子就很好的证明,第一个图片非常少,第二个图大较大一些;但速度是非常不一样的;

  五、让属性尽可能多的去继承
  尽可能让一些属性子可以继承父,而不是覆盖父;
  简单的一个例子:
  <style>
  a:link,a:visited{color:#0000FF}
  a:hover,a:active{color:#FF0000}
  #zishu a:link,#zishu a:visited{ font-weight:bold}
  #zishu a:hover,#zishu a:active{ font-style: italic;}
  </style>
  <div><a href="#">test</a><div>
  <div id="zishu"><a href="https://www.jb51.net/">jb51.net</a></div>
  <style>
  a:link,a:visited{color:#0000FF}
  a:hover,a:active{color:#FF0000}
  #zishu a:link,#zishu a:visited{ font-weight:bold}
  #zishu a:hover,#zishu a:active{ font-style: italic;}
  </style>
  <div><a href="#">test</a><div>
  <div id="zishu"><a href="https://www.jb51.net/">jb51.net</a></div>
  六、CSS的路径别太深: