乌徒帮技术范技术中心网站性能 › 关于网页源码结构的一点想法

关于网页源码结构的一点想法

分类:网站性能

网页制作者在第一期制作网页时,对整个页面的布局和架构应该认真考量。否子戈认为网页源码结构应该遵循三个要点:不搞破坏、有利用户体验、有利搜索引擎收录。在这三点的基础上,网页源码的执行性能非常重要,甚至关系着网站的生死。

网站代码的重构对于本能的体验没有太大的影响,用户不会发现网页上有多大的变化。然而,通过对网站代码的重构,提高代码的性能,将大大优化网页的速度、顺序、用户动作的效果,间接提升着用户体验。那么如何尽量设计较为优秀的网页源码结构呢?

一、不搞破坏

所谓不搞破坏,是指代码符合规范,不投机取巧,不转标准空子,这是开发者的道。

从源码本身来讲,由于不同团队之间的习惯和约定不同,这个规范也就很有差异,例如对变量的声明,有些人习惯用$作为变量的开始,而有些人习惯用下划线_,在可控的范围内,代码认为这些变量(字符串)合法。在这一点上,标准体现为通读性,即程序猿拿过来就能读懂。然而在php中,<?=?>和<?php echo ?>却是两码事,我在早期的时候喜欢用前者,直到碰上了不支持短代码的主机。何为标准?这一点上体现为较为传统的兼容性,即用传统的方式撰写的代码可以适应不同环境下的情况,不使用具有特殊性的代码,即使你可以通过某种方法进行设置。

开发者不能人为的去破坏传统的标准,而应该恪守原有的基础上,创造出新的传统。早期我曾经尝试过,将<script>标签写在</html>标签之后,这样一来,我可以在任何页面调用完footer.php之后,接着在写一些javascript代码。然而这样的做法显然是有问题的,虽然网页能够正常渲染,脚本代码能够正常运转,但从DOM的执行和网页的结构上讲,将<script>扔到<html>标签对之外都不是一个好的创意,它破坏了html代码结构本身的优雅和规则。谷歌工程师中不乏高度优秀的网页优化人才,然而很意外的是,他们其中有人正是利用这种不守规矩的方法,让网页提前加速,用iframe的方法将加速器得到回调,虽然这样做使网页的速度加快了很多,然而如果将这种方法推广至所有开发者,我认为不是一个明智的选择。

二、有利于用户体验

我所隐含的意思,是指忽视程序猿或小偷们的感受,让网页的源代码见鬼去吧。任何机构在开发网站时,都会留下自己的源码文件,绝对不会以浏览器出来的源码为准。相反,用户们对网站的看法才是我们最关心的。这涉及到很多问题,网页的表现形式、打开速度、执行效率、死机频率、动作的华丽程度、用户体验时间轴等等,它们将决定用户对网页的最终评价。

举一个很简单的例子,百度建议将所有的js文件链接在网页的底部,从而加快网页打开的速度。然而我发现几乎所有的社交网站的网页在头部都会聚集很多脚本,它们或者也是为了加快网页的打开速度,或者是为了在用户看到全部的网页之前就提前对网页元素和动作进行处理,让用户在看到网页的时候就能进行触发活动。没错,任何建议都是相对的,以前乌徒帮也是将脚本放在网页的底部,但是为了引入html5,在顶部加入了兼容代码。而经过考虑后,我将所有的js库即加速代码制作为一个文件放在了头部,同时增加了一个头部的执行文件,这样,网页在打开时,即能享受到脚本对元素的控制。

三、有利于搜索引擎优化

随着国内外对搜索引擎优化的重视,普通网站也必须将这个因素考虑在内,如果你希望你的声音不被埋没的话,必须这么做,这也是对信息化时代负责的重要表现。针对于诸如百度、谷歌一类的关键字检索引擎,网站源码结构尽可能的适应搜索引擎蜘蛛对网页信息的挖掘,将有用的信息放在前面,无用的信息放在后面,最好站内站外的锚链接,增加网页关键字和描述元素,增加网页内的标签(tag),告诉搜索引擎本站是一个正规的友好的内容创造场所,而非一个垃圾信息制造厂。

真的SEO之外,还有一项叫SMO,社会化优化。网页设计中,还需要用户了解时下流行的社交代码,考虑到网站会用到的社交元素,留好接口,一旦网站需要增加社会化功能的时候,网页内的接口能迅速派上用场。例如我在撰写wordpress主题时,常常会留下wp-connect插件的函数接口,以期在用户想要拥有社会化功能时,可以派上用场。

四、执行效率的提高

在这一点上,我的提示就是:优化,优化,再优化。第一,代码的执行消耗更少的服务器资源;第二,执行的速度更快,渲染更快;第三,用户能深刻体会到网站的性能良好。我们可以通过各种方式来进行优化,最基本的是,创造更为优化的代码逻辑。在php中让你的程序代码执行起来更快,查找数据库更快,循环和判断更高效;在javascript中让代码迅速定位,找到更准确的定位和对象操作。总之,先让你的代码跑起来!

在此基础上,你需要再来考虑如何输出HTML代码,怎样才能让网页的源码结构成为网站的优势,以及如何才能找到更为有效的处理和用户打交道的部分。

网页源码结构并非只是撰写html代码和css,让用户可以看到一个有颜色有布局的页面那么简单。本文虽然只是说了一些甚难理解的粗线条想法,然而在实际构建中,网页源码结构确凿是程序要需要花大把时间去思考的事。

填写个人信息,赶快回复吧!