日期:2014-05-17  浏览次数:20518 次

精简DIV+CSS代码量以提高网站速度的技巧
由于最近在做DIV+CSS样式的网页布局,实践过程中在尝试不同的方法来精简代码,这样不仅方便了编写中代码过长的麻烦,重要的是可以极限的提高网站访问速度。现在总结几点个人建议,希望有相同爱好的朋友前来交流学习!

  1、建议将一个页面中所有的CSS样式单独放在一个外部文件中,在使用的时候通过link方式导入样式,这样可以大大减少嵌套在网页中的代码。

  <link rel="stylesheet" type="text/css" href="http://blog.soso.com/qz.q/url" />

  2、多采用组合或者父级继承样式控制,在div中尽量使用不同标签来控制网页表现形式,比如一个div中需要有3个不同颜色的文字,这样做同样可以减少不少的class和id。(此方法不用class和id来引用)

  <div>

  此处文字为红色

  <span>此处文字为绿色</span>

  <font>此处文字为蓝色</font>

  </div>

  css样式可以这样写:

  div { color: #FF0000;}

  div span { color: #00FF00;}

  div font { color: #0000FF;}

  3、尽可能的去使用全局样式,比如代码中有<div>或<li>标记,那就在CSS样式中直接定义div或li的样式,如 div{·····}或li{·····},不要再给标签加上class或者id来引用样式。这样可以省略class和id的引用,可以明显减少代码量,更减轻少了浏览器翻译网页所需时间。

  4、如果思维足够清晰,可以尝试拼装式来定义CSS样式,即:将页面中出现频率最多的一些CSS样式写在一起,在引用时可以多次引用不同的样式来实现我们想要的结果。如我们需要一个实线的边框,并且它的颜色是红色的,我们可以这么做:

  css部分:

  .border_style{border-style:solid;}

  .border_color{border-color:#FF0000;}

  div部分:

  <div class="border_style border_color">这个层的边框是红色的实线</div>