代码优化终极课代码优化实战演习.doc

上传人:b****1 文档编号:233734 上传时间:2022-10-07 格式:DOC 页数:8 大小:90KB
下载 相关 举报
代码优化终极课代码优化实战演习.doc_第1页
第1页 / 共8页
代码优化终极课代码优化实战演习.doc_第2页
第2页 / 共8页
代码优化终极课代码优化实战演习.doc_第3页
第3页 / 共8页
代码优化终极课代码优化实战演习.doc_第4页
第4页 / 共8页
代码优化终极课代码优化实战演习.doc_第5页
第5页 / 共8页
点击查看更多>>
下载资源
资源描述

代码优化终极课代码优化实战演习.doc

《代码优化终极课代码优化实战演习.doc》由会员分享,可在线阅读,更多相关《代码优化终极课代码优化实战演习.doc(8页珍藏版)》请在冰豆网上搜索。

代码优化终极课代码优化实战演习.doc

终极课:

代码优化实战演习

首先在做网站代码优化,要已经做过域名分析,空间分析,搜索引擎分析,竞争对手分析,关键词分析,在全部进行数据分析的的基础上进行的代码优化,一定要做到:

知己知彼百战不殆!

1.清除垃圾代码(代码优化):

1.空格字符是网页中最常见的垃圾代码,空格常常出现在每行代码的开始和结束,还有就是空行

  

(1)每行代码开始处出现的空格字符

  

(2)每行代码结束处的空格字符

  (3)空白行,在编写代码时常利⺌用空行或者注释对不同的模板功能进行分隔这样就产生了空白行

  清楚空白行可以有以下的方法:

  

(1)把代码转至html代码编辑模式

  

(2)按ctrl+A全选代码

  (3)使用组合键shift+Tab删除

2.默认属性

  例如网页中的内容常以左对齐显示,所以此时再用左对齐属性有些多余了

  常见的默认属性有以下几个:

  align="left"横向左对齐valign="middle"竖向居中对齐size="3"文字大小属性值默认情况下是3号

  bgcolor="#ffffff"背⺌景默认属性为白色

  对于这些代码,可以利⺌用Dreamwea⺌ver的替换功能把他们替换成空白就可以了

3.注释语句

  过多的注释语句不仅会占用大量的网页存储空间,而且还会稀释关键字的密度

4.长标签替换成短标签

  比如,都是对字体加粗,起到的作用是一样的,但是多5个字符

  网页中多种不同的标签可以实现同样的效果但是为了网页的精简可以才要短标签,网页中常见的有以下几种

  加粗对应

  斜体对应

  删除线对应

  缩进

对应

    2.Css等脚本优化(脚本优化):

    CSS学起来并不难,但在大型项目中,一个团队中不同的人在书写CSS风格上也有不同这样这个项目就变得难以管理,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:

    步骤/方法

    1.使用Reset但并非全局Reset

    不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。

    但需要注意的是,请不要使用全局Reset:

    *{margin:

    0;padding:

    0;}

    这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。

    在此建议参考YUIReset和EricMeyer的做法。

    /**清除内外边距**/

    body,h1,h2,h3,h4,h5,h6,hr,p,

    blockquote,/*structuralelements结构元素*/

    dl,dt,dd,ul,ol,li,/*listelements列表元素*/

    pre,/*textformattingelements文本格式元素*/

    form,fieldset,legend,button,input,textarea,/*formelements表单元素*/

    th,td,/*tableelements表格元素*/

    img/*imgelements图片元素*/{

    border:

    mediumnone;

    margin:

    0;

    padding:

    0;

    }

    /**设置默认字体**/

    body,button,input,select,textarea{

    font:

    12px/1.5‘宋体’,tahoma,Srial,helvetica,sans-serif;}

    h1,h2,h3,h4,h5,h6{font-size:

    100%;}

    em{font-style:

    normal;}

    /**重置列表元素**/

    ul,ol{list-style:

    none;}

    /**重置超链接元素**/

    a{text-decoration:

    none;color:

    #333;}

    a:

    hover{text-decoration:

    underline;color:

    #F40;}

    /**重置图片元素**/

    img{border:

    0px;}

    /**重置表格元素**/

    table{border-collapse:

    collapse;border-spacing:

    0;}

    2.良好的命名习惯

    无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。

    比如下面这样的代码:

    .aaabb{margin:

    2px;color:

    red;}

    我想即使是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:

    MynameisWiky

    问题在于如果你需要把所有原本红色的字体改成蓝色,那修改后就样式就会变成:

    red{color:

    bule;}

    这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。

    所以,请不要使用元素的特性(颜色,位置,大小等)来命名一个class或id,您可以选择意义的命名如:

    #navigation{…},.sidebar{…},.postwrap{…}

    这样,无论你如何修改定义这些class或id的样式,都不影响它跟HTML元素间的联系。

    另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚刚说的那种情况,如:

    .alignleft{float:

    left;margin-right:

    20px;}

    .alignright{float:

    right;text-align:

    right;margin-left:

    20px;}

    .clear{clear:

    both;text-indent:

    -9999px;}

    如果需要把这个段落由原先的左对齐修改为右对齐,那么只需要修改它的className就为alignright就可以了。

    3.代码缩写

    CSS代码缩写可以提高你写代码的速度,精简你的代码量。

    在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您学会了代码缩写,原本这样的代码:

    li{

    font:

    1.2em/1.4emArial,Helvetica,sans-serif;

    padding:

    5px010px5px;

    }

    4.利用CSS继承

    如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。

    这样你可以很好的维护你的代码,并且还可以减少代码量。

    那么本来这样的代码:

    #containerli{font-family:

    Georgia,serif;}

    #containerp{font-family:

    Georgia,serif;}

    #containerh1{font-family:

    Georgia,serif;}

    可以写成:

    #container{font-family:

    Georgia,serif;}

    5.使用多重选择器

    你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。

    这样做不但代码简洁且可为你节省时间和空间。

    如:

    h1,h2,h3{font-family:

    Arial,Helvetica,sans-serif;font-weight:

    normal;}

    6.适当的代码注释

    代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。

    7.保持CSS的可读性

    书写可读的CSS将会使得更容易查找和修改样式。

    对于以下两种情况,哪种可读性更高,我想不言而明。

    8.使用外部样式表

    这个原则始终是一个很好的设计实践。

    不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。

    内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。

    9.避免使用CSS表达式(Expression)

    表达式的问题就在于它的计算频率要比我们想象的多。

    不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。

    给CSS表达式增加一个计数器可以跟踪表达式的计算频率。

    在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

    代码压缩

    当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。

    压缩您的代码,可以采用一些工具,如YUICompressor,利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。

    3.SEO站内优化(整站优化):

      一、代码及标签优化

      代码和标签的优化,主要从以下几个方面进行:

      1、网站代码精简和CSS&JS

      2、网站标题标签(titile)设置合理化

      3、网站关键词(keywords)设置合理化

      4、网站描述(Description)设置合理化

      5、网站H1/H2标签的合理优化

      6、网站METE标签的合理优化

      二、网站URL优化

      1、网站页面的静态化处理(生成html)

      2、网站扁平化层级结构

      3、网站SEO定制文件名

      4、网站导航的面包屑处理

      三、网站内容优化

      1、网站内容的原创性

      2、网站内容的更新频率

      3、网站数据库的总体数据量

    不利于搜索引擎排名优化的因素:

    1、JS代码

      JS代码,建议尽量少用这种动态,会增加网页加载时间。

    2、会隐藏的滑动条

      还有一个就是常见的会隐藏的滑动条,我们不建议使用的。

    除非是你的网站实在要实现某一些功能才迫不得已。

    一般情况下是不建议大家使用的。

    是不利于优化的。

    滑动条的影响不大,但是会减分的。

    比如说100分,你做一个滑动条减了你2分。

    对不对?

    表面上是影响不大,但是对于整个关键词排名来说,它是有影响的。

    比如,你本来能排第一的,你排第二。

    3、Flash代码

      Flash代码,尽量的少。

    另外不建议你在网站里做一个页面里面做过多的Flash。

    你做一个就OK了,一个首页做一个就OK了。

    不要所有的频道页都做。

    这是不合理的。

    特别是很多企业站。

    4、隐藏代码

      不要含有隐藏代码。

    常见的隐藏代码,像很多地方的新闻门户啊,就是那种带链接的网站,一般都有。

    一般都有那种就是滑动门。

    像那种出售友情链接站,把它隐藏起来,点一下它才出来的那种,其实应该是做了一个CSS隐藏的东西。

    这个,所有的动态都不建议做。

    5、弹窗代码

      最好在你的网站里面不要做前弹和后弹代码。

    这些都是会被减分的。

    当然了,这些不会有致命的危险。

    但是它会减分。

    前弹就是打开一个网站它会弹出一个网页,就是弹窗。

    后弹就是我们关闭一个网页,它就弹出一个网页。

    你关闭了,它弹出一个。

    这两个都是影响的。

    6、覆盖代码

      覆盖代码。

    这个也很危险。

    就是你在百度上搜索一个词,你点开一个网页的时候弹出了一个新窗口。

    同时你那个百度的窗口就变成了一个广告页。

    他就覆盖了原来搜索引擎的搜索引擎页面,这叫做覆盖。

    大家明白了吗?

    这种覆盖是比较致命的。

    7、JS留言本

      不要过多地使用JS代码,比如说百度的留言本。

    百度,那个做竞价,他一般都建议你添加留言本。

    留言本的确有好处,能够留住一些客户的那个。

展开阅读全文
相关搜索
资源标签

当前位置:首页 > 高等教育 > 医学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1