说到HTML和CSS的优化，想必已经有很多相关文章在介绍这个东西，度娘一搜一大片文章，优化方法也琳琅满目，但我稍微扫了一下，大部分都是再说SEO优化的东西。确实，做前端领域的人比较重视的当然是访问量，有人访问，做的网站才是成功的，如果没有人访问，你做再好的网站也一无是处。
但我要谈论的优化就与SEO优化扯不上半毛钱关系，我从前端开发人员角度说一说我理解的前端优化。
近年来都在流行这个词：语义化。其实表面上语义化很好理解，就让人能一眼看懂嘛。。但实际实现真正的语义化实在是太困难了，而且这个概念似乎说的太神奇，就像语义化之后的网页能飞天似的。。。其实不然，语义化的确能提升整个代码的结构、可读性，对于高速发展的当今互联网行业来说是必须的，不过确实没有必要太神话这个东西，以至于为了语义化牺牲更多不必要的东西，比如兼容性．
前端工程是从Web发展到现阶段才逐渐清晰的一个概念,因为Web应用的复杂化,大型化,开发人员不得不将前端项目真正作为一个工程来看待.自然而然开人员不是一个人吧,开发完还需要修Bug吧,上线完还得迭代吧,种种不得不直面的问题都指向了一个根本问题:代码的可维护性.开发人员的价值其实不体现在如何可以实现一个功能,给点儿时间不会代码的人也能给你实现出来,而是在与培养对与维护代码的可维护性的意识.开发人员不可能一直在基层只完成上面交下来的任务,而是将每一个任务都当做一个小工程看待,虽然有可能这个任务只是一个非常简单的功能,但开发功能的过程当中就需要想的稍微多一些,比如这个功能能不能抽出一部分非业务逻辑呢,如何拆分功能点让它更加弹性呢,别人能不能一下就看懂是啥呢…
HTML标准当中定义了很多HTML元素,可能有一些元素我们一次都没有使用过,然而这不是一个坏事儿,对于浏览器来说,首先会创建DOM节点,然后再将DOM节点加入到DOM树中,最后再render(有些文献提到DOM树创建过程与render过程是异步状态,可以再查一下),每一个HTML节点都需要这些过程,因此无论是从理论上还是实际情况上来说,选用不同的HTML对象实际是并无太大的性能损失,加上用户对HTML元素是完全未知的状态,并且由于CSS reset的存在,导致标准提供的各个DOM对象之间的差异就更少了.不过这种话不能说的太绝对,HTMLSelectElement和HTMLVideoElement差异性可能就大一些,具体差是在DOM树形成的过程还是render的过程,我将在另外一篇文章中分析.前端开发人员在实际开发过程中也发现,为了应对需求,我们需要对页面上的更多部分具有更高的控制权,举例来说,Video标签虽然提供control,但我就不能使用它的control;select虽然是选择控件,但我就非得使用js做出相应功能,这不是哪家不遵守标准的问题,是因为标准只定义了接口层方面的信息,而对于UI层并没有限制,所以千奇百怪也没有办法了.
上面扯这么一大堆其实就是为了说明一个问题:选用哪个HTML标签在大多数情况下是取决于开发者而不是标准.所以在开发的美学上看来其实是没有什么标准可以阻止我在所有的页面上都使用span,而不用div或者其他.不过之前也有说过,可能这种美学是自己的,就像你画一幅画,你自己的美学并不能提升这幅画的价值,而是需要认同,价值才能有所提升.在前端中同样,所写出来的代码需要其他人认同,才可以说你这个代码写的漂亮,而不是自己觉得不错就可以.
我跟其他前端工程师一样,也纠结过这个问题:到底怎么写HTML,CSS才是别人所可以认可的,为此也查过不少资料,人们也众说纷纭,实际上搞得我更加不懂怎么写了,但所有的写法好不好其实根本就是,维护性咋样.已可维护性为出发点去想一想标准,其实相对来说还是可以提取出要点去回答上面的问问题的.
简单总结了一下以上问题的解答:
标签语义总能让别人知道里面大概是什么东西,所以使用不同的标签是有意义的,但不必太深究
class语义总需要让别人知道里面是什么东西,所以需要直接写出里面是什么,这样才能做到不看页面也能快速定位
总需要把自己可以控制的东西弄得更多,所以有些标签不太建议使用
按照上面的解答分析一下下面的代码:
<p class="select selectone"></p> <ul class="options"> <li value="1">options1</li> </ul>
<select class="selectone"> <option value="1">options1</option> </select>
select标签确实一眼就能看出这是啥,但class也一样能看出这是啥,因为实际环境中你需要指明这是selectone,而不仅仅是一个select,因为页面中可能有很多个select,你怎么去区分?
class总能告诉你这是什么东西,而select selectone这种组合总能给你更多可定制的东西,比如select一套样式,selectone可以更特殊一些,而且更重要的是,select标签的option是没法应用样式的…,我可是遇到过这种坑
当然这属于比较特殊的,可以再看看下面的
<div class="content contentone"> <p class="paragraphone">111</p> <p class="paragraphtwo">222</p> </div>
<div class="content contentone"> <div class="paragraph paragraphone">111</div> <div class="paragraph paragraphtwo">222</div> </div>
应用上面的理论,p总能告诉你这是一个段落,更有助于开发阅读,而div不具有啥语义,但也没啥问题,所以建议第一个例子而你写第二个例子也没错
W3C新标准中有对自定义标签的支持,如果用户浏览器都能与时俱进,那这个能将语义化提高一个量级
<m-content> <u-paragraph class="one">111</u-paragraph> <u-paragraph class="two">222</u-paragraph> </m-content>
所以,关于如何写出让多人认可的HTML/CSS,不妨按照我刚才说的那两句试一试,你会觉得爽爆了这件事儿