源码优化-课件

1、源码优化源码优化目录1代码精简与排序2头部标签优化3body内标签优化4一些不建议使用的代码5实践：对某一网站首页进行页面优化2目录1代码精简与排序2头部标签优化3body内标签优化4一些1 代码精简尽量精简网页中的代码，能够突出网页的主题，减少服务器的负载，增快网站的打开速度。代码精简一般重点在以下几个方面：1.div结构调整2.css精简3.js精简4.垃圾代码处理思路31 代码精简尽量精简网页中的代码，能够突出网页的主题，减少服结构精简table转化divjinhuifeng/全部用table布局，对网页的加载和代码的精简都有不好的影响4结构精简table转化divjinhuifeng/

2、4结构精简table转化divjinhuifeng/全部用table布局，对网页的加载和代码的精简都有不好的影响5结构精简table转化divjinhuifeng/5哪些页面不适合div精简代码:大家都说DIV的布局精简代码，但是用DIV替代TABLE所节约的代码又被CSS(样式)所占用，而这些样式大多用于控制DIV的排版布局。那你会说了，CSS可以放在外部重用啊，要想得到这个问题的答案请往下看。哪些页面不适合div哪些页面不适合div重用性与下载量:统一使用一个.css的样式表文件，可以实现修改一次，全站修改的效果，这样使得维护的成本更低。但是请大家换一个角度想，如果所有页面在加载时都要访问

3、一个文件，那这个文件每天的下载量，特别时在搜狐、新浪的网站平台上将达到几亿次，这就需要后面有很多台前端web服务器在做支撑，那后台的成本无形中也提高了很多。如果后台支撑没有做好，那么页面就会出现花屏，之前所作的工作也是白费。很多人会问，这样的几率太小了。我们所作的工作就是为了避免这一两次意外的发生，如果意外发生了，对于门户后果将是不堪设想的。哪些页面不适合div哪些页面不适合divHTTP通讯:统一的样式表文件采用外部调用的形式，这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应，这样对前端web服务器会是很大的消耗。而原来很长时间都是将css和js写在页面前端(大家可

4、以看看和sina的页面，大多都是采用这样的形式)，而不是作为外部调用的形式，也是为了尽量避免给服务器增加消耗。哪些页面不适合div哪些页面不适合div页面缓存:每次用户访问的页面，都会在浏览器缓存中保存一定时间，以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载，对于每个外部导入的样式文件也是如此，如果CSS文件修改，那么访问网站的每一个页面都会重新下载，而以往的将样式写在页面中的方式，只是修改的页面需要重新下载。哪些页面不适合div哪些页面不适合div兼容性:对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好，比如IE5以前的浏览器对于CSS的支持就不

5、是很好。而现在使用IE5以前版本浏览器的用户不在少数，这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试，以保证兼容性，无形中也增加很多工作量(至少我接触的开发人员制作div页面比table页面的标准时间要长一些)。哪些页面不适合div哪些页面不适合div横切与延展性:横切传统的布局方式为了使页面下载的更快，把页面自上而下分成若干个块，但是往往采用DIV进行布局的页面都会出现这样的情况，由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应，而出现留白。相比之下传统的table方式更容易规避这样情况的发生。哪些页面不适合divCSS精简1.改内部样式为外部样式表2.合并不必要

6、的样式类3.合并相关样式表4.统一，简化css样式12CSS精简1.改内部样式为外部样式表12CSS代码精简工具介绍 CleanCSS 是一个免费的CSS 精简压缩工具，通过这个在线工具，可以将你的CSS文件压缩、优化成更精简，这将大大提高你的网站的载入速度。进入CleanCSS后, 你可以输入要压缩的CSS代码或是该CSS文件的所在URL地址, 然后选择代码布局和相应的精简压缩选项, 最后点击生成即可. more CSS压缩与优化工具 是一个中文版的CSS代码精简工具. 进入CSS压缩与优化工具之后，选择简体或繁体中文选项，然后其他的操作就比较简单了。您可以将CSS代码贴入文本框或者输入您网

7、站或博客的CSS文件地址，如果您不懂CSS相关 知识，那么选择默认设置即可；而懂得CSS相关的朋友则可以进行其他相关设置。除此之外，如果您希望导出经过“减肥”的CSS文件，则需要选择最后一个“ 导出优化后的CSS ”选项。via chadaCSS代码精简工具介绍CSS精简思路1,css的定义名，尽可能的不超过4个字母： 其实4个字母已经可以满足各种名称的千变万化了。这个是我在9rules和一些设计师讨论得出的结论，我们一直在致力于最高效执行的css编写方式，首个字母可以代表一类比较明了的意思，下面的注释/*xxx*/纯粹为了解释，真的写网页的时候千万不要这么废话哦，比如：一个背景颜色color

8、定义，我常常写为.cwbackground:#fff /*白色white背景，这个相信最常用，我常常独立写出来，需要时就用*/ .chu1background:#333/*灰色hui背景，按照DW的色谱从深到浅按1n数字排列，作为中国人hui这个拼音自己好懂*/.chu3background:#666我在所有的单独颜色css定义都使用c打头，就是为了方便统一查看，这类定义经常可以使用在class=w100 cw这样的灵活组合编写方式中，其实这类定义我都喜欢在css表里写在一个区里，比如/*颜色*/.cwbackground:#fff .chu1background:#333 .chu3back

9、ground:#666/*字体颜色*/.zcwcolor:#fff .zch1color:#333 .zch2color:#666CSS精简思路CSS精简思路2，利用好总集定义（常用的东东一起）和组合定义方式！这个是重点： 很多的常用标签 和使用的属性的定义比如整个网站的最基本字体颜色，大小，连接字体的属性等等，我们经常重复使用的，最好能在前面一起定义完，比如： html,body,table,td,afont-size:12px;color:#333;font-family:宋体, Arial, Helvetica, sans-serif;letter-spacing:normala:hov

10、ercolor:#cc000e /*注意不同的定义名用,分隔这样以后除了特殊要求，基本不用再重复定义字体的这些属性，table和td之所以在这里强调是因为表格标签经常不能继承css属性，写多几个词以后会少很多奇怪的问题，a:hover会继承a的其他定义，无需啰嗦*/顺便写点其他总集定义：* margin:0;padding:0;border:0 /*这个定义所有的页面元素，非常狠不过写了网页很“稳当”以后稀奇古怪的小问题比如这个撑开点，那个框框不靠边等等麻烦事就少，放在css最顶部，以后特殊定义写在后面就可以优先执行*/bodybackground:#fff;text-align:center

11、;word-break:break-all /*白色body是最常用的，后面这个定义配合容器使用margin:0 auto 布局居中必备*/tableborder-collapse:collapse /*表格无边框线*/CSS精简思路CSS精简思路3，一个标签下的同类标签重复定义的精炼表达方式：我们经常看到这样的写法，代码冗长而效率低下： #t .tawidth:200px;text-align:left .tbwidth:250px;background:#ccc .hahawidth:50px;float:left .kkcolor:#198080.kk2color:#ff0000列a_1

12、列a_2列a_3列b_1列b_2列b_3行a1行a2红色字体行a3CSS精简思路3，一个标签下的同类标签重复定义的精炼表达方式CSS精简思路#t #t ulwidth:200px;text-align:left #t liwidth:50px;float:left .tb pcolor:#198080.tbwidth:250px;background:#ccc /*tb写在后面，虽然重复了width，但后面的优先执行，前面的ul宽度定义无效！这样正好合服我们的意图*/.kk2color:#ff0000 /*和上面同理*/列a_1列a_2列a_3列b_1列b_2列b_3行a1行a2红色字体行a3

13、CSS精简思路CSS精简思路4，活用传统html标签：很多人用了css制作网页以后，以为以前的传统htm标签没用了，其实传统标签在一些细节表达上比全部用css定义的标签来得简炼，我在这里下载的chinaren模板里，经常看到 哈哈哈这样的css定义过的标签来加粗字体，其实，你只要用标签就可以实现同样的效果如 哈哈哈这类传统标签有其默认的独特含义，很多属性无需专门定义，节省了页面代码同时也减少了css表的代码。CSS精简思路4，活用传统html标签：很多人用了css制作CSS精简1.改内部样式为外部样式表2.合并不必要的样式类3.合并相关样式表4.统一，简化css样式19CSS精简1.改内部样式

14、为外部样式表19html精简由css类属性替代不具有实际意义的标签：比如：strong，b，等。20html精简由css类属性替代不具有实际意义的标签：比如：shtml精简教程HTML 4HTML （非XHTML），MIME type 为 text/html ，允许省略一些标签。通过 HTML 4 DTD，你可以省略以下标签（那些所谓可避免的元素，这里用删除线加以标记）21html精简教程HTML 421html精简教程HTML-Optimizer HTML-Optimizer 是一套专门替 HTML减肥的工具，借着去除各种浏览器会直接跳过的注解、空白、换行符号等字符，让你的网页功能不变，大小

15、减半22html精简教程HTML-Optimizer 22js排序尽量将js代码放置在网页的最后。23js排序尽量将js代码放置在网页的最后。232 头部标签优化概述 头标签即内的所有标签。其中有以下几个标签需要重点优化三个关键词titledescrptionkeyword标题描述关键字242 头部标签优化概述 头标签即/headtitle1.title的唯一性：任何一个网页页都应该有一个唯一的title。该标题应该是这个网页的核心内容。title关键词是经过一变二的，很多新手站长都犯的错误，就是贸然的进入一个领域，跳过关键词研究，title是凭感觉写出来的，并没有去利用工具去分析，后来tit

16、ile关键词排名是上去了，但就是没流量。25title1.title的唯一性：任何一个网页页都应该有一个title26title26title2.title的长度：标题的长度建议在25-30个汉字之间。大家都知道百度收索结果能显示30个汉字，那么我们就应该把title长度控制在30以内，很多人都去仿一些比较成功的网站title，笔者认为是不可行的，应该要以自己的实际情况为主，因为大部分比较成功的网站已经不是从SEO的角度来写网站title。太短无法清楚的表达页面内容，太长则搜索引擎的返回结果不全，同时也不利于用户体验。27title2.title的长度：标题的长度建议在25-30个title2

17、8title28title3.关键字分布：标题中应涵盖该网页内容的关键字。但是要注意1，符合用户的阅读习惯，不要生硬的堆砌关键字。关键词不要堆积“返利网可信吗,返利网是真的吗,返利网怎么样,如何返利,商城返利,天猫返利,我要返利,淘宝返利网,返利网不谬返利,返利网登陆-返利宝” 这应该是一个典型的关键词堆积，我的建议是如果是没有品牌力的网站(比如凡客诚品、卓越等);最好把关键词确定在一到两个左右为宜。29title3.关键字分布：标题中应涵盖该网页内容的关键字。2title30title30title4.标题要有一定的吸引力，吸引更多的用户感兴趣并点击。排名再好的页面没有人愿意点击也是徒劳的。

18、网站title要根据实际情况来写，title必须能准确的表达页面内容，让用户看到title就能想到页面的大致内容，有利于提高用户体验从而获得更多的流量。31title4.标题要有一定的吸引力，吸引更多的用户感兴趣并点title32title32title5.内容页的标题构成：本页内容标题+栏目名+网站名。关键词分隔符关键词的分隔符大致有 “ , _ - |” 关于具体用哪个比较好，我个人认为没有多大区别，都是一样一样的。33title5.内容页的标题构成：本页内容标题+栏目名+网站名title6.不要频繁修改title很多新手站长都是频繁的修改title，修改了title就等于你换了门牌号，搜

19、索引擎就需要一段时间重新认识你，title应该在网站上线前就要确定好。34title6.不要频繁修改title很多新手站长都是频繁title35title35descrption36descrption36descrption描述的要求：1.80-110个中文字符。2.符合语言逻辑3.含有关键词4.具有一定的吸引人眼球的功能。5.是整个页面的概述。37descrption描述的要求：37descrption对排名的影响 description的作用是配合title，相当于title的助手，都知道title很重要那么title的助手也当然有一定的重要性了，比如说某 个很重要的领导，他的助手说的话

20、是不是很有分量呢？description是title的延伸，用于辅助title，title里出现的关键词在 description野出现一两次，就等于告诉搜索引擎这个词很重要。38descrption对排名的影响38descrption带来流量 有研究发现，人们对排在搜索引擎前几位的页面关注度相差不大，在众多的所搜结果中，别人凭什么点击你的站呢，除了排名以外，title和 description够不够吸引人也是一个很重要的因素。而title就那么几个字，带来的信息量太少了，那么这个艰巨的任务当然要交给 description了，description两行字可以带来的信息量不多，但是给人一个大致

21、的了解还是足够的，如果description的内容足 够吸引他们、包含他们要找的内容，那么这些人就极有可能点击这个站了。39descrption带来流量39descrptiondescription的写法 说说description的写法，description的可读性很重要。description是对一个页面的概述，应该是一段总结的话。不能做关键 词的罗列和堆砌（那是keywords的功能了），但是有必要将title里的关键词重复一两次或者做他们的长尾关键词，这就要把关键词巧妙的融入进去写 成一段通顺的话了，这样对被重复的关键词的排名有比较大的帮助。40descrptiondescripti

22、on的写法40keyword体现该页面的核心关键词。注意：不要过多罗列关键词，3-5个即可。用“ , ”隔开。每个页面的关键词都不应一样，应该是该页面的核心内容的浓缩体现。keyword标签对搜索引擎的影响越来越低。41keyword体现该页面的核心关键词。41descrption42descrption42body内标签优化A标记2H标签31图片优化3343body内标签优化A标记2H标签31图片优化3343H标记h标记作为一种衡量网页内重要程度的标记在seo的作用中非常重要。H1：经常被作为内容标题出现。h2-h6重要性逐次下降。分别被作为二级到六级标签。注意：h1在页面中出现且仅出现一次

23、为宜。h2标签可出现2-4次，其他h3-h6标签视需要而定。44H标记h标记作为一种衡量网页内重要程度的标记在seo的作用中H标记h标记作为一种衡量网页内重要程度的标记在seo的作用中非常重要。H1：经常被作为内容标题出现。h2-h6重要性逐次下降。分别被作为二级到六级标签。注意：h1在页面中出现且仅出现一次为宜。h2标签可出现2-4次，其他h3-h6标签视需要而定。45H标记h标记作为一种衡量网页内重要程度的标记在seo的作用中A标记a标记医圣圣网站注意两点：1.建议target属性为“_blank”2.必须使用title对链接进行描述。46A标记a标记46图片优化1.图片要尽量小，加快图片

24、的下载速度。（一般png格式的图片占用空间小）2.图片要有描述“alt”47图片优化1.图片要尽量小，加快图片的下载速度。（一般png格代码优化程序1、清理垃圾代码。是指删除页面中的冗余代码，可以删除80%的冗余代码，垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码。 下面请看常见的垃圾代码。空格 空格字符是网页中最常见的垃圾代码。但并不是指 标签，而是有代码编辑环境下敲击空格所产生的符号，每个空格相当一个字符，那么也就是说，一个页面，空格就占页面体积的15%，100K的页面，有15K是空格字符。 空格字符最常出现 在代码的开始和结束处，还有就是空行中。 这些都是容易产生垃圾代码的地

25、方。 消除这样的垃圾代码的方法就是选中代码然后按shift+tab键左对齐。48代码优化程序1、清理垃圾代码。48代码优化程序2、HTML标签的转换 这个主要就是使用短标签替换在网页中有同样效果的长标签，例如：,与两者都是对字体加粗但是却比多了5个字符。如果一个页面出现上百个加粗标签，就会产生不少的冗余代码。 解决方法 是利用DW的查找功能替换长标签。49代码优化程序2、HTML标签的转换49代码优化程序3.CSS优化 CSS可以以调用的方式，避免同样的标签重复写样式，从而达到精简代码的效果。另外，CSS有3种调用方式 1头部调用，也就是在和之间，这样是最不明智的，如果内容少则影响不大，否则大大增加页面的体积，还占用了顶部的重要位置。 2主体调用，例子如下： 我的网页 这样的调用方式既不能发挥CSS的优势，又大大增加页面的代码量。