在网站搭建和不断维护的过程中需要与程序猿同学互相配合开发，那么到底怎么样的前段代码才算规范，这里给大家一些例子。

1、尽量减少HTTP请求个数——须权衡

合并图片（如csssprites，内置图片使用数据）、合并CSS、JS，这一点很重要，但是要考虑合并后的文件体积。

2、根据域名划分页面内容减少DNS查找次数

我们需要权衡减少DNS查找次数和保持较高程度并行下载两者之间的关系。

理想的方法就是将所有的内容资源都放在同一个域(domain)下面，这样访问整个网站就只需要进行一次dns查找，这样可以提其他高性能。但理想总归是理想，上面的理想做法会带来另外一个问题，就是由于这些资源都在同一个域，而http/1.1中推荐客户端针对每个域只有一定数量的并行度（它的建议是2），那么就会出现下载资源时的排队现象，这样就会降低性能。很显然，是大限度地实现平行下载。

所以，折衷的做法是：建议在一个网站里面使用至少2个域，但不多于4个域来提供资源。我认为这条建议是很合理的，也值得我们在项目实践中去应用。

3、减少DOM元素个数

结构合理、语义化、减少代码，使用更适合或者在语意是更贴切的标签，要考虑大量DOM元素中循环的性能开销

4、使用CDN（内容分发网络）

这里可以关注CDN的三类实现：镜像、高速缓存、专线，以及智能路由器和负载均衡；

5、避免空的src和href和其他无意义的链接

留意具有这两个属性的标签如alink，script，img，iframe等；代码尽量不要出现空链接和无意义的链接

6、为文件头指定Expires或Cache-Control，合理使用缓存。

区分静态内容和动态内容，避免以后页面访问中不必要的HTTP请求。

7、配置ETags

Entitytags（ETags）（实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制（“实体”就是所说的“内容”，包括图片、脚本、样式表等），是比last-modifieddate更更加灵活的机制，单位时间内文件被修过多次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能到秒的问题。服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载。zhanzhang.baidu.com/college/articleinfo?id=487

8、使用gzip压缩内容

Gzip压缩所有可能的文件类型以来减少文件体积

9、把CSS放到顶部

实现页面有秩序地加载，这对于拥有较多内容的页面和网速较慢的用户来说更为重要，同时，HTML规范清楚指出样式表要放包含在页面的区域内；

10、把JS放到底部

HTTP/1.1规范建议，浏览器每个主机名的并行下载内容不超过两个，而问题在于脚本阻止了页面的平行下载，即便是主机名不相同

11、避免使用CSS表达式

CSS表达式是动态设置CSS属性的一种方法。这个过程非常耗时，因为每次网页展示，滚动或者调整大小，抑或者用户移动鼠标时，表达式都会被解析。即使网页已经加载完毕，代码被重新解析的需求也会大大降低页面的速度，这样就会直接影响网站的用户体验。移除所有的表达式会整体上提高网页的性能。

12、避免错误跳转

为了确保“后退”按钮可以正确地使用，使用标准的3.XXHTTP状态代码；同域中注意避免反斜杠“/”的跳转；跨域使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）

13、使AJAX可缓存使用GET来完成AJAX请求

利用时间戳，更精巧的实现响应可缓存与服务器数据同步更新。当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。在url小于2K时使用GET获取数据时更加有意义。

14、尽早刷新输出缓冲

尤其对于css，js文件的并行下载更有意义

SEO前段规范

15、延迟加载和预加载

确定页面运行正常后，再加载脚本来实现如拖放和动画，或者是隐藏部分的内容以及折叠内容等。延时加载时核心内容需要代码可见，尤其是资源url。关注下无条件加载，有条件加载和有预期的加载。

16、精简代码

对于一个网站文件大小应该有限制。百度建议HTML文件不要超过128KB。Goolgle及时建议文件限制在100KB以下，页面上连接数在100个以下。常见的精简代码如下：

1)使用css定义字体、颜色、尺寸及页面排版。有很多网站使用css，又在课件文字部分使用style或font再定义一遍字体、尺寸等，这完全是冗余的。

2)使用外部文件Css和js采取外部调取方式。

3)减少或删除代码中的注释。

4)减少使用嵌套表格。

5)导航中使用文字连接，不适使用JS或是flash。

6)使用文字而不是flash、图片、Javascript等来显示重要的内容或链接。

7)如果必须使用Flash制作网页，建议同时制作一个供搜索引擎收录的文字版，并在首页使用文本链接指向文字版。

8)Ajax等搜索引擎不能识别的技术，只用在需要用户交互的地方，不把希望搜索引擎“看”到的导航及正文内容放到Ajax中。

不使用frame和iframe框架结构，通过iframe显示的内容可能会被百度丢弃。

17、符合w3c标准

1)停止使用Xhtml废弃的元素，Xhtml代码需要全部小写

2)所有图片必须包含alt属性

3)所有标签必须关闭

4)所有的标签属性必须在引号内

5)所有的特殊字符必须要编码

18、语义标记

1)合理使用H1-H6标签，h1标签一个网页多只出现一次，表示当前网页核心内容，尽量不要跟其他网页重复。h2标签可以出现多个，可是是网页的小标题，代表不同模块的内容。

2)加粗使用strong和em

3)css标记尽量包含语义，比如headerfootnavsidebar等

4)尽量不使用图片热点链接，一定要使用也要增加对应的文字链接

19、搜索引擎作弊规避

1)禁止css中使用display:none隐藏文本和链接

2)交互设计中隐藏文本和链接要确保使用动态技术（例如js）后内容仍然代码可见。

3)不要使用和背景色相同的文本和链接

4)不使用js制作网站导航和目录

5)页面不存在大量重复的titilekeywordsdescription

20、避免蜘蛛陷阱

1)Flash

网页中的某一小部分使用flash增强视觉效果没问题，但是尽量避免首页只有一个大的flash文件，如果flash效果是必须的话需要在首页加上一个通往html版本的链接（此链接在flash文件之外的html代码中）。

2)SessionID

通常建议跟踪用户访问应该使用cookies而不要生成SessionID。或者程序判断是搜索引擎蜘蛛还是普通用户，如果是搜索引擎蜘蛛，则不生成SessioID。

3)各种各样跳转

301转向：搜索引擎推荐的，用于网址URL更改的转向，可以将权重从旧网址转移到新网址。

尽量避免使用除301之外的其他跳转或转向（meta刷新、js跳转、flash跳转等），非要使用其他转向的时候，跳转时间应该设置得长一点，而不能设置为零。框架结构慎重使用，和flash一样尽量不用。

4)动态URL

尽量避免动态URL，生成静态URL，至少是伪静态。

5)JS链接

网站上必须使用用简单标准的HTML链接，尤其是导航系统。可以使用CSS替换。

6)要求登录

用户后台部分，可以使用要求登录功能避免蜘蛛的抓取。

7)强制使用Cookies

搜索引擎蜘蛛相当于一个禁用了Cookies的浏览器，尽量避免强制使用Cookies造成蜘蛛的无法访问。