代码优化终极课：代码优化实战演习

终极课 代码优化实战演 习 首先在做网站代码优化 要已经做过域名分析 空间分析 搜首先在做网站代码优化 要已经做过域名分析 空间分析 搜 索引擎分析 竞争对手分析 关键词分析 在全部进行数据分索引擎分析 竞争对手分析 关键词分析 在全部进行数据分 析的的基础上进行的代码优化 一定要做到 知己知彼百战不析的的基础上进行的代码优化 一定要做到 知己知彼百战不 殆 殆 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 这不仅仅因为它是缓慢和低效率的方法 而且还会导致一些不必要的元素也重置了外边距 和内边距 在此建议参考 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 但有没有想过这样的代 码同样是很有问题的 My name is Wiky 问题在于如果你需要把所有原本红色的字体改成蓝色 那修改后就样式就会变成 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 4em Arial Helvetica sans serif padding 5px 0 10px 5px 4 利用利用 CSS 继承继承 如果页面中父元素的多个子元素使用相同的样式 那最好把他们相同的样式定义在其父元 素上 让它们继承这些 CSS 样式 这样你可以很好的维护你的代码 并且还可以减少代码 量 那么本来这样的代码 container li font family Georgia serif container p font family Georgia serif container h1 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 进行压缩 出去注释和空格 以 使得网页加载得更快 压缩您的代码 可以采用一些工具 如 YUI Compressor 利用它可 精简 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 代码 比如说百度的留言本 百度 那个做竞价 他一般都建议你添加留言本 留言本的确有好处 能够留住一些客户的那个 留言本还有一个坏处是 增加了这个页面的下载时间 其 实对于百度来说和谷歌来说 都是不利的 8 JS 统计代码统计代码 不建议大家放 JS 统计代码放很多 一般来说假面建议大家做 CNCC 为什么 因为它的速度比较快 放一个就行了 这些都是影响页面的优化的 当然 现在也可以尝试放入百度统计 效果也是不错的喔 9 页面大小 页面大小 页面大小建议是在 100KB 以内 越精简是越有利 文字要丰富一点 有文字有图片 经验总结 经验总结 搜索引擎比你聪明搜索引擎比你聪明 一一 思想决定行为 行为决定习惯 习惯决定命运 思想决定行为 行为决定习惯 习惯决定命运 这句话同样 适合 SEOer 做 SEO 的并不是每天盯着网站的每个细节无休止的修改 那样会让你一直是 挖东墙补西墙 的状态 相反 我们需要站在一个思想高度 给网站来一个全盘诊断 然 后制定一个合理的计划 并且把 SEO 思想灌输给团队的每一个成员 每个人都是 SEOer 每个人都能做 SEOer 日常工作 有一个良好的习惯 这样网站的 命运 就能很好的把握了 二二 网站内部结构至关重要 网站内部结构至关重要 SEOer 都知道 做 SEO 简单的说 就是内敛 外链 由于百度算法在不断调整 靠发帖子 发博客来增加外链的方法越来越不好使了 对新站长来说 找外链真是 苦差事 即使你低声下气的去主动找别人换链接 也未必会 收到相应的 回报 而网站内部结构则是自己所能掌控的部分 并且内部结构比外链更加 的重要 从建站之初的网站目录结构策划 到每一个频道 每一个栏目的路径和页面地址 都需要精心策划 比如 网站目录不要超三级 频道页尽量使用简单易记的拼音字母 像 http www tv fuzhuangzhan 这样 汉语拼音的形式更容易被用户记住 重要的内容要 放在网站醒目的位置 能让用户快速到达 符合用户的右手习惯 尽量把重要的按钮 功 能放到网站的右侧等等 三三 SEO 的本质是锚文本 的本质是锚文本 网站内部结构做好后 接下来的任务就是网站的 日常更新了 我们做网站优化