高性能网站前端开发规范—平湖中商港科技有限公司V1.0

1、高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 1 页/共 16 页版本号文件名称制作人备注V1.0高性能网站前端开发规范曾祥瑚平湖中商港科技有限公司高性能网站前端开发规范高性能网站前端开发规范 V1.0V1.0中国商务港华东总部中国商务港华东总部平湖中商港科技有限公司平湖中商港科技有限公司时间： 2011 年 07 月高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 2 页/共 16 页目目 录录目目 录录.2 2一、为什么要遵循规范.3二、目标.3三、受众.3四、通用规范.31、文件与目录命名规范.32、文件编码约定.33、id 和 class

2、 命名规范.44、文件存储约定.45、文件压缩.46、使用外部 JS 和 CSS.47、兼容性规范.5五、HTML 规范.5HTML 语言规范.5HTML 元素.7六、JAVASCRIPT规范.8JavaScript 语言规范.8JavaScript 编码风格.9七、CSS 规范.111、样式文件命名规范.112、选择器运用规范.123、CSS 样式命名规范 .124、CSS 书写顺序 .145、CSS Sprite.146、不使用滤镜.157、尽量不使用 hack.158、背景平铺规范.159、简写.15高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 3 页/共 16

3、 页一、为什么要遵循规范一、为什么要遵循规范国外专家对 Alexa 排名较前的一些网站做过测试，发现浏览一个网站的总耗时一般 80%-90%花在了前端，Web 的性能 80%-90% 有前端决定，并且网站对搜索引擎的友好程度，也主要取决与前端。因此，我们必须深入研究前端页面的渲染规则及搜索引擎收录规则，并以此为依据，设置相关的规范，以开发出符合 W3C 规范、搜索引擎友好、性能极高的网站。二、目标二、目标开发符合 W3C 规范、搜索引擎友好、高性能的网站。三、受众三、受众开发团队中的所有前端工程师。四、通用规范四、通用规范1、文件与目录命名规范、文件与目录命名规范1) 文件名一律小写，必须是英

4、文单词或产品名称的拼音，考虑到 seo，多个单词用连字符（-）连接，而不用下划线，google 不认同“_”为连字符。 只能出现英文字母、数字和连字符，严禁出现中文。2) 出现版本号时，需要用字母 v 作为前缀，小版本号用点号（.）隔开，比如 global-v1.js 或 common-v2.2.js。3) 该命名规范适用于 html, css, js, swf, php, xml, png, gif, jpg, ico 等前端维护的所有文件类型和相关目录。4)js 和 css 压缩文件，统一以.min 结尾，比如源码文件为 style.css 和 common-v2.2.js，压缩后则为 s

5、tyle.min.css 和 common-v2.2.min.js 。2、文件编码约定、文件编码约定前端开发涉及的所有文本文件视后台程序而定，推荐使用 utf-8。高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 4 页/共 16 页3、id 和和 class 命名规范命名规范1) id 和 class 的命名总规则为：内容优先，表现为辅。首先根据内容来命名，比如 main_nav. 如果根据内容找不到合适的命名，可以再结合表现来定，比如 skin_blue, present_tab, col_main.2) id 和 class 名称一律小写，多个单词用下划线连接，比如

6、 recommend_presents.3) id 和 class 名称中只能出现小写的 26 个英文字母、数字和下划线（_） ，任何其它字符都严禁出现。4) id 和 class 尽量用英文单词命名 。确实找不到合适的单词时，可以考虑使用产品的中文拼音，比如 wangwang, dating. 对于中国以及特色词汇，也可以使用拼音，比如 xiaobao, daogou. 除了产品名称和特色词汇，其它任何情况下都严禁使用拼音。5) 在不影响语义的情况下，id 和 class 名称中可以适当采用英文单词缩写，比如 col, nav, hd, bd, ft 等，但切忌自造缩写。6) id 和 cl

7、ass 名称中的第一个词必须是单词全拼或语义非常清晰的单词缩写，比如 present, col.4、文件存储约定、文件存储约定1)网页：根据频道的文件夹进行存储,例:商家报价频道,项目内对应的目录为/price/,如果创建的网页是商家报价频道的,该网页就必须存储在/price/目录下面.2)CSS：公共文件存储在/css/common/目录下;网页私有 CSS 文件需要存储到网页文件相对应的/CSS/的路径下,例:商家报价频道首页/css/ price/index.css3)Image：图片文件的存储与 CSS 文件的存储规则一样.4)Js：Js 文件的存储跟 CSS 类似.5、文件压缩、文件

8、压缩Js 文件和 css 文件的发布文件均用“JsCompressor”工具进行压缩存储。6、使用外部、使用外部 JS 和和 CSS1)全部使用外联样式或的方式。2)所有 CSS 外联样式均放在 head 中,JS 外联样式放在网页的底部。高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 5 页/共 16 页3)禁止使用import mystyle.css的方式，使用这种方式的结果是先加载网页再加载 css。7、兼容性规范、兼容性规范页面应完全兼容 IE6+和 Firefox 浏览器，及常用的分辨率。五、五、HTML 规范规范HTML 语言规范语言规范1、基本规范、基本规

9、范1)使用符合语义的标签书写 HTML 文档，选择恰当的元素表达所需的含义；2)元素的标签和属性名必须小写，属性值必须加双引号；3)元素嵌套遵循 (X)HTML Strict 嵌套规则，推荐使用 Firefox 插件 HTML Validator 进行检查；4)正确区分自闭合元素和非自闭合元素。非法闭合包括：.、，非法闭合会导致页面嵌套错误问题；5)尽量少用 frame；6)链接、按钮必须加上 title 属性；7)使用的地方不仅都得加上 title，同时加上一段图片上的文字，如中国钢铁交易网,并将 h1 的 text-intent:-5000px。8)尽量不用 table tr td。2、文

10、档模板、文档模板 page高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 6 页/共 16 页 页头 主体 页尾 3、DOCTYPE页面文档类型统一使用 HTML5 DOCTYPE。代码如下：4、编码、编码声明方法遵循 HTML5 的规范。5、注释、注释建议对超过 10 行的页面模块进行注释，以降低开发人员的嵌套成本和后期的维护成本。例如： . 高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 7 页/共 16 页HTML 元素元素1、结构性元素、结构性元素1)p 表示段落。只能包含内联元素，不能包含块级元素;2)div 本身无特殊含义，可用于布局

11、。几乎可以包含任何元素;3)br 表示换行符;4)hr 表示水平分割线;5)h1-h6 表示标题。其中 h1 用于表示当前页面最重要的内容的标题;6)blockquote 表示引用，可以包含多个段落。请勿纯粹为了缩进而使用 blockquote，大部分浏览器默认将 blockquote 渲染为带有左右缩进;7)pre 表示一段格式化好的文本;2、头部元素、头部元素1)title 每个页面必须有且仅有一个 title 元素;2)base 可用场景：首页、频道等大部分链接都为新窗口打开的页面;3)link link 用于引入 css 资源时，可省去 media(默认为 all) 和 type(默认

12、为text/css) 属性;4)style type 默认为 text/css，可以省去;5)script type 属性可以省去; 不赞成使用 lang 属性; 不要使用古老的这种 hack 脚本, 它用于阻止第一代浏览器（Netscape 1 和 Mosaic）将脚本显示成文字;6)noscript 在用户代理不支持 JavaScript 的情况下提供说明;3、文本元素、文本元素1)a 存在 href 属性时表示链接，无 href 属性但有 name 属性表示锚点;2)em,strong em 表示句意强调，加与不加会引起语义变化，可用于表示不同的心情或语调; strong 表示重要性强调

13、，可用于局部或全局，strong 强调的是重要性，不会改变句意;3)abbr 表示缩写;4)sub,sup 主要用于数学和化学公式，sup 还可用于脚注;5)span 本身无特殊含义;高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 8 页/共 16 页6)ins,del 分别表示从文档中增加(插入)和删除4、媒体元素、媒体元素1)img 请勿将 img 元素作为定位布局的工具，不要用他显示空白图片; 必要时给 img元素增加 alt 属性;2)object 可以用来插入 Flash;5、列表元素、列表元素1)dl 表示关联列表，dd 是对 dt 的解释; dt 和 dd

14、 的对应关系比较随意：一个 dt 对应多个 dd、多个 dt 对应一个 dd、多个 dt 对应多个 dd，都合法; 可用于名词/单词解释、日程列表、站点目录;2)ul 表示无序列表;3)ol 表示有序列表, 可用于排行榜等;4)li 表示列表项，必须是 ul/ol 的子元素;6、表单元素、表单元素1)推荐使用 button 代替 input，但必须声明 type;2)推荐使用 fieldset，legend 组织表单3)表单元素的 name 不能设定为 action, enctype, method, novalidate, target, submit 会导致表单提交混乱六、六、JavaSc

15、ript 规范规范JavaScript 语言规范语言规范1)声明变量时，必须加上 var 关键字。2)尽量减少全局变量的使用。3)语句总是以分号结尾。4)不要在块内声明函数。5)标准特性优于非标准特性（如果类库有提供，优先使用类库中的函数） 。6)不要封装基本类型。7)只在解析序列化串时使用 eval() 。高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 9 页/共 16 页8)不使用 with 。9)减少使用 continue 和 break 。10)仅在函数内使用 this 。11)使用 Array/Object 直接量，避免使用 Array/Object 构造器。

16、12)禁止修改内置对象的原型。JavaScript 框架规范框架规范1)统一使用 jquery 框架。2)用到 web 编辑器时，统一使用 ckeditor、ckfinder。3)需要用到简单 web 编辑器时，使用淘宝前端工程师写的 kissy_editor。4)若网站规模较大，使用淘宝的 seajs.js 框架对 js 按需加载。5)Jquery 等框架通过 Google CDN 的方式引入，以加快加载速度，并减轻服务器的压力。各个框架的调用地址在 http:/ dojo 框架并模块化按需加载。JavaScript 编码风格编码风格1、行与缩进、行与缩进1.1、语句行、语句行1)尽可能不要

17、让每行超过 120 个字符;2)语句必须以分号作为结束符, 不要忽略分号;1.2、空格、空格1)数值操作符(如, +/-/*/% 等)两边留空;2)赋值操作符/等价判断符两边留一空格;3)for 循环条件中, 分号后留一空格;4)变量声明语句, 数组值, 对象值及函数参数值中的逗号后留一空格;5)空行不要有空格;6)行尾不要有空格;7)逗号和冒号后一定要跟空格;高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 10 页/共 16 页8)点号前后不要出现空格;9)空对象和数组不需要填入空格;10)函数名末尾和左括号之间不要出现空格;1.3、空行、空行1)逻辑上独立的代码块使

18、用空行分隔;2)文件末尾留 12 个空行;3)不要吝啬空行。尽量使用空行将逻辑相关的代码块分割开，以提高程序的可读性。1.4、缩进、缩进1) 以 4 个空格为一缩进层次;2) 变量声明:多个变量声明时, 适当换行表示;参照 var 关键字, 缩进一层次;3) 函数参数:函数参数写在同一行上;传递匿名函数时, 函数体应从调用该函数的左边开始缩进;4) 数组和对象初始化时:如果初始值不是很长, 尽量保持写在单行上;初始值占用多行时, 缩进一层次;对象中, 比较长的变量/数值, 不要以冒号对齐;5) 二元/三元操作符:操作符始终跟随前行;实在需要缩进时, 按照上述缩进风格;6) 表达式中的缩进同变量

19、声明时;2、括号、括号原则: 不要滥用括号, 必要时一定要使用.1)if/else/while/for 条件表达式必须有小括号;2)语句块必须有大括号;3)一元操作符(如 delete, typeof, void)或在某些关键词(如 return, throw, case, new) 之后, 不要使用括号;高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 11 页/共 16 页3、变量、变量1)变量如有较广的作用域, 使用全局变量; 如果是在类中, 可以设计成为一个类的成员;2)函数体中, 多个局部变量集中在一起声明, 避免分散;3)适当延迟变量的初始化;4、字符串、字符

20、串1)JS 代码中, 单行字符串使用单引号;2)JS 代码中, 多行字符串使用 + 拼接形式, 不要使用 拼接;3)HTML 中 Element 属性, 使用双引号;5、命名规范、命名规范原则： * 尽量避免潜在冲突; * 精简短小, 见名知意;1) 普通变量统一使用驼峰形式;2) 常量使用全部大写, 多个单词以下划线分隔;3) 枚举量, 同常量;4) 私有变量, 属性和方法, 名字以下划线开头;5) 保护变量, 属性和方法, 名字同普通变量名;6) 方法和函数的可选参数, 名字以 opt_ 开头, 使用 param 标记说明;7) 方法和函数的参数个数不固定时:可添加参数 var_args

21、为参数个数;取代使用 arguments;使用 param 标记说明;8) Getter/Setter 命名:以 getFoo/setFoo(value) 形式;布尔类型使用 isFoo()/hasFoo()/canDo()/shouldDO() 也可;9) 命名空间:为全局代码使用命名空间, 如 sloth.*;外部代码和内部代码使用不同的命名空间;10) 重命名那些名字很长的变量, 不要在全局范围内创建别名, 而仅在函数块作用域中使用;11) 文件名应全部使用小写字符, 且不包含除 - 和 _ 外的标点符号;12) 临时的重复变量建议以 i, j, k, ., 命名;高性能网站前端开发规范

22、 V 1.00 更新时间 2011-07-28第 12 页/共 16 页七、七、CSS 规范规范1、样式文件命名规范、样式文件命名规范主要的 style.css通用的 commom.css列表的 list.css内容页的 content.css布局，版面 layout.css专栏 columns.css主题 themes.css2、选择器运用规范、选择器运用规范CSS Selectors 共有以下 9 种，按性能从高到低如下：1)ID 选择符 #box 2)类选择符 .box 3)类型选择符 div 4)相邻兄弟选择符 h4 + #pics 5)子选择符 #pics li 6)后代选择符 .b

23、ox a 7)通配选择符 * 8)属性选择符 href=”#pic” 9)伪类和伪元素 a:hover为编写高效的 CSS 选择符，我们在运用选择器的时候应注意：1)避免使用通配规则；2)不要限定 ID 选择符，没有必要；3)让规则越具体越好，不写像 ul li a 这样的长选择符，最好是直接为 a 创建一个类并加在适当的元素上；4)避免使用后代选择符；5)使用子选择符，让 css 可读性更强；6)依靠继承，了解哪些属性是可以继承而来的，然后避免对这些属性重复指定规则；3、CSS 样式命名规范样式命名规范1)常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。高性能网站

24、前端开发规范 V 1.00 更新时间 2011-07-28第 13 页/共 16 页头部：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录：login标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu搜索：sear

25、ch友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 14 页/共 16 页2） 对网站中的按钮，若按钮背景统一，只是字数有不一样，那么根据按钮上的字数来定义按钮的样式，如 button2、button3 分别表示两个字，三个字的按钮。Pading、m

26、argin类似，如离顶部 10px 写成.pt10、.mt10。4、CSS 书写顺序书写顺序这里推荐先写显示属性，再写自身属性，再写文字属性；并不代表非得按这个顺序写，但这种写法可以使 css 结构更清晰易读，修改起来比较方便。而且在团队项目中能更好地提高效率。/显示属性displaylist-stylepositionfloatclear/自身属性widthheightmarginpaddingborderbackground/文本属性colorfonttext-decoration高性能网站前端开发规范 V 1.00 更新时间 2011-07-28第 15 页/共 16 页text-ali

27、gnvertical-alignwhite-spaceother textcontent5、CSS Sprite将相关的背景图片合并到单个 PNG8 图片里面，并通过 background-position 属性来使用这个图片，这里可以借助“CssBgImageMergeTool”来快速合并和定位。CSS Sprites 可以大大减少 HTTP 请求的数量，节省带宽并加快页面加载。同时，可以避免图片闪烁，例如，如果系统或网速比较慢的时候，当鼠标放到一个按钮时加载另外一个图片就可能引起闪烁。但是也应注意一下几点：1) 让小图片在 PNG8 图片上水平排版，这样会比竖直排版稍小。2) Spirite 中把颜色较近的组合在一起可以降低颜色数，理想状况是低于 256