web前端开发优化规范及其总结

1.css外联文件或内嵌内容放页面头部；

2.页面使用utf-8编码格式：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

3.title标签放到编码声明后，防止utf-8编码导致ie内容空白问题。如：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>标题</title>

4.脚本放到外联JS文件中，再通过<script src='file.js' ></script> 引用此脚本文件。

5.样式定义和结构分离，避免将样式直接写到元素属性中。如错误的写法：<div style="color:red;height:120px;width:10px">this is hot</div>

6.避免将java标签和js代码交织在一起使用，不利于后期维护，也不符合优化规范。

7.避免在页面中引用js文件，只能在页面头部或者底部引用js文件；

8.避免在页面中出现零碎的js代码定义；

9.避免出现无意义注释，注释编写要逻辑清晰、易读易懂。如：//这是一个对象

10.简化复杂代码，让代码易读、易维护。

11.合并的JS文件以减少HTTP请求数，去掉冗余代码。除了公共JS库外，当前页面的所有JS代码放在以当前模块命名的JS文件中。

12.使用数据对象来集中管理后台初始化的数据；

13.使用innerHTML替代append，append性能低于innerHTML；

14.避免创建一个DOM就append一个DOM，改方法性能很低，建议直接构造成HTML后一次性append。

15.避免直接使用document.write()函数。建议使用.innerHTML=””或者jQuery中的.HTML("")方法替代。

16.两个在不同的子域的页面相互操作的时候，必须将两个页面的域名设置为相同的顶级域名，如：document.domain="paipai.com";。

17.尽量减少页面的请求数量，如合并js文件、合并小图片、合并css、去掉不必要的请求。

18.建议所有资源文件（图片、脚本、样式）启用客户端缓存机制。

19.建议使用资源域名，避免资源文件上传cookie信息，影响上行速度。

20.对页面中的元素使用jQuery事件绑定，避免在元素中handcode事件处理函数（如：<a onclick='return goPage(0);'>button</a>）。应采用jQuery来绑定事件，如：$$('body').click(function(){});

21.页面ready状态时开始操作结构和绑定事件等操作，不推荐使用onload事件来判断页面加载状态。（特殊情况除外)   jQuery语法：$$(function(){}); 或$$(document).ready(function(){});

22.IE6只能同步打开2个HTTP请求（IE7的HTTP1.1是4个请求、IE8有6个请求），IE修改请求数需要修改注册表。Firefox可以设置其最大请求数，在地址栏输入about:config  修改首选项名称network.http.pipelining.maxrequests，默认为4.

IE各版本请求数说明：

Version                                                           Internet Explorer 7 and earlier 4   Internet Explorer 8

HTTP 1.0 server (broadband connection)      4                                                    6

HTTP 1.1 server (broadband connection)      2                                                    6

HTTP 1.0 server (dial-up connection)            4                                                    4

HTTP 1.1 server (dial-up connection)            2                                                    2

为提高页面请求数，除修改请求数配置外，还可以在页面中使用iframe来实现。一个iframe相当于一个页面，因此可获得双倍的请求数