做好宣传栏:代码优化,让你的网站排名飙升!

来源:百度文库 编辑:偶看新闻 时间:2024/04/27 17:37:03
到现在为止,虽然我对网站这些玩意的认知还算不错,但是在实际操作起来我还是像个小白菜一样,全身几乎都是白嫩嫩的,所以,就让一切从头开始吧!现在就让我回顾一下代码方面的一些知识,现在大家跟我一起学习吧,如果我有所错的地方或者不明白的地方要留言跟我说哦!

代码优化一直都是一个页面优化的重要环节,同时也是一个页面优化的基础。其中,关于代码优化的方面包括精简代码,头部优化权重标签优化以及图片优化等几个方面。

页面的代码优化主要包括5大环节:

1、清理垃圾代码中最常见的垃圾代码——空格

清理垃圾代码的含义是指删除页面中的冗余代码,或者说是垃圾代码,它主要是指那些即使是删除了也不会对页面有任何影响的非必要的代码。同时大家最需要了解的是最常见的垃圾代码——空格。

空格是网页中最常见的垃圾代码,但是这并不包括标签,而是有代码编辑环境下敲击空格所产生的符号,每个空格就相当于一个字符,那么也就是说,一个页面,空格就占整个页面体积的15%,例如100K的页面里,就有15K属于空格字符。空格字符最常出现的地方就是在代码的开始和结束处,还有就是空行中。这些都是容易产生垃圾代码的地方。

消除空格代码的方法有:打开一个页面,按住ctrl+A选中整个页面的代码,然后重复按几次shift+tab键直到整个页面的代码都进行了左对齐。

2、HTML标签由长到短的转换

HTML标签由长到短的转换主要就是通过使用短标签替换在网页中有同样效果的长标签来实现。例如:两者都是对字体加粗的作用,但是却比多了5个字符。想想如果一个页面出现上百个加粗标签,就会产生不少的冗余代码(垃圾代码)。
HTML标签由长到短的转换方法:通过使用DW(也就是Dreamweaver,下面不再解释)的查找功能(快捷方式为ctrl+F)来替换长标签,这个大家可以自己试试,我在这儿就不举例了。

3、CSS优化

CSS优化的原理:CSS可以通过调用的方式,避免同样的标签重复写样式,从而达到精简代码的效果。

同时应该说说的是CSS有3种的调用方式:

(1)头部调用

把CSS放在和之间是最不明智的,如果内容少则影响不大,否则的话则大大增加页面的体积,还占用了顶部的重要位置。

(2)主体调用

给大家举个例子:

我的网页


这样的调用方式也不是一个利于网页优化的方式,因为这样既不能发挥CSS的优势,同时还大大增加页面的代码量。

(3)外部调用

我很推荐大家都用外部调用来进行CSS的调用,也就是把CSS样式内容放到外部文件中,使CSS样式和页面分离,这样既是可以减少页面的代码量,同时还不会占用页面顶部等重要位置,让搜索引擎优先发现页面中相对重要的内容,再者也要避免使用CSS为重要的内容定义样式,这是CSS方面的内容,我这就一笔带过了~

4、JS优化

JS无论对普通用户还是搜索引擎都是极其不友好的,因此在规划网页的时候,尽量不要使用JS。
目前为止,搜索引擎都是不解析JS生成的页面或内容的,JS代码也是比较冗长,执行效率远远低于HTML,导致打开网页的速度也很慢。同时,JS优化,也并不是说提高JS的代码执行效率,而是避免JS占用页面空间及重要位置,我们只要改变JS代码出现的位置和调用方式就行了。

那么我这儿再说一下JS的调用方式:JS调用分内部和外部调用,同时内部又分头部和底部调用:

头部调用就是把JS代码放到页面头部去,但巨量的JS代码放到页面头部不但增加页面的体积,而且还会占用首页这样重量级位置,从而使得页面中相对重要的位置不能优先向搜索引擎展示,底部调用的原理一同。

现在说说外部调用:

外部调用也就是把JS放到一个JS文件里,再在页面中调用,这样做既不占用页面的重要位置,又可以精简大量代码,加快页面显示速度,大家看看JS调用的一个代码例子:

5、表格优化

表格优化在现在已经比较少出现在现在的网站中了,但还是有的,这里要说的是关于表格的优化主要在于解决嵌套的问题——让表格独立,从而加快显示速度,提高用户体验.同时又精简代码。

在弹表格优化前我们先说说浏览器是怎样解析HTML的:当浏览器编译器遇到一个标签时就开始寻找它的结束标签,直到它匹配上了以后,才能显示它的内容,针对这个,当你表格嵌套很多的时候,打开页面就会特别地慢,这样下来就大大降低了用户体验了。
表格优化方法:尽量不要把表格嵌套起来,这样做既有效的删除了冗余代码,而且也减低了页面的体积,同时还提高了网站对搜索引擎的友好性。

这次写的文章有点长,不过为了大家方便了解代码的优化,我在这5大环节之中的终点解决方法前都使用了红色字体,大家看的时候也方便一点,找起重点来也不会东一下西一下了,愿大家与我都学有所成!