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

终极课：代码优化实战演习 首先在做网站代码优化，要已经做过域名分析，空间分析，搜索引擎分析，竞争对手分析，关键词分析，在全部进行数据分析的的基础上进行的代码优化，一定要做到：知己知彼百战不殆！ 1.清除垃圾代码（代码优化）： 空格字符是网页中最常见的垃圾代码，空格常常出现在每行代码的开始和结束，还有就是空行　　(1)每行代码开始处出现的空格字符　　(2)每行代码结束处的空格字符　　(3)空白行，在编写代码时常利?用空行或者注释对不同的模板功能进行分隔这样就产生了空白行　　清楚空白行可以有以下的方法：　　(1)把代码转至html代码编辑模式　　(2)按 ctrl+A全选代码　　(3)使用组合键shift+Tab 删除 默认属性　　例如网页中的内容常以左对齐显示，所以此时再用 左对齐属性有些多余了　　常见的默认属性有以下几个：　　align=left 横向左对齐 valign=middle竖向居中对齐 size=3 文字大小属性值 默认情况下是3号　　bgcolor=#ffffff 背?景默认属性为白色　　对于这些代码，可以利?用Dreamwea?ver 的替换功能把他们替换成 空白就可以了 注释语句　　过多的注释语句不仅会占用大量的网页存储空间，而且还会稀释关键字的密度 长标签替换成短标签　　比如，b和strong都是对字体加粗，起到的作用是一样的，但是strong比b多5个字符　　网页中多种不同的标签可以实现同样的效果但是为了网页的精简可以才要短标签，网页中常见的有以下几种　　加粗 strong 对应b　　斜体 em 对应i　　删除线 strike 对应s　　缩进 blockquote对应 ul 2.Css等脚本优化（脚本优化）： CSS学起来并不难，但在大型项目中，一个团队中不同的人在书写CSS风格上也有不同这样这个项目就变得难以管理，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则： 步骤/方法 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset： *{margin:0;padding:0;} 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。 /** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td, /* table elements 表格元素 */ img/* img elements 图片元素 */{ border:medium none; 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，但有没有想过这样的代码同样是很有问题的： h1My name is span class=”re