《网页代码优化》PPT课件.ppt

第七章 网页代码优化,7.1 代码优化简介,代码优化是页面优化的重要环节，是页面优化的基础。代码优化就是对网页中的HTML源代码进行必要的调整，以提高页面的友好性。页面经过代码优化后：一方面可以有效地精简页面中的冗余代码，加快网页显示速度，减少网页占用搜索引擎服务器的存储空间，提高用户体验和搜索引擎友好性；另一方面，可以有效地突出页面的主题，提高页面的相关性。主要包括：精简代码、头部优化、权重标签使用、图片优化。,7.2 精简代码,精简代码是指清除或者简化页面中的代码，从而达到降低页面体积、提高页面的用户体验及搜索引擎友好性的目的。页面代码的精简包括五大环节：清理垃圾代码、HTML标签转换、CSS优化、JS优化及表格优化。其中，清理垃圾代码是最重要、最基础的,7.2.1 清理垃圾代码,清理垃圾代码就是指删除页面中的冗余代码。一个页面经过处理后，可以删除降级80%的冗余代码。垃圾代码是指那些在删除的情况下也不会影响页面正常显示的非必要代码。这些代码占据着庞大的空间，不但耗费用户下载页面的时间，还占用着搜索引擎巨大的存储空间及数据分析时间。,垃圾代码的产生,一般情况下，我们会使用网页制作软件制作网页，例如：Frontpage、word和Dreamweaver。除了站大部分的必须代码以外，还有一小部分可有可无的垃圾代码。用不同的工具制作的网页，生成的垃圾代码也不一样，其中word生成的最多，而Dreamweaver代码最为精简。完全避免生成垃圾代码的方法，就是通过手工编写代码。在掌握这种方法之前，最好的方式是用Dreamweaver编写，然后手工清理。,垃圾代码的清理,网页制作软件产生的常见垃圾代码包括：空格、默认属性、注释语句、以及空语句。空格：空格字符是网页中最常见的垃圾代码。这里的空格指的是在代码环境下敲击键盘空格键产生的符号，并非HTML语言中的“”，网页中的每个空格都是一个字符；初步统计，空格字符约占页面总体积的1.5%；空格字符通常会出现在每行代码的开始和结束处，还有就是空行中网页制作时，网页制作软件生成代码时，默认产生的缩进字符；空白行：编写代码时，常利用空行或者注释对不同功能模块进行分割产生的；每行代码结束处的空格字符：是在编辑HTML代码时不小心加上去的,;,Dreamweaver中空格字符的删除,对于每行代码开始前的空格字符转至HTML代码编辑模式；按Ctrl+A选择全部代码；使用组合键Shift+Tab，直至删除所有空格为止。对于空行中的空格字符，只能手动清理。对于每行代码结尾处的空格字符用鼠标选择“”+“一个空格字符”，再按Ctrl+F，弹出查找和替换窗口；在替换处填上“”，再点击“替换全部”即可,默认属性,在利用网页软件制作网页时，通常会产生一些默认属性的代码。这些属性是可以删除的，而且并不会影响页面效果。例如：align=“left”，横向左对齐属性，默认情况下就是左对齐valign=“middle”size=“3”：文字大小属性，默认情况下就是3号字体；target=“_self”：新页面打开属性值，默认情况下就是在当前窗口中打开,注释语句,注释语句是用于对代码功能或作用进行说明的语句，其中的内容对于普通用户来说是不可见的，即在页面中不显示注释标签里的内容。制作网页时，我们或多或少会添加注释语句以增强代码的可读性，但是，过多的注释会占用大量的空间。如果在里面添加大量的关键词，还会被搜索引擎认为是堆砌关键字，从而受到惩罚。在添加注释语句是，要坚守一个原则：绝不添加哪些即使删除后也不会影响网页源代码可读性的注释语句。,空语句,简单的说，空语句就是指标签间不存在任何内容的语句。例如：就是一个典型的空语句。空语句的清理主要是针对即使删除后也不会影响页面正常现实的标签。在Dreamweaver中可以通过命令菜单中的清理HTML命令来实现。代码清理软件：advanced HTML optimizer。但它会删除所有的换行，从而严重影响代码的可读性。,