前端优化

转自：http://www.2cto.com/kf/201604/498725.html

         网站的划分通常为二：前端和后台。咱们能够理解成后台是用来实现网站的功能的，好比：实现用户注册，用户可以为文章发表评论等等。而前端呢？其实应该是属于功能的表现。而且影响用户访问体验的绝大部分来自前端页面。

        而咱们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？因此咱们能够理解成前端才是真正和用户接触的。除了后台须要在性能上作优化外，其实前端的页面更须要在性能优化上下功夫，只有这样才能给咱们的用户带来更好的用户体验。就好像，好多人问，男人在找女友的时候是否是只看外表，一些智慧的男人给出了这样的回答：脸蛋和身材决定了我是否想去了解她的思想，思想决定了我是否会一票否决她的脸蛋和身材。同理，网站也是这样，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。

        不只仅如此，若是前端优化得好，他不只能够为企业节约成本，他还能给用户带来更多的用户，由于加强的用户体验。说了这么多，那么咱们应该如何对咱们前端的页面进行性能优化呢？

        通常说来，web前端指网站业务逻辑以前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等。

浏览器访问优化

浏览器请求处理流程以下图：

 

一、减小http请求，合理设置 HTTP缓存

        http协议是无状态的应用层协议，意味着每次http请求都须要创建通讯链路、进行数据传输，而在服务器端，每一个http都须要启动独立的线程去处理。这些通讯和服务的开销都很昂贵，减小http请求的数目可有效提升访问性能。

        减小http的主要手段是合并CSS、合并JavaScript、合并图片。将浏览器一次访问须要的javascript和CSS合并成一个文件，这样浏览器就只须要一次请求。图片也能够合并，多张图片合并成一张，若是每张图片都有不一样的超连接，可经过CSS偏移响应鼠标点击操做，构造不一样的URL。
         缓存的力量是强大的，恰当的缓存设置能够大大的减小 HTTP请求。假设某网站首页，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据，而当第二次访问即浏览器已缓存以后访问则仅有 10个请求，共 20多 K数据。 (这里须要说明的是，若是直接 F5刷新页面的话效果是不同的，这种状况下请求数仍是同样，不过被缓存资源的请求服务器是 304响应，只有 Header没有Body，能够节省带宽 )

        怎样才算合理设置 ?原则很简单，能缓存越多越好，能缓存越久越好。例如，不多变化的图片资源能够直接经过 HTTP Header中的Expires设置一个很长的过时头 ;变化不频繁而又可能会变的资源可使用 Last-Modifed来作请求验证。尽量的让资源可以在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就再也不详述了。

二、使用浏览器缓存

        对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都须要的，若是将这些文件缓存在浏览器中，能够极好的改善性能。经过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间能够是数天，甚至是几个月。

        在某些时候，静态资源文件变化须要及时应用到客户端浏览器，这种状况，可经过改变文件名实现，即更新javascript文件并非更新javascript文件内容，而是生成一个新的JS文件并更新HTML文件中的引用。
        使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法，好比须要更新10个图标文件，不宜把10个文件一次所有更新，而是应该一个文件一个文件逐步更新，并有必定的间隔时间，以避免用户浏览器突然大量缓存失效，集中更新缓存，形成服务器负载骤增、网络堵塞的状况。

三、启用压缩

        在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减小通讯传输的数据量。若是能够的话，尽量的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，所以HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。可是压缩对服务器和浏览器产生必定的压力，在通讯带宽良好，而服务器资源不足的状况下要权衡考虑。

四、CSS Sprites

合并 CSS图片，减小请求数的又一个好办法。

五、LazyLoad Images

        这条策略实际上并不必定能减小 HTTP请求数，可是却能在某些条件下或者页面刚加载时减小 HTTP请求数。对于图片而言，在页面刚加载的时候能够只加载第一屏，当用户继续日后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。

六、CSS放在页面最上部，javascript放在页面最下面

       浏览器会在下载完成所有CSS以后才对整个页面进行渲染，所以最好的作法是将CSS放在页面最上面，让浏览器尽快下载CSS。若是将 CSS放在其余地方好比 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就致使页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，因此能够考虑将CSS放在HEAD中。

        Javascript则相反，浏览器在加载javascript后当即执行，有可能会阻塞整个页面，形成页面显示缓慢，所以javascript最好放在页面最下面。但若是页面解析时就须要用到javascript，这时放到底部就不合适了。

        Lazy Load Javascript（只有在须要加载的时候加载，在通常状况下并不加载信息内容。）随着 Javascript框架的流行，愈来愈多的站点也使用起了框架。不过，一个框架每每包括了不少的功能实现，这些功能并非每个页面都须要的，若是下载了不须要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的作法大概有两种，一种是为那些流量特别大的页面专门定制一个专用的 mini版框架，另外一种则是 Lazy Load。

七、异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

在某些页面中可能存在这样一种需求，须要使用 script标签来异步的请求数据。相似：

<span style="font-size:14px;">/*Callback 函数*/
    function myCallback(info){
        //do something here
    }
　HTML:
　　Callback返回的内容 :
   myCallback('Hello world!');
</span>

像以上这种方式直接在页面上写 <script> 对页面的性能也是有影响的，即增长了页面首次加载的负担，推迟了 DOMLoaded和window.onload 事件的触发时机。若是时效性容许的话，能够考虑在 DOMLoaded事件触发的时候加载，或者使用 setTimeout方式来灵活的控制加载的时机。

八、减小cookie传输

        一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，所以哪些数据须要写入cookie须要慎重考虑，尽可能减小cookie中传输的数据量。另外一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，能够考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减小cookie传输次数。

九、Javascript代码优化

(1). DOM　　

a.HTML Collection（HTML收集器，返回的是一个数组内容信息） 
　　在脚本中 document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使用的时候大多将它做为数组来使用，由于它有 length属性，也可使用索引访问每个元素。不过在访问性能上则比数组要差不少，缘由是这个集合并非一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会从新执行这个查询从而更新查询结果。所谓的“访问集合” 包括读取集合的 length属性、访问集合中的元素。 
　　所以，当你须要遍历 HTML Collection的时候，尽可能将它转为数组后再访问，以提升性能。即便不转换为数组，也请尽量少的访问它，例如在遍历的时候能够将 length属性、成员保存到局部变量后再使用局部变量。　　 
b. Reflow & Repaint　　 
　　除了上面一点以外， DOM操做还须要考虑浏览器的Reflow和Repaint ，由于这些都是须要消耗资源的。

(2). 慎用 with　

with(obj){ p = 1}; 代码块的行为其实是修改了代码块中的执行环境 ，将obj放在了其做用域链的最前端，在 with代码块中访问非局部变量是都是先从 obj上开始查找，若是没有再依次按做用域链向上查找，所以使用 with至关于增长了做用域链长度。而每次查找做用域链都是要消耗时间的，过长的做用域链会致使查找性能降低。 
　　所以，除非你能确定在 with代码中只访问 obj中的属性，不然慎用 with，替代的可使用局部变量缓存须要访问的属性。

(3). 避免使用 eval和 Function

每次 eval 或Function 构造函数做用于字符串表示的源代码时，脚本引擎都须要将源代码转换成可执行代码。这是很消耗资源的操做 —— 一般比简单的函数调用慢 100倍以上。 
　　eval 函数效率特别低，因为事先没法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器没法优化上下文，所以只能有浏览器在运行时解释代码。这对性能影响很大。 
　　Function 构造函数比 eval略好，由于使用此代码不会影响周围代码 ;但其速度仍很慢。 
　　此外，使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

(4). 减小做用域链查找

前文谈到了做用域链查找问题，这一点在循环中是尤为须要注意的问题。若是在循环中须要访问非本做用域下的变量时请在遍历以前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤为重要，由于全局变量处于做用域链的最顶端，访问时的查找次数是最多的。 
低效率的写法：

<span style="font-size:14px;">// 全局变量
var globalVar = 1;
function myCallback(info){
    for( var i = 100000; i--;){
        //每次访问 globalVar 都须要查找到做用域链最顶端，本例中须要访问 100000 次
        globalVar += i;
    }
}
</span>

 

更高效的写法：

<span style="font-size:14px;">// 全局变量
var globalVar = 1;
function myCallback(info){
    //局部变量缓存全局变量
    var localVar = globalVar;
    for( var i = 100000; i--;){
    //访问局部变量是最快的
    localVar += i;
    }
    //本例中只须要访问 2次全局变量
    在函数中只须要将 globalVar中内容的值赋给localVar 中
    globalVar = localVar;
}
</span>

 

此外，要减小做用域链查找还应该减小闭包的使用。

(5). 数据访问

　　Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问须要更大的开销。当出现如下状况时，建议将数据放入局部变量： 
　　a. 对任何对象属性的访问超过 1次 
　　b. 对任何数组成员的访问次数超过 1次 
　　另外，还应当尽量的减小对对象以及数组深度查找。

(6). 字符串拼接

在 Javascript中使用”+”号来拼接字符串效率是比较低的，由于每次运行都会开辟新的内存并生成新的字符串变量，而后将拼接结果赋值给新变量。与之相比更为高效的作法是使用数组的 join方法，即将须要拼接的字符串放在数组中最后调用其 join方法获得结果。不过因为使用数组也有必定的开销，所以当须要拼接的字符串较多的时候能够考虑用此方法。

十、CSS选择符优化

在大多数人的观念中，都以为浏览器对 CSS选择符的解析式从左往右进行的，例如 
#toc A { color: #444; }这样一个选择符，若是是从右往左解析则效率会很高，由于第一个 ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每个 A标签的祖先节点，效率并不像以前想象的那样高。根据浏览器的这一行为特色，在写选择符的时候须要注意不少事项，有兴趣的童鞋能够去了解一下。

CDN加速

CDN（contentdistribute network，内容分发网络）的本质仍然是一个缓存，并且将数据缓存在离用户最近的地方，使用户以最快速度获取数据，即所谓网络访问第一跳，以下图。

 

因为CDN部署在网络运营商的机房，这些运营商又是终端用户的网络服务提供商，所以用户请求路由的第一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减小数据中心负载压力。 
CDN缓存的通常是静态资源，如图片、文件、CSS、script脚本、静态网页等，可是这些文件访问频度很高，将其缓存在CDN可极大改善网页的打开速度。

反向代理

传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。以下图所示：

 

论坛网站，把热门词条、帖子、博客缓存在反向代理服务器上加速用户访问速度，当这些动态内容有变化时，经过内部通知机制通知反向代理缓存失效，反向代理会从新加载最新的动态内容再次缓存起来。

此外，反向代理也能够实现负载均衡的功能，而经过负载均衡构建的应用集群能够提升系统整体处理能力，进而改善网站高并发状况下的性能。