源码优化-课件.ppt

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

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

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

4、。哪些页面不适合div页面缓存:每次用户访问的页面，都会在浏览器缓存中保存一定时间，以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载，对于每个外部导入的样式文件也是如此，如果CSS文件修改，那么访问网站的每一个页面都会重新下载，而以往的将样式写在页面中的方式，只是修改的页面需要重新下载。哪些页面不适合div兼容性:对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好，比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本浏览器的用户不在少数，这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试，以保证兼容性，无形中也增加很多工作

5、量(至少我接触的开发人员制作div页面比table页面的标准时间要长一些)。哪些页面不适合div横切与延展性:横切传统的布局方式为了使页面下载的更快，把页面自上而下分成若干个块，但是往往采用DIV进行布局的页面都会出现这样的情况，由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应，而出现留白。相比之下传统的table方式更容易规避这样情况的发生。CSS精简1.1.改内部样式为外部样式改内部样式为外部样式表表2.2.合并不必要的样式类合并不必要的样式类3.3.合并相关样式表合并相关样式表4.4.统一，简化统一，简化csscss样式样式CSS代码精简工具介绍 CleanCSS 是一个

6、免费的CSS 精简压缩工具，通过这个在线工具，可以将你的CSS文件压缩、优化成更精简，这将大大提高你的网站的载入速度。进入CleanCSS后,你可以输入要压缩的CSS代码或是该CSS文件的所在URL地址,然后选择代码布局和相应的精简压缩选项,最后点击生成即可.more CSS压缩与优化工具 是一个中文版的CSS代码精简工具.进入CSS压缩与优化工具之后，选择简体或繁体中文选项，然后其他的操作就比较简单了。您可以将CSS代码贴入文本框或者输入您网站或博客的CSS文件地址，如果您不懂CSS相关 知识，那么选择默认设置即可；而懂得CSS相关的朋友则可以进行其他相关设置。除此之外，如果您希望导出经过“

7、减肥”的CSS文件，则需要选择最后一个“导出优化后的CSS”选项。via chadaCSS精简思路1,css的定义名，尽可能的不超过4个字母：其实4个字母已经可以满足各种名称的千变万化了。这个是我在9rules和一些设计师讨论得出的结论，我们一直在致力于最高效执行的css编写方式，首个字母可以代表一类比较明了的意思，下面的注释/*xxx*/纯粹为了解释，真的写网页的时候千万不要这么废话哦，比如：一个背景颜色color定义，我常常写为.cwbackground:#fff/*白色white背景，这个相信最常用，我常常独立写出来，需要时就用*/.chu1background:#333/*灰色hui背

8、景，按照DW的色谱从深到浅按1n数字排列，作为中国人hui这个拼音自己好懂*/.chu3background:#666我在所有的单独颜色css定义都使用c打头，就是为了方便统一查看，这类定义经常可以使用在class=w100 cw这样的灵活组合编写方式中，其实这类定义我都喜欢在css表里写在一个区里，比如/*颜色*/.cwbackground:#fff.chu1background:#333.chu3background:#666/*字体颜色*/.zcwcolor:#fff.zch1color:#333.zch2color:#666CSS精简思路2，利用好总集定义（常用的东东一起）和组合定义方

9、式！这个是重点：很多的常用标签 和使用的属性的定义比如整个网站的最基本字体颜色，大小，连接字体的属性等等，我们经常重复使用的，最好能在前面一起定义完，比如：html,body,table,td,afont-size:12px;color:#333;font-family:宋体,Arial,Helvetica,sans-serif;letter-spacing:normala:hovercolor:#cc000e /*注意不同的定义名用,分隔这样以后除了特殊要求，基本不用再重复定义字体的这些属性，table和td之所以在这里强调是因为表格标签经常不能继承css属性，写多几个词以后会少很多奇怪的问

10、题，a:hover会继承a的其他定义，无需啰嗦*/顺便写点其他总集定义：*margin:0;padding:0;border:0/*这个定义所有的页面元素，非常狠不过写了网页很“稳当”以后稀奇古怪的小问题比如这个撑开点，那个框框不靠边等等麻烦事就少，放在css最顶部，以后特殊定义写在后面就可以优先执行*/bodybackground:#fff;text-align:center;word-break:break-all /*白色body是最常用的，后面这个定义配合容器使用margin:0 auto 布局居中必备*/tableborder-collapse:collapse/*表格无边框线*/C

11、SS精简思路3，一个标签下的同类标签重复定义的精炼表达方式：我们经常看到这样的写法，代码冗长而效率低下：#t.tawidth:200px;text-align:left.tbwidth:250px;background:#ccc.hahawidth:50px;float:left.kkcolor:#198080.kk2color:#ff0000列a_1列a_2列a_3列b_1列b_2列b_3行a1行a2红色字体行a3CSS精简思路#t#t ulwidth:200px;text-align:left#t liwidth:50px;float:left.tb pcolor:#198080.tbwi

12、dth:250px;background:#ccc/*tb写在后面，虽然重复了width，但后面的优先执行，前面的ul宽度定义无效！这样正好合服我们的意图*/.kk2color:#ff0000/*和上面同理*/列a_1列a_2列a_3列b_1列b_2列b_3行a1行a2红色字体行a3CSS精简思路4，活用传统html标签：很多人用了css制作网页以后，以为以前的传统htm标签没用了，其实传统标签在一些细节表达上比全部用css定义的标签来得简炼，我在这里下载的chinaren模板里，经常看到 哈哈哈这样的css定义过的标签来加粗字体，其实，你只要用标签就可以实现同样的效果如 哈哈哈这类传统标签有

13、其默认的独特含义，很多属性无需专门定义，节省了页面代码同时也减少了css表的代码。CSS精简1.1.改内部样式为外部样式改内部样式为外部样式表表2.2.合并不必要的样式类合并不必要的样式类3.3.合并相关样式表合并相关样式表4.4.统一，简化统一，简化csscss样式样式html精简由由csscss类属性替代不具有实际意义的标签：比如：类属性替代不具有实际意义的标签：比如：strongstrong，b b，等。，等。html精简教程HTML 4HTML 4HTML HTML（非（非XHTMLXHTML），），MIME type MIME type 为为 text/html text/html，

14、允许省略一些标，允许省略一些标签。通过签。通过 HTML 4 DTD HTML 4 DTD，你可以省略以下标签（那些所谓可避免的，你可以省略以下标签（那些所谓可避免的元素，这里用删除线加以标记）元素，这里用删除线加以标记）html精简教程HTML-Optimizer HTML-Optimizer HTML-Optimizer HTML-Optimizer 是一套专门替是一套专门替 HTML HTML减肥的工具，借着去除各种浏减肥的工具，借着去除各种浏览器会直接跳过的注解、空白、换行符号等字符，让你的网页功能览器会直接跳过的注解、空白、换行符号等字符，让你的网页功能不变，大小减半不变，大小减半j

15、s排序尽量将尽量将jsjs代码放置在网页的最后。代码放置在网页的最后。2 头部标签优化概述 头标签即内的所有标签。其中有以下几个标签需要重点优化三个关键词titledescrptionkeyword标题描述关键字title1.title1.title的唯一性：任何一个网页页都应该有一个唯一的的唯一性：任何一个网页页都应该有一个唯一的titletitle。该标题应该是这个网页的核心内容。title关键词是经过一变二的，很多新手站长都犯的错误，就是贸然的进入一个领域，跳过关键词研究，title是凭感觉写出来的，并没有去利用工具去分析，后来titile关键词排名是上去了，但就是没流量。titleti

16、tle2.title2.title的长度：标题的长度建议在的长度：标题的长度建议在25-3025-30个汉字之间。个汉字之间。大家都知道百度收索结果能显示30个汉字，那么我们就应该把title长度控制在30以内，很多人都去仿一些比较成功的网站title，笔者认为是不可行的，应该要以自己的实际情况为主，因为大部分比较成功的网站已经不是从SEO的角度来写网站title。太短无法清楚的表达页面内容，太长则搜索引擎的返回结果不全，同时也不利于用户体验。titletitle3.3.关键字分布：标题中应涵盖该网页内容的关键字。关键字分布：标题中应涵盖该网页内容的关键字。但是要注意1，符合用户的阅读习惯，不

17、要生硬的堆砌关键字。关键词不要堆积“返利网可信吗,返利网是真的吗,返利网怎么样,如何返利,商城返利,天猫返利,我要返利,淘宝返利网,返利网不谬返利,返利网登陆-返利宝”这应该是一个典型的关键词堆积，我的建议是如果是没有品牌力的网站(比如凡客诚品、卓越等);最好把关键词确定在一到两个左右为宜。titletitle4.4.标题要有一定的吸引力，吸引更多的用户感兴趣并点击。标题要有一定的吸引力，吸引更多的用户感兴趣并点击。排名再好的页面没有人愿意点击也是徒劳的。网站title要根据实际情况来写，title必须能准确的表达页面内容，让用户看到title就能想到页面的大致内容，有利于提高用户体验从而获得

18、更多的流量。titletitle5.5.内容页的标题构成：本页内容标题内容页的标题构成：本页内容标题+栏目名栏目名+网站名。网站名。关键词分隔符关键词的分隔符大致有关键词分隔符关键词的分隔符大致有“,_-|”“,_-|”关于具体关于具体用哪个比较好，我个人认为没有多大区别，都是一样一样的。用哪个比较好，我个人认为没有多大区别，都是一样一样的。title6.6.不要频繁修改不要频繁修改titletitle很多新手站长都是频繁的修改很多新手站长都是频繁的修改titletitle，修，修改了改了titletitle就等于你换了门牌号，搜索引擎就需要一段时间重新认就等于你换了门牌号，搜索引擎就需要一段

19、时间重新认识你，识你，titletitle应该在网站上线前就要确定好。应该在网站上线前就要确定好。titledescrptiondescrption描述的要求：描述的要求：1.80-1101.80-110个中文字符。个中文字符。2.2.符合语言逻辑符合语言逻辑3.3.含有关键词含有关键词4.4.具有一定的吸引人眼球的功能。具有一定的吸引人眼球的功能。5.5.是整个页面的概述。是整个页面的概述。descrption对排名的影响对排名的影响 descriptiondescription的作用是配合的作用是配合titletitle，相当于，相当于titletitle的助手，都知道的助手，都知道tit

20、letitle很重要那么很重要那么titletitle的助手也当然有一定的重要性了，比如说某的助手也当然有一定的重要性了，比如说某 个很重要的领导，他的助手说的话是不是很有分量呢？个很重要的领导，他的助手说的话是不是很有分量呢？descriptiondescription是是titletitle的延伸，用于辅助的延伸，用于辅助titletitle，titletitle里出现的关键里出现的关键词在词在 description description野出现一两次，就等于告诉搜索引擎这个词很重野出现一两次，就等于告诉搜索引擎这个词很重要。要。descrption带来流量带来流量 有研究发现，人们对排

21、在搜索引擎前几位的页面关注度相差不大，有研究发现，人们对排在搜索引擎前几位的页面关注度相差不大，在众多的所搜结果中，别人凭什么点击你的站呢，除了排名以外，在众多的所搜结果中，别人凭什么点击你的站呢，除了排名以外，titletitle和和 description description够不够吸引人也是一个很重要的因素。而够不够吸引人也是一个很重要的因素。而titletitle就那么几个字，带来的信息量太少了，那么这个艰巨的任务就那么几个字，带来的信息量太少了，那么这个艰巨的任务当然要交给当然要交给 description description了，了，descriptiondescription

22、两行字可以带来的信息两行字可以带来的信息量不多，但是给人一个大致的了解还是足够的，如果量不多，但是给人一个大致的了解还是足够的，如果descriptiondescription的内容足的内容足 够吸引他们、包含他们要找的内容，那么这些人就极有够吸引他们、包含他们要找的内容，那么这些人就极有可能点击这个站了。可能点击这个站了。descrptiondescriptiondescription的写法的写法 说说说说descriptiondescription的写法，的写法，descriptiondescription的可读性很重要。的可读性很重要。descriptiondescription是对一个

23、页面的概述，应该是一段总结的话。不能做是对一个页面的概述，应该是一段总结的话。不能做关键关键 词的罗列和堆砌（那是词的罗列和堆砌（那是keywordskeywords的功能了），但是有必要将的功能了），但是有必要将titletitle里的关键词重复一两次或者做他们的长尾关键词，这就要把里的关键词重复一两次或者做他们的长尾关键词，这就要把关键词巧妙的融入进去写关键词巧妙的融入进去写 成一段通顺的话了，这样对被重复的关成一段通顺的话了，这样对被重复的关键词的排名有比较大的帮助。键词的排名有比较大的帮助。keyword体现该页面的核心关键词。注意：不要过多罗列关键词，3-5个即可。用“,”隔开。每个

24、页面的关键词都不应一样，应该是该页面的核心内容的浓缩体现。keyword标签对搜索引擎的影响越来越低。descrptionbody内标签优化A标记2H标签3 1图片优化3 3H标记h标记作为一种衡量网页内重要程度的标记在seo的作用中非常重要。H1：经常被作为内容标题出现。h2-h6重要性逐次下降。分别被作为二级到六级标签。注意：h1在页面中出现且仅出现一次为宜。h2标签可出现2-4次，其他h3-h6标签视需要而定。H标记h标记作为一种衡量网页内重要程度的标记在seo的作用中非常重要。H1：经常被作为内容标题出现。h2-h6重要性逐次下降。分别被作为二级到六级标签。注意：h1在页面中出现且仅出

25、现一次为宜。h2标签可出现2-4次，其他h3-h6标签视需要而定。A标记a标记医圣圣网站注意两点：1.建议target属性为“_blank”2.必须使用title对链接进行描述。图片优化1.图片要尽量小，加快图片的下载速度。（一般png格式的图片占用空间小）2.图片要有描述“alt”代码优化程序1、清理垃圾代码。是指删除页面中的冗余代码，可以删除80%的冗余代码，垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码。下面请看常见的垃圾代码。空格 空格字符是网页中最常见的垃圾代码。但并不是指 标签，而是有代码编辑环境下敲击空格所产生的符号，每个空格相当一个字符，那么也就是说，一个页面，空格

26、就占页面体积的15%，100K的页面，有15K是空格字符。空格字符最常出现 在代码的开始和结束处，还有就是空行中。这些都是容易产生垃圾代码的地方。消除这样的垃圾代码的方法就是选中代码然后按shift+tab键左对齐。代码优化程序2、HTML标签的转换 这个主要就是使用短标签替换在网页中有同样效果的长标签，例如：,与两者都是对字体加粗但是却比多了5个字符。如果一个页面出现上百个加粗标签，就会产生不少的冗余代码。解决方法 是利用DW的查找功能替换长标签。代码优化程序3.CSS优化 CSS可以以调用的方式，避免同样的标签重复写样式，从而达到精简代码的效果。另外，CSS有3种调用方式 1头部调用，也就

27、是在和之间，这样是最不明智的，如果内容少则影响不大，否则大大增加页面的体积，还占用了顶部的重要位置。2主体调用，例子如下：我的网页 这样的调用方式既不能发挥CSS的优势，又大大增加页面的代码量。|3外部调用 也就是把CSS样式内容放到外部文件中，使CSS样式和页面分离，这样可以减少页面的代码量，而且还不会占用页面顶部的重要位置，让搜索引擎优先发现页面中相对 重要的内容。这样做的同时要避免使用CSS为重要的内容定义样式.代码优化程序4、JS优化 JS无论对普通用户还是搜索引擎,都是极其不友好 的,所以在规划网页时,要尽量不要使用JS.目前为止,搜索引擎不解析JS生成的页面或内容,JS代码冗长,执

28、行效率远低于HTML,导致打开慢.JS优化,并不是说提高JS的代码执行效率,而是避免JS占用页面空间及重要位置.所以我们只要改变JS代码出现的位置和调用方式就行.JS调用分内部和外部调用.内部又分头部和底部调用.头部调用就是把JS代码放到页面头部去,但巨量的JS代码放到页面头部不但增加页面的体积,而且还会占用首页这样重量级位置.从而使得页面中相对重要的位置不能优先向搜索引擎展示,底部调用的原理一样.所以.下面 说说外部调用.就是把JS放到一个JS文件里,再在页面中调用,这样做既不占用页面的重要位置,又可以精简大量代码,加快页面显示速度,呵呵.看代码:代码优化程序5、表格优化 表格优化主要就是解决嵌套问题。让表格独立，从而加快显示速度。提高用户体验.同时又精简代码.介绍表格优化前我们要先搞清楚浏览器是怎样解析HTML的过程.当浏览器编译器遇到一个标签时.就开始寻找它的结束标签.直到它匹配上,才能显示它的内容.所以当你表格嵌套很多时,打开页面就会特别慢,这样就降低了用户体验了.解决方法就是,尽量不要把表格嵌套起来.这样做既有效的删除了冗余代码,减低了页面的体积,又提高 了搜索引擎的友好性一些不建议使用的代码strong，b等标签2框架结构3 1flash3 3谢谢！谢谢！