1、什么是规范？

规范不是标准，不是放之四海而皆准的，不同的项目中的代码规范是有可能有差异的，比如命名，有些项目规定html标签的id必须要以控件的缩写名作为前缀，如按钮的id名以”btn”作为前缀，有些只是规定命名有意义就可以。

2、规范的作用

规范的作用只是让同一个团队代码风格统一，减少协作时的复杂性，确保后续的维护和修改方便。不同团队中遵循的规范有可能存在部分差异性，但在同一个团队中规范必须是统一的，团队中的成员应该严格遵守。

3、高效web前端开发

3.1、前端代码重构

前端代码重构指的是在不改变代码外部行为的情况下进行源代码修改，重构之前需要考虑的是重构后如何在能保证外部行为不改变，因此重构之前一定要再三考虑才能下手。

前端重构过程主要分为如下过程：

1、删除无用代码，精简代码

无用的代码主要集中在css、JavaScript文件中，包括已经不起作用的css样式和废弃的JavaScript函数，删除了废弃的代码也就提高了后续的可维护性。

2、前端代码规范化

页面的html标签中的内联css样式应放到独立的css文件中；代码的层次缩进也需规范，一般来说是不同层级按照4个空格进行缩进；页面中不推荐使用的标签也需规范化，如<center>、<b>等，都可以改由css控制；在JavaScript中定义变量时可以集中定义局部变量，并把部分全局变量转变为局部变量，缩小变量的作用于。

3、前端代码模块化

按照模块归类css代码，放到模块对应的单独css文件中；按照模块分离JavaScript代码，按照模块定义不同的命名空间，将JavaScript代码中的公共方法归类到独立的共通文件中，同时引入面向对象编程思想来重构代码，进一步明确公有接口和私有接口。

4、提高页面加载性能

将部分不影响首页展示的js文件延迟到页面加载后加载；删除页面中初始隐藏的区域，改为通过js按需动态成；页面中的部分图片延迟加载；调整css和js文件的引用顺序，即css在前，js在后；给静态文件设置缓存；使用css sprite，合并首页背景图；css、js文件需压缩后再上线；

3.2、前端框架的选择

因为前端框架多种多样，各个框架的功能侧重点也不同，如何选取合适项目的框架就成为前端开发人员的一项技能。

给项目选择一个框架，至少需要考虑如下因素：

1、项目的需求

这是选择前端框架的最主要因素之一，选择框架之前需要调查项目的基本需求，如：

• a）项目是否有ajax操作？
• b）是否需要模块化？
• c）数据传输的格式是ajax还是xml？
• d）项目需要支持的浏览器有哪些？
• e）项目是移动应用还是普通网站？
• f）项目中需要哪些主要的ui模块？

如模态窗口、滑块空间、进度条、提示框、分割框、幻灯片显示及自动填充等等

2、项目的特点

项目本身的特点也是选取框架的一个重要因素，这些特点包括项目开发团队的前端技术能力、项目的开发周期，以及是否长期维护的产品特点。

使用框架是有学习成本的，需要开发团队先学习框架的使用方法，如果某个框架对开发团队来说是不易上手和使用的，那么就可能需要考虑其他相对容易上手的框架。

项目开发周期长短也会影响框架的选择，开发周期短则应选择一些容易上手、能快速开发的框架，或者选择使用多个框架。

如果项目是需要长期升级维护的，则选择框架时需要考虑框架本身的升级、框架本身的扩展性等。

3、框架的特点

从框架的角度出发，需要调查框架是否满足需求？框架的性能是否可以接受？框架是否持续开发中？文档和例子是否充足？是否有技术支持？是否有版权问题？等等

总结：框架虽然非常有用，但是不要过分依赖框架，不能只是为了框架中的某一个功能而引入整个框架，这样会导致前端代码过于庞大，影响站点的性能。

3.3、web前端性能分析

常用的web前端性能分析工具有YSlow、PageSpeed以及各自浏览器自带的开发工具等。YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。 YSlow可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意见。

YSlow官网：http://yslow.org/

YSlow的安装：进入官网然后点击”Install YSlow”按钮即可。

（YSlow真的很强大，很好用，前端开发提升web性能的指导者！）

YSlow的23条规则：

1. 减少HTTP请求次数。合并图片、CSS、JS，改进首次访问用户等待时间。

2. 使用CDN。就近缓存==>智能路由==>负载均衡==>WSA全站动态加速

3. 避免空的src和href。当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。测试

4. 为文件头指定Expires。使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。

5. 使用gzip压缩内容。压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。旧文章

6. 把CSS放到顶部

7. 把JS放到底部。防止js加载对之后资源造成阻塞。

8. 避免使用CSS表达式

9. 将CSS和JS放到外部文件中。目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

10. 权衡DNS查找次数。减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

11. 精简CSS和JS

12. 避免跳转

• 同域：注意避免反斜杠 “/” 的跳转；
• 跨域：使用Alias或者mod_rewirte建立CNAME（保存域名与域名之间关系的DNS记录）

13. 删除重复的JS和CSS。重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14. 配置ETags。它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载

15. 可缓存的AJAX。“异步”并不意味着“即时”：Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。

16. 使用GET来完成AJAX请求。当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量。是否存在一个是更贴切的标签可以使用？人生不仅仅是DIV+CSS

18. 避免404。有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。

19. 减少Cookie的大小

20. 使用无cookie的域。比如图片 CSS 等，Yahoo! 的静态文件都在主域名以外，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜。png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg

22. 不要在HTML中缩放图片

23. 缩小favicon.ico并缓存

3.4、css权重

css样式有6种基础选择器：

• a）id选择器(#box{})
• b）类选择器(.box{})
• c）属性选择器(a[href=”http://www.baidu.com”])
• d）伪类和伪对象选择器(:hoevr{}和::after{})
• e）标签类型选择器(div{})
• f）通配符选择器(*{})

css权重指的是这些选择符的优先级，优先级高的css样式会覆盖优先级底的css样式，优先级权重越高说明权重越高，反之亦然。

计算css权重是有一定规则的，根据w3c制定的css规范，css权重计算规则如下：

a）、计算选择符中的id选择器的数量

一个id选择器为一个a，一个a为100

b）、计算选择符中的类选择器、属性选择器以及伪类选择器的数量

一个类选择器、属性选择器以及伪类选择器为一个b，一个b为10

c）、计算标签类型选择器和伪对象选择器的数量

一个标签类型选择器、伪对象选择器为一个c，一个c为1

d）、忽略通配符选择器

通配符选择器忽略不计。如下面这张图就是一个css选择器权重的例子：

如果两个选择符的权重相同，则可依照”就进原则”来判断，最后定义的选择符会被采用。但尽量避免出现这种依靠定义的顺序决定选择符优先级的情况，因为在后续的维护中很难保证定义的顺序不会被打乱。

3.5、兼容IE浏览器

为了兼容IE浏览器，特别是IE8及以下版本的浏览器我们通常都会在css中写hack代码，这些hack代码为后期的维护留下了隐患，它们不仅难以理解，最重要的是当未来某个时期不再支持某个旧版浏览器时，很难移除这些兼容代码。

因此，最佳的做法是集中管理兼容代码，在IE浏览器中可以使用条件注释，让不同浏览器加载不同的样式文件以达到兼容代码和正常代码分离的目的。例如：

<!--[if IE 8]<link rel=”stylesheet”   href=”css/ie8.css” />< ![endif]-->
<!--[if IE 7]<link rel=”stylesheet”   href=”css/ie7.css” />< ![endif]-->

同时为了提高兼容样式的优先级，可以在根元素(<html>或者<body>)上针对不同的浏览器添加不同的样式类。如：

<!--[if IE 8]<html class=”ie8”><   ![endif]-->
<!--[if IE 7]<html class=”ie7”><   ![endif]-->

针对不同版本的浏览器的兼容css样式可以这样写：

.ie8 .header {...}
.ie7 .header {...}

4、高性能css

4.1、css sprite(雪碧图)尺寸及体积

在网站开发中避免不了使用小图标，在有很多小图标时我们一般将多个小图标合并到一张图片中，然后通过background-position来定位显示图标，这就是css雪碧图。那么为了页面性能，一般来说雪碧图的尺寸应照如下规范：

a）长*宽不超过2500px

假如雪碧图的宽度为1200px，高度为15000px，体积为25kb，那么它在内存中就要占1200*15000*4 = 75MB，这个开销是很大的。

b）图片体积不超过200kb

4.2、生成css sprite图

在以往的开发中我们都是自己在ps中合并雪碧图，但现在可以直接在线生成雪碧图了，并且还会生成对应的css代码，这是不是很开心呢？

http://css.spritegen.com/

https://spritegen.website-performance.org/oldsites/spritegen/htdocs/

以上两个地址都可以上传多张小图标生成一张雪碧图，并且还会生成css代码，第一个好用些（更快）