seo网页前端怎么才算规范

在网站建设和持续维护的过程中，有必要与程同学合作开发，那么什么样的前端代码才算标准，下面就举几个例子给大家。

1.尽量减少HTTP请求的数量，必须权衡——。

图片(如csssprites、内置图片使用数据)和CSS、JS合并非常重要，但要考虑合并文件的体积。

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

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

最理想的方法是把所有的内容资源放在同一个域下，这样只需要一次dns查找就可以访问整个网站，这样可以提高其他的高性能。但是理想总是理想的，上述理想的做法会带来另一个问题，那就是因为这些资源都在同一个域中，而http/1.1推荐客户端对于每个域只有一定程度的并行性(其建议是2)，那么在下载资源时就会出现排队现象，会降低性能。显然是为了最大化并行下载。

因此，折中的办法是：建议在一个网站中使用至少2个域但不超过4个域来提供资源。我认为这个建议非常合理，值得我们在工程实践中应用。

3.减少DOM元素的数量。

结构合理，语义化，减少代码，使用语义上更合适或者更合适的标签，要考虑大量DOM元素中循环的性能开销。http://summerflowers.blog.51cto.com/5202033/1784481/

4.使用内容分发网络。

这里我们可以关注三种类型的CDN实现：镜像、缓存、专线、智能路由器和负载均衡；

http://zhanzhang.baidu.com/college/articleinfo?id=884

5.避免空的src和href等无意义的链接。

注意带有这两个属性的标签，比如alink、script、img、iframe等。尽量不要在代码中有空链接和无意义的链接。

6.为文件头指定过期或缓存控制，并合理使用缓存。

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

7.配置ETags。

Entitytags(ETags)是web服务器和浏览器用来判断浏览器缓存中的内容是否与服务器中的原始内容相匹配的机制(“entity”就是所谓的“内容”，包括图片、脚本、样式表等。)，比上次修改日期更灵活，并且文件在单位时间内已经修复多次。Etag通过整合Inode(文件的索引节点数)、MTime(修改时间)和Size可以准确判断，避免了UNIX记录MTime只能精确到秒的问题。服务器集群使用时，可以取最后两个参数。使用ETags降低网络应用的带宽和负载。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文件的并行下载更有意义

　　 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造成蜘蛛的无法访问。