1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

重视网站前端代码优化几个细则

本帖由 wfeng5202011-11-08 发布。版面名称:前端开发

  1. wfeng520

    wfeng520 New Member

    注册:
    2011-01-28
    帖子:
    790
    赞:
    0
    核心提示:历经2年的学习,我对网站优化总结了几点:网站结构优化,前端代码优化,网页设计优化,链接优化等四个方面。每个优化细节,都产生着交叉式的影响,而且对网站产生着不同的作用。然而前端代码是网站的基础语言,也是搜索引擎认知的语言,所以每个网站都要重视前端代码,
    历经2年的学习,我对网站优化总结了几点:网站结构优化,前端代码优化,网页设计优化,链接优化等四个方面。每个优化细节,都产生着交叉式的影响,而且对网站产生着不同的作用。然而前端代码是网站的基础语言,也是搜索引擎认知的语言,所以每个网站都要重视前端代码,今天分享一下,我是如何进行优化前端代码的。
    前端代码主要包括CSS语言和HTML语言。这里主要说一下CSS代码优化。
    Css代码优化对网站的好处是:
    (1)加快用户打开网站的速度,一般情况一下,用户打开网站超过8秒,用户就排除了这个网站。所以在优化代码的时候,代码简单是重要的一个方面。简单代码是网页的字节数减少了,减少了浏览器下载代码的时间。
    (2)网站改版css便于修改,标准的css让代码整齐,简单,不管是网站的改版,还是网站修改内容,都便于维护,省去大量的时间。
    代码优化细则:
    (1)CSS代码简写。这里说的简写主要解决的问题是,网站代码冗余,去除不必要的空格等等。如果可以用一句表达的语言,就不要多出几行代码,符合W3C标准。
    代码冗余
    例如:最长用的margin,属于多个属性简化为一条综合属性
    未优化前
    margin-left:2px;
    margin-right:4px;
    margin-top:8px;
    margin-bottom:6px;
    可以简写为
    margin:8px 4px 6px 2px;
    去除代码空格
    去除多余的空格键,可以有效减少网页的字节数
    例如:
    .a{
    Font-size:14px;
    Border:2px solid red;
    Padding:1px 2px;}
    可以简写为:
    .a{ Font-size:14px; Border:2px solid red; Padding:1px 2px;}
    (2)同属性提出
    如果2个样式带有同样的属性,可以把同属性单独提出处理。例如A样式和B样式的字体颜色、大小、边框都一样,那么就可以考虑提出。
    例如:
    .gongyong{font-size:12px;border:1px solid red}
    .yangshi{ width:10px;}
    .yangshi2{width:20px;}
    (3)结构清晰优化
    网站代码清晰是指,把代码分区处理:网站头部、网站身体,网站底部,3个区域进行不同的布局。不同区间的代码要区别总的选择器,选择不同颜色加以区分隔开处理。
    总结:网站的前端代码,搜索引擎重视评估程度为20%。代码简化,爬行的目录层次浅,这样加强了搜索引擎对代码的友好程度,进而提高网站的权重,关键词才会有良好的排名。如果代码冗余,烦琐,搜索引擎也就关注的少了。

    本文由 无忧系统专家思科论坛http://www.net527.cnlinux 论坛转载
     
  2. gotoqian

    gotoqian New Member

    注册:
    2011-08-14
    帖子:
    1,236
    赞:
    0
    不错,学习中!
     
  3. aboycdefg

    aboycdefg New Member

    注册:
    2011-08-05
    帖子:
    396
    赞:
    0
    谢谢楼主分享,收藏备用了!
    顶起
     
  4. 嘟猫猫

    嘟猫猫 New Member

    注册:
    2011-11-04
    帖子:
    107
    赞:
    0
    不错啊,楼主,学习了,!