1.减少HTTP请求

基本原理：

在浏览器（客户端）和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。

一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。

而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。

网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。

解决办法：

合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2.压缩图片和使用图片Spirit技术

基本原理：

注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。

现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：

1.缩小图片分辨率；

2.改变图片格式；

3.降低图片保存质量。

关于图片精灵（Spirit）技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Spirit）。图片精灵就是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。

至于图片精灵的操作细节就不多做介绍了，网上相关内容很多。

3.请减少对DOM的操作

基本原理：

对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。

天生就慢。比喻："把DOM看成一个岛屿，把JavaScript（ECMAScript）看成另一个岛屿，两者之间以一座收费桥连接"。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

解决办法：

修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

注：在IE中：hover会降低响应速度。

4.将CSS和JS放到外部文件中引用，CSS放头，JS放尾

放在下面避免影响网页加载

基本原理：

注：这个是很基础且必须遵循的知识点，引入外部文件好处是显而易见的，而且是项目稍稍复杂一点的时候就有必要了这样做了。

易维护、易扩展，方便管理和重复利用。

正确的方式：

JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即《script》每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。

因为这个阻塞的特点，建议把JavaScript代码放到《/body》标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。

HTML规范清楚指出CSS要放包含在页面的《head》区域内

5.适当使用图片预加载和懒加载

懒加载：当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片

预加载：用不用都加载，轮播图的时候先把所有图片都加载出来，可以让用户有更好的体验。

6.请正确理解 Repaint 和 Reflow

注：Repaint 和 Reflow 也就是重绘和重排，

基本原理：

Repaint（重绘）就是在一个元素的外观被改变，但没有改变布局（宽高）的情况下发生，如改变visibility、outline、背景色等等。

Reflow（重排）就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

减少性能影响的办法：

上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；　有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

重排一定会导致重绘，重绘不一定会重排，重排对性能影响更大。

总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

浏览器会先创建DOM树，根据CSS规则（解析CSS规则树）创建渲染树，display=none会出现在渲染树当中。

7.高效使用HTML标签和CSS样式

基本原理：

HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要去知道其常用标签代表的含义（SEO）和属性（表现形式）。

CSS指层叠样式表 （Cascading Style Sheets），如果说把页面想象成一个人，HTML就是人的骨架，CSS就是人的衣装，一个人的品味从他的衣装就能一目了然。

一名专业的前端开发也是一名优秀的重构，因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML：

<table> <tr> <td>

            <tatble><tr><td>

                `````````

            </td></tr></table>

 </td></tr></table>

或者这样的CSS：

body .box .border ul li p strong span{color：#000}

以上都是对HTML和CSS非常糟糕的使用方法。

正确理解：

HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：

ID选择符 #box

类选择符 .box

标签 div

伪类和伪元素 a:hover

当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。

8.使用CDN加速（内容分发网络）

基本原理：

CDN的全称是Content Delivery Network，即内容分发网络。

"其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。"

不足之处：

实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温，这一缺陷将得到改进，使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器，或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。

9.精简CSS和JS文件

基本原理：

有一条非常重要的准则一直没有提到，就是CSS和JavaScript的压缩，直接减少下载的文件体积。我个人经常使用的方式是使用 YUI Compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。

YUI Compressor是java程序，如果你对java很熟悉的话可快速的上手使用yuicompressor.jar；如果你对java很陌生也没关系，一样可以使用YUI Compressor，下面介绍其使用方式。

YUI Compressor的配置和使用：

先配置使用环境：

1.先确保电脑中是否安装了JDK

2.再配置必要的环境变量（设置可以搜索）

3.在cmd界面，输入javac可测试是否安装成功

使用方法可从cmd到进入yuicompressor.jar所在磁盘，我以自己的yuicompressor-2.4.2.jar为例：

1.压缩JS

java -jar yuicompressor-2.4.2.jar api.js > api.min.js

2.压缩CSS

java -jar yuicompressor-2.4.2.jar style.css > style.min.css

10.注意控制Cookie大小和污染

基本原理和使用方法：

有关Cookie的基础和高级知识可以看《JavaScript 操作 Cookie》。

因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；

使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响

Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

11．避免重定向

曾经有的资源，原来的地址被转移到了新的地址，如果不重定向，会404找不到，php里面header，location（具体的），重定向发送两次请求，

301永久重定向，302临时重定向，先去别的服务器下面进行配置，然后还能回到原来的地址。

12.适当的使用CSS3动画代替传统的定位

CSS3动画会开启GPU加速

利用事件委托为相同的子元素事件绑定，委托给父元素