以下观点纯属个人看法：

　　对于一个刚接触前端不久的人来说，前端的代码质量是很重要的一部分，毕竟关系到性能问题。个人认为关于代码性能优化主要由这几方面：HTML、CSS、Javascript和HTTP，所以对这四个方面的优化能提高浏览器的性能。个人知识面有限，只有学到以下的知识，另外的还没涉及，不足之处还请体谅。

　　一、 HTML

　　　　1、首先是对HTML5的充分熟悉和理解，理解标签的语义化，减少对标签的重定义。

　　　　2、命名的规范化，对id、class、name的规范命名有助于整体代码的构建，方便他人的理解和阅读。

　　二、CSS

　　　　1、CSS代码的简写。熟悉和了解CSS的朋友都知道，CSS样式表有很多缩写方式。比如，定义字体、定义背景等，都可以把CSS代码缩写，从而减少代码量，提高效率。

简写：
.a{
font:normal small-caps bold 14px/1.5em ‘宋体‘,arial,verdana;
}
等价于：
.a{
font-style:normal;
font-variant:small-caps;
font-weight:bold;
font-size:14px;
line-height:1.5em;
font-family:‘宋体‘,arial,verdana;
}

　　　　2、同属性提出。将相同属性的CSS格式放在一格公共的样式中，能减少很多代码的书写。相信大家都不陌生。就不多做说明了。

　　　　3、尽量将样式写在单独的css文件里面，在head元素中通过link方式引用，有时候为了图方便或者快速搞定功能，我们可能会直接将样式写在页面的style标签或者直接内联在元素上，这样虽然简单方便，但是非常不利于日后的维护。将代码写成单独的css文件有几点好处：

　　　　(1)内容和样式分离，易于管理和维护

　　　　(2)减少页面体积

　　　　(3)css文件可以被缓存、重用，维护成本降低

　　　　4、不使用@import。这条手段已经是众所周知，这里简单提一下，@import影响css文件的加载速度

　　　　5、避免使用复杂的选择器，层级越少越好。简洁的选择器不仅可以减少css文件大小，提高页面的加载性能，浏览器解析时也会更加高效，也会提高开发人员的开发效率，降低了维护成本。

　　　　6、利用CSS继承减少代码量。我们知道有一部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式，这个也是提高性能的行之有效的方法。常见的可以继承的属性比如：color，font-size，font-family等等；不可继承的比如：position，display，float等。

　　　　7、结构和样式分离。我们平时一定遇到过这种情况，比如一个页面存在着多个不同功能的按钮，这些按钮的形状大小都差不多，但是根据不同的功能会有不同的颜色或背景来加以区分。如果不进行结构和样式分离，我们的CSS代码可能是这样的

　　.btn-primary{

　　width:100px;

　　height:50px;

　　padding:5px 3px;

　　background:#ccc;

　　color:#000;

　　}

　　.btn-delete{

　　width:100px;

　　height:50px;

　　padding:5px 3px;

　　background:red;

　　color:#fff;

　　}

　　这两个或者可能更多的按钮拥有一些不同的样式，但是它们同时拥有相同的大小样式等，我们将其抽象的部分提取出来，结果如下：

　　.btn{

　　width:100px;

　　height:50px;

　　padding:5px 3px;

　　}

　　.primary{

　　background:red;

　　color:#fff;

　　}

　　.delete{

　　background:red;

　　color:#fff;

　　}

　　这样提取公用的样式出来，然后按钮同时引用btn和primary等。这种做法除了减少重复的代码精简CSS之外，还有一个好处是复用性，如果需要增加其他额外的按钮，只需要编写不同的样式，和btn配合使用即可。

　　　　8、容器和内容分离

　　我们平时写代码一定写过这样代码

　　.content h3{

　　font-size:20px;

　　color:#333;

　　}

　　这样的代码就是内容依赖于容器，没有分离的代码，也就是说h3的样式依赖于.content容器，如果其他地方要用到相同的样式，但是它的容器却不是.content，那你可能就是要再写一遍.something h3。

　　所以OOCSS推荐分离容器和内容，可以修改成：

　　.title{

　　font-size:20px;

　　color:#333;

　　}

　　关于这一点，我个人建议要分情况来看，像前面这个例子，它适合样式和容器分离。但是比如下面这种情况：

　　.menu li{

　　font-size:12px;

　　}

　　这种ul，li列表的样式，我觉的就按照我们原先的做法就可以，不一定非得给一个类给li来设定样式，即

　　.menu-item{

　　font-size:12px;

　　}

　　这样页面的li标签需要引用menu-item类。

　　三 、Javascript

　　　　1、减少全局变量。因为访问局部变量的速度要比访问全局变量的速度更快些。

　　　　2、减少DOM访问。访问DOM的次数越多，代码运行速度越慢。因此，在有其他方案可以代替的时候，我们要尽量减少访问DOM的次数。

　　　　3、将Javascript脚本引用放在最后加载（可异步的异步）。这样可以让网页渲染所需要的内容尽快加载显示给用户。

　　　　4、使用外部Javascirpt和CSS文件。可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以为你带来很大的好处。但对于用户通常只会访问一次的页面，例如microsoft.com首页，那inline的javascript和css相对来说可以提供更高的效率。

　　　　5、精简Javascript代码。将Javascript或CSS中的空格和注释全去掉，减小体积。

　　　　6、去除重复脚本。重复的脚本不仅浪费浏览器的下载时间，而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理。

　　四、 HTTP

　　　　1、减少HTTP请求。80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，可以采用以下技巧：（1）采用精灵图 （2）将多个JS、CSS文件打包成一个文件 （3）采用地图图片

　　　　2、减少DNS查询次数。DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。

　　　　3、缓存AJAX。jax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果。PS：个人认为能使用GET方式就不同POST方式

　　　　4、CDN的使用。使用CDN有两点好处，第一，一般来说，访问速度有保障，稳定性也有保障；第二，你可以省下资源服务器的一部分资源负担，节省空间节省流量，艰苦创业，能省则省啊。

关于前端代码性能优化问题