《源码优化.ppt》由会员分享,可在线阅读,更多相关《源码优化.ppt(54页珍藏版)》请在三一文库上搜索。
1、源码优化,2,目录,3,1 代码精简,尽量精简网页中的代码,能够突出网页的主题,减少服务器的负载,增快网站的打开速度。代码精简一般重点在以下几个方面:1.div结构调整2.css精简3.js精简4.垃圾代码处理,思路,4,结构精简,table转化div,http:/ 全部用table布局,对网页的加载和代码的精简都有不好的影响,5,结构精简,table转化div,http:/ 全部用table布局,对网页的加载和代码的精简都有不好的影响,2019/8/8,哪些页面不适合div,精简代码: 大家都说DIV的布局精简代码,但是用DIV替代TABLE所节约的代码又被CSS(样式)所占用,而这些样式大
2、多用于控制DIV的排版布局。那你会说了,CSS可以放在外部重用啊,要想得到这个问题的答案请往下看。,2019/8/8,哪些页面不适合div,重用性与下载量: 统一使用一个.css的样式表文件,可以实现修改一次,全站修改的效果,这样使得维护的成本更低。但是请大家换一个角度想,如果所有页面在加载时都要访问一个文件,那这个文件每天的下载量,特别时在搜狐、新浪的网站平台上将达到几亿次,这就需要后面有很多台前端web服务器在做支撑,那后台的成本无形中也提高了很多。如果后台支撑没有做好,那么页面就会出现花屏,之前所作的工作也是白费。很多人会问,这样的几率太小了。我们所作的工作就是为了避免这一两次意外的发生
3、,如果意外发生了,对于门户后果将是不堪设想的。,2019/8/8,哪些页面不适合div,HTTP通讯: 统一的样式表文件采用外部调用的形式,这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应,这样对前端web服务器会是很大的消耗。而原来很长时间都是将css和js写在页面前端(大家可以看看sohu和sina的页面,大多都是采用这样的形式),而不是作为外部调用的形式,也是为了尽量避免给服务器增加消耗。,2019/8/8,哪些页面不适合div,页面缓存: 每次用户访问的页面,都会在浏览器缓存中保存一定时间,以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使
4、页面重新下载,对于每个外部导入的样式文件也是如此,如果CSS文件修改,那么访问网站的每一个页面都会重新下载,而以往的将样式写在页面中的方式,只是修改的页面需要重新下载。,2019/8/8,哪些页面不适合div,兼容性: 对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好,比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本浏览器的用户不在少数,这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试,以保证兼容性,无形中也增加很多工作量(至少我接触的开发人员制作div页面比table页面的标准时间要长一些)。,2019/8/8,哪些页面不适合div,横切与延展性
5、: 横切传统的布局方式为了使页面下载的更快,把页面自上而下分成若干个块,但是往往采用DIV进行布局的页面都会出现这样的情况,由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应,而出现留白。 相比之下传统的table方式更容易规避这样情况的发生。,12,CSS精简,1.改内部样式为外部样式表 2.合并不必要的样式类 3.合并相关样式表 4.统一,简化css样式,2019/8/8,CSS代码精简工具介绍,CleanCSS 是一个免费的CSS 精简压缩工具,通过这个在线工具,可以将你的CSS文件压缩、优化成更精简,这将大大提高你的网站的载入速度。进入CleanCSS后, 你可以输入要压
6、缩的CSS代码或是该CSS文件的所在URL地址, 然后选择代码布局和相应的精简压缩选项, 最后点击生成即可. more CSS压缩与优化工具 是一个中文版的CSS代码精简工具. 进入CSS压缩与优化工具之后,选择简体或繁体中文选项,然后其他的操作就比较简单了。您可以将CSS代码贴入文本框或者输入您网站或博客的CSS文件地址,如果您不懂CSS相关 知识,那么选择默认设置即可;而懂得CSS相关的朋友则可以进行其他相关设置。除此之外,如果您希望导出经过“减肥”的CSS文件,则需要选择最后一个“ 导出优化后的CSS ”选项。via chada,2019/8/8,CSS精简思路,1,css的定义名,尽可
7、能的不超过4个字母: 其实4个字母已经可以满足各种名称的千变万化了。这个是我在9rules和一些设计师讨论得出的结论,我们一直在致力于最高效执行的css编写方式,首个字母可以代表一类比较明了的意思,下面的注释/*xxx*/纯粹为了解释,真的写网页的时候千万不要这么废话哦,比如: 一个背景颜色color定义,我常常写为 .cwbackground:#fff /*白色white背景,这个相信最常用,我常常独立写出来,需要时就用*/ .chu1background:#333/*灰色hui背景,按照DW的色谱从深到浅按1n数字排列,作为中国人hui这个拼音自己好懂*/ .chu3background:
8、#666 我在所有的单独颜色css定义都使用c打头,就是为了方便统一查看,这类定义经常可以使用在class=“w100 cw“这样的灵活组合编写方式中,其实这类定义我都喜欢在css表里写在一个区里,比如 /*颜色*/ .cwbackground:#fff .chu1background:#333 .chu3background:#666 /*字体颜色*/ .zcwcolor:#fff .zch1color:#333 .zch2color:#666,2019/8/8,CSS精简思路,2,利用好总集定义(常用的东东一起)和组合定义方式!这个是重点: 很多的常用标签 和使用的属性的定义比如整个网站的
9、最基本字体颜色,大小,连接字体的属性等等,我们经常重复使用的,最好能在前面一起定义完,比如: html,body,table,td,afont-size:12px;color:#333;font-family:“宋体“, Arial, Helvetica, sans-serif;letter-spacing:normal a:hovercolor:#cc000e /*注意不同的定义名用,分隔这样以后除了特殊要求,基本不用再重复定义字体的这些属性,table和td之所以在这里强调是因为表格标签经常不能继承css属性,写多几个词以后会少很多奇怪的问题,a:hover会继承a的其他定义,无需啰嗦*/
10、 顺便写点其他总集定义: * margin:0;padding:0;border:0 /*这个定义所有的页面元素,非常狠不过写了网页很“稳当”以后稀奇古怪的小问题比如这个撑开点,那个框框不靠边等等麻烦事就少,放在css最顶部,以后特殊定义写在后面就可以优先执行*/ bodybackground:#fff;text-align:center;word-break:break-all /*白色body是最常用的,后面这个定义配合容器使用margin:0 auto 布局居中必备*/ tableborder-collapse:collapse /*表格无边框线*/,2019/8/8,CSS精简思路,3
11、,一个标签下的同类标签重复定义的精炼表达方式:我们经常看到这样的写法,代码冗长而效率低下: #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红色字体 行a3 ,2019/8/8,CSS精简思路, #t #t ulwidth:200px;text-align:left #t liwidth:50px;float:left
12、 .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 ,2019/8/8,CSS精简思路,4,活用传统html标签:很多人用了css制作网页以后,以为以前的传统htm标签没用了,其实传统标签在一些细节表达上比全部用css定义的标签来得简炼,我在这里下载的chinaren模板里,经常看到 哈哈哈
13、 这样的css定义过的标签来加粗字体,其实,你只要用标签就可以实现同样的效果如 哈哈哈 这类传统标签有其默认的独特含义,很多属性无需专门定义,节省了页面代码同时也减少了css表的代码。,19,CSS精简,1.改内部样式为外部样式表 2.合并不必要的样式类 3.合并相关样式表 4.统一,简化css样式,20,html精简,由css类属性替代不具有实际意义的标签:比如:strong,b,等。,21,html精简教程,HTML 4 HTML (非XHTML),MIME type 为 text/html ,允许省略一些标签。通过 HTML 4 DTD,你可以省略以下标签(那些所谓可避免的元素,这里用删
14、除线加以标记) ,22,html精简教程,HTML-Optimizer HTML-Optimizer 是一套专门替 HTML减肥的工具,借着去除各种浏览器会直接跳过的注解、空白、换行符号等字符,让你的网页功能不变,大小减半,23,js排序,尽量将js代码放置在网页的最后。,24,2 头部标签优化,概述,头标签即内的所有标签。其中有以下几个标签需要重点优化,三个关键词,title,descrption,keyword,标题,描述,关键字,25,title,1.title的唯一性:任何一个网页页都应该有一个唯一的title。 该标题应该是这个网页的核心内容。 title关键词是经过一变二的,很多新
15、手站长都犯的错误,就是贸然的进入一个领域,跳过关键词研究,title是凭感觉写出来的,并没有去利用工具去分析,后来titile关键词排名是上去了,但就是没流量。,26,title,27,title,2.title的长度:标题的长度建议在25-30个汉字之间。 大家都知道百度收索结果能显示30个汉字,那么我们就应该把title长度控制在30以内,很多人都去仿一些比较成功的网站title,笔者认为是不可行的,应该要以自己的实际情况为主,因为大部分比较成功的网站已经不是从SEO的角度来写网站title。太短无法清楚的表达页面内容,太长则搜索引擎的返回结果不全,同时也不利于用户体验。,28,title
16、,29,title,3.关键字分布:标题中应涵盖该网页内容的关键字。 但是要注意1,符合用户的阅读习惯,不要生硬的堆砌关键字。 关键词不要堆积 “返利网可信吗,返利网是真的吗,返利网怎么样,如何返利,商城返利,天猫返利,我要返利,淘宝返利网,返利网不谬返利,返利网登陆-返利宝” 这应该是一个典型的关键词堆积,我的建议是如果是没有品牌力的网站(比如凡客诚品、卓越等);最好把关键词确定在一到两个左右为宜。,30,title,31,title,4.标题要有一定的吸引力,吸引更多的用户感兴趣并点击。 排名再好的页面没有人愿意点击也是徒劳的。 网站title要根据实际情况来写,title必须能准确的表达
17、页面内容,让用户看到title就能想到页面的大致内容,有利于提高用户体验从而获得更多的流量。,32,title,33,title,5.内容页的标题构成:本页内容标题+栏目名+网站名。 关键词分隔符 关键词的分隔符大致有 “ , _ - |” 关于具体用哪个比较好,我个人认为没有多大区别,都是一样一样的。,34,title,6.不要频繁修改title 很多新手站长都是频繁的修改title,修改了title就等于你换了门牌号,搜索引擎就需要一段时间重新认识你,title应该在网站上线前就要确定好。,35,title,36,descrption,37,descrption,描述的要求: 1.80-1
18、10个中文字符。 2.符合语言逻辑 3.含有关键词 4.具有一定的吸引人眼球的功能。 5.是整个页面的概述。,38,descrption,对排名的影响 description的作用是配合title,相当于title的助手,都知道title很重要那么title的助手也当然有一定的重要性了,比如说某 个很重要的领导,他的助手说的话是不是很有分量呢?description是title的延伸,用于辅助title,title里出现的关键词在 description野出现一两次,就等于告诉搜索引擎这个词很重要。,39,descrption,带来流量 有研究发现,人们对排在搜索引擎前几位的页面关注度相差不大
19、,在众多的所搜结果中,别人凭什么点击你的站呢,除了排名以外,title和 description够不够吸引人也是一个很重要的因素。而title就那么几个字,带来的信息量太少了,那么这个艰巨的任务当然要交给 description了,description两行字可以带来的信息量不多,但是给人一个大致的了解还是足够的,如果description的内容足 够吸引他们、包含他们要找的内容,那么这些人就极有可能点击这个站了。,40,descrption,description的写法 说说description的写法,description的可读性很重要。description是对一个页面的概述,应该是一
20、段总结的话。不能做关键 词的罗列和堆砌(那是keywords的功能了),但是有必要将title里的关键词重复一两次或者做他们的长尾关键词,这就要把关键词巧妙的融入进去写 成一段通顺的话了,这样对被重复的关键词的排名有比较大的帮助。,41,keyword,体现该页面的核心关键词。 注意:不要过多罗列关键词,3-5个即可。用“ , ”隔开。 每个页面的关键词都不应一样,应该是该页面的核心内容的浓缩体现。 keyword标签对搜索引擎的影响越来越低。,42,descrption,43,body内标签优化,44,H标记,h标记作为一种衡量网页内重要程度的标记在seo的作用中非常重要。 H1:经常被作为
21、内容标题出现。 h2-h6重要性逐次下降。分别被作为二级到六级标签。 注意:h1在页面中出现且仅出现一次为宜。 h2标签可出现2-4次,其他h3-h6标签视需要而定。,45,H标记,h标记作为一种衡量网页内重要程度的标记在seo的作用中非常重要。 H1:经常被作为内容标题出现。 h2-h6重要性逐次下降。分别被作为二级到六级标签。 注意:h1在页面中出现且仅出现一次为宜。 h2标签可出现2-4次,其他h3-h6标签视需要而定。,46,A标记,a标记 医圣圣网站 注意两点:1.建议target属性为“_blank” 2.必须使用title对链接进行描述。,47,图片优化,1.图片要尽量小,加快图
22、片的下载速度。(一般png格式的图片占用空间小) 2.图片要有描述“alt”,48,代码优化程序,1、清理垃圾代码。 是指删除页面中的冗余代码,可以删除80%的冗余代码,垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码。 下面请看常见的垃圾代码。空格 空格字符是网页中最常见的垃圾代码。但并不是指 标签,而是有代码编辑环境下敲击空格所产生的符号,每个空格相当一个字符,那么也就是说,一个页面,空格就占页面体积的15%,100K的页面,有15K是空格字符。 空格字符最常出现 在代码的开始和结束处,还有就是空行中。 这些都是容易产生垃圾代码的地方。 消除这样的垃圾代码的方法就是选中代码然后按
23、shift+tab键左对齐。,49,代码优化程序,2、HTML标签的转换 这个主要就是使用短标签替换在网页中有同样效果的长标签,例如:,与两者都是对字体加粗但是却比多了5个字符。如果一个页面出现上百个加粗标签,就会产生不少的冗余代码。 解决方法 是利用DW的查找功能替换长标签。,50,代码优化程序,3.CSS优化 CSS可以以调用的方式,避免同样的标签重复写样式,从而达到精简代码的效果。另外,CSS有3种调用方式 1头部调用,也就是在和之间,这样是最不明智的,如果内容少则影响不大,否则大大增加页面的体积,还占用了顶部的重要位置。 2主体调用,例子如下: 我的网页 这样的调用方式既不能发挥CSS
24、的优势,又大大增加页面的代码量。 |3外部调用 也就是把CSS样式内容放到外部文件中,使CSS样式和页面分离,这样可以减少页面的代码量,而且还不会占用页面顶部的重要位置,让搜索引擎优先发现页面中相对 重要的内容。这样做的同时要避免使用CSS为重要的内容定义样式,51,代码优化程序,4、JS优化 JS无论对普通用户还是搜索引擎,都是极其不友好 的,所以在规划网页时,要尽量不要使用JS. 目前为止,搜索引擎不解析JS生成的页面或内容,JS代码冗长,执行效率远低于HTML,导致打开慢. JS优化,并不是说提高JS的代码执行效率,而是避免JS占用页面空间及重要位置.所以我们只要改变JS代码出现的位置和
25、调用方式就行 JS调用分内部和外部调用 .内部又分头部和底部调用 头部调用就是把JS代码放到页面头部去,但巨量的JS代码放到页面头部不但增加页面的体积,而且还会占用首页这样重量级位置.从而使得页面中相对重要的位置不能优先向搜索引擎展示, 底部调用的原理一样. 所以下面 说说外部调用.就是把JS放到一个JS文件里,再在页面中调用,这样做既不占用页面的重要位置,又可以精简大量代码,加快页面显示速度,呵呵 看代码: ,52,代码优化程序,5、表格优化 表格优化主要就是解决嵌套问题。让表格独立,从而加快显示速度。提高用户体验.同时又精简代码. 介绍表格优化前我们要先搞清楚浏览器是怎样解析HTML的过程 当浏览器编译器遇到一个标签时就开始寻找它的结束标签直到它匹配上,才能显示它的内容.所以当你表格嵌套很多时,打开页面就会特别慢,这样就降低了用户体验了. 解决方法就是,尽量不要把表格嵌套起来.这样做既有效的删除了冗余代码,减低了页面的体积,又提高 了搜索引擎的友好性,53,一些不建议使用的代码,谢谢!,
链接地址:https://www.31doc.com/p-3299982.html