网页代码布局必须遵循不严格顺序
作者：秋了秋 发表时间：2014年09月29日
为什么说要遵循“不严格”顺序，因为代码顺序在某些网页中混乱的颠三倒四也不影响前端外观和功能，但在某些网页一点点的顺序颠倒都会造成致命错误，这就是其“不严格”性，即非绝对性，但是又具有重要性。
对于新手来说，经常会遇到没有产生相应效果的问题。就是说，代码没有检查出问题，但就是没有执行显示应有的效果。原因就出在加载顺序上面。比如jQuery是一个比较常用的JavaScript库。你编写的JavaScript代码以及调用的js文件，都需要基于jQuery库，所以应该在所有JavaScript代码之前，先引入jQuery库。浏览器先把库下载完了，才会识别后面的依赖这个库的代码实现相应的功能。同样的，激活使用某个js代码，也需要放在jQuery库的后面才会有效。
除了jQuery库要置顶以外，其它内部js也要遵循严格的加载顺序，对于非专业的网页设计者来说，往往会忽略顺序问题，他们给别人的教程无非就是笼统地把这段代码放到<head></head>之间或者<body></body>之间，然而有些时候就会阴差阳错地出现一些异常现象，神不知鬼不觉，这种异常现象却总是误导我们去排查代码的错误，其实代码一点没错，就错在加载顺序上。有些js如果代码顺序颠倒极容易产生冲突或者失效问题，虽然不是绝对，但js多了概率比较大，需要分析具体的js代码属性。总之一句话，代码不是随随便便放的，为了后续长久的维护，必须谨慎安置。
除了js，其它代码也一样的，php，html，css每一样都有加载顺序，这个加载顺序，由浏览器说了算。通常地，一个网页解析顺序都是从头至尾，即从上到下。搜索引擎同样也是遵循这个原则，所以通常把网页的重要信息放在头部，比如说title，网页声明<！DOCTYPE html>，meta，link等。html加载并不是把里面所有文件都下载完才呈现出一个完整的页面，它的加载类似于流媒体的加载，是边呈现边加载的。纵使是单文件也遵循这个原则，这就是我们看到网页中的大图片从上到下一点点慢慢渐显的样子。之前我网站加上的音乐播放器出现异常情况就是html代码安置顺序问题，表面正常，实质是有问题，让你总是觉得有bug存在。其实不然，当我调试一下代码安置位置，立马bug全无，因为有js读取这段代码，js读取顺序也是从网页至上而下寻找id，如果前面有什么敏感代码干扰的话，就会出现非常异常的异常现象。
css的顺序问题也会让很多新手摸不着头脑。每个id样式的控制都遵从唯一性，即如果你在css文件中写了某个id的样式，后续因为忘记了又在后面加上了一个不一样的样式，那么前面的样式就会被后面的样式所覆盖。定义一个超链接的颜色，link 、：visited 、：hover、：active 这四个伪类选择器，从名称就可以看出，控制的状态分别是：默认显示、访问过后、鼠标移动上去、点击激活。有时候会出现一些意外情况，例如：同时设置了 ：visited 和 ：hover 的样式，但一旦超链接访问后，hover 的样式就不出现了等。这是因为，这四个伪类选择器对 a 元素定义的时候，是有一个顺序的。如果不按照这个顺序，就会出现一些意外情况，让你达不到想要的效果。正确的顺序应该是这样的：a:link{}，a:visited{}，a:hover{}，a:active{}。