前端工程师-前端工程师高性能开发规范

1、.：.；高性能网站前端开发规范V 1.00更新时间 2021-07-28版本号 V1.0文件称号制造人 曾祥瑚备注 平湖中商港科技高性能网站前端开发规范高性能网站前端开发规范 V1.0中国商务港华东总部 中国商务港华东总部平湖中商港科技 时间： 2021 年 07 月第 1 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-28目目录 录 2一、为什么要遵照规范 3 二、目的 3 三、受众 3 四、通用规范 31、文件与目录命名规范 3 2、文件编码商定 3 3、id 和 class 命名规范 4 4、文件存储商定 4 5、文件紧缩 4 6、运用外部 JS 和 CSS

2、 4 7、兼容性规范 5五、HTML 规范 5HTML 言语规范 5 HTML 元素 7六、JAVASCRIPT 规范 8JavaScript 言语规范 8 JavaScript 编码风 9七、CSS 规范 121、款式文件命名规范 12 2、选择器运用规范 12 3、CSS 款式命名规范 12 4、CSS 书写顺序 14 5、CSS Sprite 15 6、不运用滤镜 15 7、尽量不运用 hack 15 8、背景平铺规范 15 9、简写 15第 2 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-28一、为什么要遵照规范 为什么要遵照规范国外专家对 Alexa

3、排名较前的一些网站做过测试，发现阅读一个网站的总耗时普通 80%-90%花在了前端， Web 的性能 80%-90% 有前端决议， 并且网站对搜索引擎的友好程度， 也主要取决与前端。因此，我们必需深化研讨前端页面的渲染规那么及搜索引擎收录规那么，并 以此为根据，设置相关的规范，以开发出符合 W3C 规范、搜索引擎友好、性能极高的网站。二、目的开发符合 W3C 规范、搜索引擎友好、高性能的网站。三、受众开发团队中的一切前端工程师。四、通用规范 1、文件与目录命名规范 、文件与目录命名规范1) 文件名一概小写，必需是英文单词或产品称号的拼音，思索到 seo，多个单词用连 字符-衔接，而不用下划线，

4、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，紧缩后那么为 style.min.css 和 commo

5、n-v2.2.min.js 。2、文件编码商定 、前端开发涉及的一切文本文件视后台程序 而定，引荐运用 utf-8。第 3 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-283、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 等，但切忌自造缩写

7、。 6) id 和 class 称号中的第一个词必需是单词全拼或语义非常明晰的单词缩写， 比如 present, col.4、文件存储商定 、1) 网页： 根据频道的文件夹进展存储,例:商家报价频道,工程内对应的目录为/price/, 假设创建的网页是商家报价频道的,该网页就必需存储在/price/目录下面. 2) CSS： 公共文件存储在/css/common/目录下;网页私有 CSS 文件需求存储到网页文件 相对应的/CSS/的途径下,例:商家报价频道首页/css/ price/index.css 3) Image：图片文件的存储与 CSS 文件的存储规那么一样. 4) Js：Js 文件的

8、存储跟 CSS 类似.5、文件紧缩 、Js 文件和 css 文件的发布文件均用“JsCompressor工具进展紧缩存储。6、运用外部 JS 和 CSS 、1) 全 部 使 用 外 联 样 式 或 的方式。 2) 一切 CSS 外联款式均放在 head 中,JS 外联款式放在网页的底部。第 4 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-283) 制止运用import mystyle.css的方式，运用这种方式的结果是先加载网页再加 载 css。7、兼容性规范 、页面应完全兼容 IE6+和 Firefox 阅读器，及常用的分辨率。五、HTML 规范 HTML 言

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

10、5000px。8)尽量不用 table tr td。2、文档模板 、 page 第 5 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-28 页头 主体 页尾 3、DOCTYPE 、页面文档类型一致运用 HTML5 DOCTYPE。代码如下： 4、编码 、声明方法遵照 HTML5 的规范。 5、注释 、建议对超越 10 行的页面模块进展注释，以降低开发人员的嵌套本钱和后期的维 护本钱。例如： . 第 6 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-28HTML 元素1、构造性元素 、1) p 表示段落。只能包含内联元素，不能包含块级元

11、素; 2) div 本身无特殊含义，可用于规划。几乎可以包含任何元素; 3) br 表示换行符; 4) hr 表示程度分割线; 5) h1-h6 表示标题。其中 h1 用于表示当前页面最重要的内容的标题; 6) blockquote 表示援用，可以包含多个段落。请勿纯粹为了缩进而运用 blockquote，大部分阅读器默许将 blockquote 渲染为带有左右缩进;7) pre 表示一段格式化好的文本;2、头部元素 、1) title 每个页面必需有且仅有一个 title 元素; 2) base 可用场景：首页、频道等大部分链接都为新窗口翻开的页面; 3) link link 用于引入 cs

12、s 资源时，可省去 media(默以为 all) 和 type(默以为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 表示句意强调，加与不加

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

14、列表元素 、1) dl 表示关联列表，dd 是对 dt 的解释; dt 和 dd 的对应关系比较随意：一个 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

15、, novalidate, target,submit 会导致表单提交混乱六、JavaScript 规范 JavaScript 言语规范1) 声明变量时，必需加上 var 关键字。 2) 尽量减少全局变量的运用。 3) 语句总是以分号结尾。 4) 不要在块内声明函数。 5) 规范特性优于非规范特性假设类库有提供，优先运用类库中的函数 。 6) 不要封装根本类型。 7) 只在解析序列化串时运用 eval() 。第 8 页/共 16 页高性能网站前端开发规范8) 不运用 with 。 9) 减少运用 continue 和 break 。 10) 仅在函数内运用 this 。V 1.00更新时间 2

16、021-07-2811) 运用 Array/Object 直接量，防止运用 Array/Object 构造器。 12) 制止修正内置对象的原型。JavaScript 框架规范1) 一致运用 jquery 框架。 2) 用到 web 编辑器时，一致运用 ckeditor、ckfinder。 3) 需求用到简单 web 编辑器时，运用淘宝前端工程师写的 kissy_editor。 4) 假设网站规模较大，运用淘宝的 seajs.js 框架对 js 按需加载。 5) Jquery 等框架经过 Google CDN 的方式引入，以加快加载速度，并减轻效力器的压力。各个框架的调用地址在 /上获得。6)

17、当站点规模较大时，引进 dojo 框架并模块化按需加载。JavaScript 编码风格1、行与缩进 、 1.1、语句行 、1) 尽能够不要让每行超越 120 个字符; 2) 语句必需以分号作为终了符, 不要忽略分号;1.2、空格 、1) 数值操作符(如, +/-/*/% 等)两边留空; 2) 赋值操作符/等价判别符两边留一空格; 3) for 循环条件中, 分号后留一空格; 4) 变量声明语句, 数组值, 对象值及函数参数值中的逗号后留一空格; 5) 空行不要有空格; 6) 行尾不要有空格; 7) 逗号和冒号后一定要跟空格;第 9 页/共 16 页高性能网站前端开发规范8) 点号前后不要出现空

18、格; 9) 空对象和数组不需求填入空格; 10) 函数名末尾和左括号之间不要出现空格;V 1.00更新时间 2021-07-281.3、空行 、1) 逻辑上独立的代码块运用空行分隔; 2) 文件末尾留 12 个空行; 3) 不要吝啬空行。尽量运用空行将逻辑相关的代码块分割开，以提高程序的可读性。1.4、缩进 、1) 以 4 个空格为一缩进层次; 2) 变量 声明: 多个变量声明时, 适当换行表示; 参照 var 关键字, 缩进一层次; 3) 函数参数: 函数参数写在同一行上; 传送匿名函数时, 函数体应从调用该函数的左边开场缩进; 4) 数组和对象初始化时: 假设初始值不是很长, 尽量坚持写在

19、单行上; 初始值占用多行时, 缩进一层次; 对象中, 比较长的变量/数值, 不要以冒号对齐; 5) 二元/三元操作符: 操作符一直跟随前行; 真实需求缩进时, 按照上述缩进风格; 6) 表达式中的缩进同变量声明时;2、括号 、原那么: 不要滥用括号, 必要时一定要运用.1) if/else/while/for 条件表达式必需有小括号; 2) 语句块必需有大括号; 3) 一元操作符(如 delete, typeof, void)或在某些关键词(如 return, throw, case,new) 之后, 不要运用括号;第 10 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021

20、-07-283、变量 、1) 变量如有较广的作用域, 运用全局变量; 假设是在类中, 可以设计成为一个类的成员;2) 函数体中, 多个部分变量集中在一同声明, 防止分散; 3) 适当延迟变量的初始化;4、字符串 、1) JS 代码中, 单行字符串运用单引号; 2) JS 代码中, 多行字符串运用 + 拼接方式, 不要运用 拼接; 3) HTML 中 Element 属性, 运用双引号;5、命名规范 、原那么： * 尽量防止潜在冲突; * 精简短小, 见名知意;1) 2) 3) 4) 5) 6) 7) 普通变量一致运用驼峰方式; 常量运用全部大写, 多个单词以下划线分隔; 枚举量, 同常量; 私

21、有变量, 属性和方法, 名字以下划线开头; 维护变量, 属性和方法, 名字同普通变量名; 方法和函数的可选参数, 名字以 opt_ 开头, 运用 param 标志阐明; 方法和函数的参数个数不固定时: 可添加参数 var_args 为参数个数; 取代运用 arguments; 运用 param 标志阐明; 8) Getter/Setter 命名: 以 getFoo/setFoo(value) 方式; 布尔类型运用 isFoo()/hasFoo()/canDo()/shouldDO() 也可; 9) 命名空间: 为全局代码运用命名空间, 如 sloth.*; 外部代码和内部代码运用不同的命名空间

22、; 10) 重命名那些名字很长的变量, 不要在全局范围内创建别名, 而仅在函数块作用域中 运用; 11) 文件名应全部运用小写字符, 且不包含除 - 和 _ 外的标点符号; 12) 暂时的反复变量建议以 i, j, k, ., 命名;第 11 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-28七、CSS 规范 1、款式文件命名规范 、款式文件命名规范主要的 style.css 通用的 commom.css 列表的 list.css 内容页的 content.css 规划，版面 layout.css 专栏 columns.css 主题 themes.css2、选择器

23、运用规范 、选择器运CSS Selectors 共有以下 9 种，按性能从高到低如下： 1) 2) 3) 4) 5) 6) 7) 8) 9) ID 选择符 #box 类选择符 .box 类型选择符 div 相邻兄弟选择符 h4 + #pics 子选择符 #pics li 后代 选择符 .box a 通配选择符 * 属性选择符 href=#pic 伪类和伪元素 a:hover为编写高效的 CSS 选择符，我们在运用选择器的时候应留意：1) 防止运用通配规那么； 2) 不要限定 ID 选择符，没有必要； 3) 让规那么越详细越好，不写像 ul li a 这样的长选择符，最好是直接为 a 创建一个类

24、并加在适当的元素上； 4) 防止运用后代选择符； 5) 运用子选择符，让 css 可读性更强； 6) 依托承继，了解哪些属性是可以承继而来的，然后防止对这些属性反复指定规那么；3、CSS 款式命名规范 、 款式命名规范1) 常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。 头部：header 内容：content/container第 12 页/共 16 页高性能网站前端开发规范 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体规划宽度：wrapper 左右中：left right center 登录：login 标志：lo

25、go 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 搜索：search 友谊链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目的题：title 参与：joinus 指南：guild 效力：service 注册：r

26、egsiter 形状：status 投票：vote 协作同伴：partnerV 1.00更新时间 2021-07-28第 13 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-282 对网站中的按钮，假设按钮背景一致，只是字数有不一样，那么根据按钮上的字数来定义 按钮的款式，如 button2、button3 分别表示两个字，三个字的按钮。Pading、margin 类似， 如离顶部 10px 写成.pt10、.mt10。4、CSS 书写顺序 、这里引荐先写显示属性，再写本身属性，再写文字属性；并不代表非得按这个顺序写， 但这种写法可以使 css 构造更明晰易读，

27、修正起来比较方便。 而且在团队工程中能更好地提 高效率。 /显示属性 display list-style position float clear /本身属性 width height margin padding border background /文本属性 color font text-decoration第 14 页/共 16 页高性能网站前端开发规范 text-align vertical-align white-space other text contentV 1.00更新时间 2021-07-285、CSS Sprite 、将相关的背景图片合并到单个 PNG8 图片里面，并

28、经过 background-position 属性来使 用这个图片，这里可以借助“CssBgImageMergeTool来快速合并和定位。 CSS Sprites 可以大大减少 恳求的数量，节省带宽并加快页面加载。同时，可以 防止图片闪烁，例如，假设系统或网速比较慢的时候，当鼠标放到一个按钮时加 窗体顶端 HYPERLINK wk.baidu/view/efafc106cc17552707220856?pn=8&ssid=&from=&bd_page_type=1&uid=wk_1323052005_129&pu=sl1,pw1000,sz224_220,pd1,fz2,lp83,tplcol

29、or,&st=1&wk=rd&maxpage=8 下页 HYPERLINK wk.baidu/view/efafc106cc17552707220856?pn=6&ssid=&from=&bd_page_type=1&uid=wk_1323052005_129&pu=sl1,pw1000,sz224_220,pd1,fz2,lp83,tplcolor,&st=1&wk=rd&maxpage=8 上页 窗体底端声明: 多个变量声明时, 适当换行表示; 参照 var 关键字, 缩进一层次; 3) 函数参数: 函数参数写在同一行上; 传送匿名函数时, 函数体应从调用该函数的左边开场缩进; 4) 数组

30、和对象初始化时: 假设初始值不是很长, 尽量坚持写在单行上; 初始值占用多行时, 缩进一层次; 对象中, 比较长的变量/数值, 不要以冒号对齐; 5) 二元/三元操作符: 操作符一直跟随前行; 真实需求缩进时, 按照上述缩进风格; 6) 表达式中的缩进同变量声明时;2、括号 、原那么: 不要滥用括号, 必要时一定要运用.1) if/else/while/for 条件表达式必需有小括号; 2) 语句块必需有大括号; 3) 一元操作符(如 delete, typeof, void)或在某些关键词(如 return, throw, case,new) 之后, 不要运用括号;第 10 页/共 16 页

31、高性能网站前端开发规范V 1.00更新时间 2021-07-283、变量 、1) 变量如有较广的作用域, 运用全局变量; 假设是在类中, 可以设计成为一个类的成员;2) 函数体中, 多个部分变量集中在一同声明, 防止分散; 3) 适当延迟变量的初始化;4、字符串 、1) JS 代码中, 单行字符串运用单引号; 2) JS 代码中, 多行字符串运用 + 拼接方式, 不要运用 拼接; 3) HTML 中 Element 属性, 运用双引号;5、命名规范 、原那么： * 尽量防止潜在冲突; * 精简短小, 见名知意;1) 2) 3) 4) 5) 6) 7) 普通变量一致运用驼峰方式; 常量运用全部大

32、写, 多个单词以下划线分隔; 枚举量, 同常量; 私有变量, 属性和方法, 名字以下划线开头; 维护变量, 属性和方法, 名字同普通变量名; 方法和函数的可选参数, 名字以 opt_ 开头, 运用 param 标志阐明; 方法和函数的参数个数不固定时: 可添加参数 var_args 为参数个数; 取代运用 arguments; 运用 param 标志阐明; 8) Getter/Setter 命名: 以 getFoo/setFoo(value) 方式; 布尔类型运用 isFoo()/hasFoo()/canDo()/shouldDO() 也可; 9) 命名空间: 为全局代码运用命名空间, 如 s

33、loth.*; 外部代码和内部代码运用不同的命名空间; 10) 重命名那些名字很长的变量, 不要在全局范围内创建别名, 而仅在函数块作用域中 运用; 11) 文件名应全部运用小写字符, 且不包含除 - 和 _ 外的标点符号; 12) 暂时的反复变量建议以 i, j, k, ., 命名;第 11 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-28七、CSS 规范 1、款式文件命名规范 、款式文件命名规范主要的 style.css 通用的 commom.css 列表的 list.css 内容页的 content.css 规划，版面 layout.css 专栏 colu

34、mns.css 主题 themes.css2、选择器运用规范 、选择器运CSS Selectors 共有以下 9 种，按性能从高到低如下： 1) 2) 3) 4) 5) 6) 7) 8) 9) ID 选择符 #box 类选择符 .box 类型选择符 div 相邻兄弟选择符 h4 + #pics 子选择符 #pics li 后代 选择符 .box a 通配选择符 * 属性选择符 href=#pic 伪类和伪元素 a:hover为编写高效的 CSS 选择符，我们在运用选择器的时候应留意：1) 防止运用通配规那么； 2) 不要限定 ID 选择符，没有必要； 3) 让规那么越详细越好，不写像 ul l

35、i a 这样的长选择符，最好是直接为 a 创建一个类并加在适当的元素上； 4) 防止运用后代选择符； 5) 运用子选择符，让 css 可读性更强； 6) 依托承继，了解哪些属性是可以承继而来的，然后防止对这些属性反复指定规那么；3、CSS 款式命名规范 、 款式命名规范1) 常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。 头部：header 内容：content/container第 12 页/共 16 页高性能网站前端开发规范 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体规划宽度：wrapper 左右中：left r

36、ight center 登录：login 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 搜索：search 友谊链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目的题：title 参与：joinu

37、s 指南：guild 效力：service 注册：regsiter 形状：status 投票：vote 协作同伴：partnerV 1.00更新时间 2021-07-28第 13 页/共 16 页高性能网站前端开发规范V 1.00更新时间 2021-07-282 对网站中的按钮，假设按钮背景一致，只是字数有不一样，那么根据按钮上的字数来定义 按钮的款式，如 button2、button3 分别表示两个字，三个字的按钮。Pading、margin 类似， 如离顶部 10px 写成.pt10、.mt10。4、CSS 书写顺序 、这里引荐先写显示属性，再写本身属性，再写文字属性；并不代表非得按这个顺序写， 但这种写法可以使 css 构造更明晰易读， 修正起来比较方便。 而且在团队工程中能更好地提 高效率。 /显示属性 display list-style position float clear /本身属性 width height margin padding border background /文本属性 color font text-decoration第 14 页/共 16 页高性能网站前端开发规范 text-align vertical-a