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

如下观点纯属我的见解：

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

　　1、 HTML

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

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

　　2、CSS

　　　　一、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;
}

　　　　二、同属性提出。将相同属性的CSS格式放在一格公共的样式中，能减小不少代码的书写。相信你们都不陌生。就很少作说明了。

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

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

　　　　(2)减小页面体积

　　　　(3)css文件能够被缓存、重用，维护成本下降

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

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

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

　　　　七、结构和样式分离。咱们平时必定遇到过这种状况，好比一个页面存在着多个不一样功能的按钮，这些按钮的形状大小都差很少，可是根据不一样的功能会有不一样的颜色或背景来加以区分。若是不进行结构和样式分离，咱们的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配合使用便可。

　　　　八、容器和内容分离

　　咱们平时写代码必定写过这样代码

　　.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

　　　　一、减小全局变量。由于访问局部变量的速度要比访问全局变量的速度更快些。

　　　　二、减小DOM访问。访问DOM的次数越多，代码运行速度越慢。所以，在有其余方案能够代替的时候，咱们要尽可能减小访问DOM的次数。

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

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

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

　　　　六、去除重复脚本。重复的脚本不只浪费浏览器的下载时间，并且浪费解析和执行时间。通常用来避免引入重复脚本的作法是使用统一的脚本管理模块，这样不只能够避免重复脚本引入，还能够兼顾脚本依赖管理和版本管理。

　　4、 HTTP

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

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

　　　　三、缓存AJAX。jax能够帮助咱们异步的下载网页内容，可是有些网页内容即便是异步的，用户仍是在等待它的返回结果。PS：我的认为能使用GET方式就不一样POST方式

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