怎么样来做好网站的css

  • 发布于:2019-04-01
  • 196 人围观

网站优化对于阿清来说最重要的网站的内部优化,只要把网站内部优化做好了,其他seo步骤才能起到事半功倍的效果。阿清会在后面陆续写关于站内优化的方法,今天先讲seo之站内优化—css优化。为什么说站内优化才是seo中最重要的一个环节呢。各位SEOer可以想想网站优化其实无非就那么几个重要的环节,而那些环节都是需要持续重复每天要做的事情。不需要太花脑力,只需要把自己当苦力使唤就行了。

而站内优化却不一样,不知道大家有没有体会,几个人同一时间做网站,都是更新的原创文章,也内部链接和外部链接、文章优化等等都是差不多的。但是却 又好坏之分呢?在说一个例子,一些做淘宝客等迅速抢占排名的网站,大都愿意使用博客程序去建站。不仅仅在于博客自身的定义,(博客中的文章,可以解释为博 主自己写的,而博主自己写的定义为原创文章)。这种博客自身的定义对以前来说还是有很大作用的。但是随着博客的泛滥和大量低质量的博客出现,这点占的比重 也越来越低了。但是大家会说,现在使用博客程序还是会比网站程序容易收录。的确,这是因为博客程序的内部结构对搜素引擎来说更加友好。博客程序的结构一般 都会比较扁平,内容页面离首页的距离很近,更加利于蜘蛛抓取。当然还有很多方法。阿清列举出这点,只是想说明一点,网站的内部优化十分重要。站长们不要想 着草草做了站,靠什么伪原创、垃圾外链等等来提高排名。这样不仅很累,而且效果还不好。大家可以去看看这两篇文章《新站长需做的准备》和《精简代码详解》。这两篇都是介绍网站内部优化的。

好了言归正传,讲css优化,主要讲css执行效率。毕竟网站的执行效率跟seo也是有很大关系的。在这之前阿清需要介绍一下css选择器的执行和浏览器渲染过程。

首先浏览器是从右至左来处理选择器的,那么再来说下浏览器工作的过程,这里是渲染的过程,得到数据之后,浏览器要先绘制一个DOM树,然后再有一个 “reflow” 的过程,这个过程就是在CSS 文件下载之后,确定要渲染的元素在DOM中的位置,而CSS 样式中,很多很多在应用的时候都要有一个“reflow” 的过程,所以,避免这个过程,后者减少这个过程,都会相当大的提升浏览器的效率。

还有一个就是 CSS 选择器的优先问题了,这个这里不多说了。那么阿清来讲个例子吧,直接上代码例如,我们通常的选择器会这么写:

.main .pright div a{color:red;}

那么根据上面说的几条,浏览器的工作过程是绘制好DOM 树之后,就会查找页面中所有a 元素了。查找到所有的 a 元素之后,又开始查找出于 .main类下面的.pright类再找div,最后找到a标签,如果这个div里面有好多好多a元素就会是一个非常耗费资源的事情。那么如果这里有更多 个.XXX 呢?

所以我们可以这么写,在div里的所有a元素都加上class=“XXX”,选择器就会这样写了:

.main .pright div a .XXX{color:red;}

这样写效率就会高很多,此类例子还有很多。例如层div嵌套过多写的样式可能也会有这种情况。其实现在很多CMS还有一些前端的高手都注意到了这一问题。不明白的人会比较郁闷,为什么都是底层了还要在每个元素中加上class样式呢?

万企互联
标签: