前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各类各样的资源。前端优化是复杂的,针对方方面面的资源都有不一样的方式。那么,前端优化的目的是什么?javascript
1. 从用户角度而言,优化可以让页面加载得更快、对用户的操做响应得更及时,可以给用户提供更为友好的体验。前端
2. 从服务商角度而言,优化可以减小页面请求数、或者减少请求所占带宽,可以节省可观的资源。java
总之,恰当的优化不只可以改善站点的用户体验而且可以节省至关的资源利用。前端优化的途径有不少,按粒度大体能够分为两类,第一类是页面级别的优 化,例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化,例如Javascript中的DOM操做优化、CSS选择 符优化、图片优化以及HTML结构优化等等。另外,本着提升投入产出比的目的,后文提到的各类优化策略大体按照投入产出比从大到小的顺序排列。浏览器
1、页面级优化缓存
1. 减小HTTP请求数服务器
这条策略基本上全部前端人都知道,并且也是最重要最有效的。都说要减小HTTP请求,那请求多了到底会怎么样呢?首先,每一个请求都是有成本的,既包 含时间成本也包含资源成本。一个完整的请求都须要通过DNS寻址、与服务器创建链接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。 时间成本就是用户须要看到或者“感觉”到这个资源是必需要等待这个过程结束的,资源上因为每一个请求都须要携带数据,所以每一个请求都须要占用带宽。并发
另外,因为浏览器进行并发请求的请求数是有上限的(具体参见此处),所以请求数多了之后,浏览器须要分批进行请求,所以会增长用户的等待时间,会给 用户形成站点速度慢这样一个印象,即便可能用户能看到的第一屏的资源都已经请求完了,可是浏览器的进度条会一直存在。减小HTTP请求数的主要途径包括:框架
(1). 从设计实现层面简化页面前端优化
若是你的页面像百度首页同样简单,那么接下来的规则基本上都用不着了。保持页面简洁、减小资源的使用时最直接的。若是不是这样,你的页面须要华丽的皮肤,则继续阅读下面的内容。异步
(2). 合理设置HTTP缓存
缓存的力量是强大的,恰当的缓存设置能够大大的减小HTTP请求。以有啊首页为例,当浏览器没有缓存的时候访问一共会发出78个请求,共600多K 数据(如图1.1),而当第二次访问即浏览器已缓存以后访问则仅有10个请求,共20多K数据(如图1.2)。(这里须要说明的是,若是直接F5刷新页面 的话效果是不同的,这种状况下请求数仍是同样,不过被缓存资源的请求服务器是304响应,只有Header没有Body,能够节省带宽)
怎样才算合理设置?原则很简单,能缓存越多越好,能缓存越久越好。例如,不多变化的图片资源能够直接经过HTTP Header中的Expires设置一个很长的过时头;变化不频繁而又可能会变的资源可使用Last-Modifed来作请求验证。尽量的让资源可以 在缓存中待得更久。
(3). 资源合并与压缩
若是能够的话,尽量的将外部的脚本、样式进行合并,多个合为一个。另外,CSS、Javascript、Image均可以用相应的工具进行压缩,压缩后每每能省下很多空间。
(4). CSS Sprites
合并CSS图片,减小请求数的又一个好办法。
(5). Inline Images
使用data: URL scheme的方式将图片嵌入到页面或CSS中,若是不考虑资源管理上的问题的话,不失为一个好办法。若是是嵌入页面的话换来的是增大了页面的体积,并且没法利用浏览器缓存。使用在CSS中的图片则更为理想一些。
(6). Lazy Load Images
这条策略实际上并不必定能减小HTTP请求数,可是却能在某些条件下或者页面刚加载时减小HTTP请求数。对于图片而言,在页面刚加载的时候能够只 加载第一屏,当用户继续日后滚屏的时候才加载后续的图片。这样一来,假如用户只对第一屏的内容感兴趣时,那剩余的图片请求就都节省了。有啊首页曾经的作法 是在加载的时候把第一屏以后的图片地址缓存在Textarea标签中,待用户往下滚屏的时候才“惰性”加载。
2. 将外部脚本置底
前文有谈到,浏览器是能够并发请求的,这一特色使得其可以更快的加载资源,然而外链脚本在加载时却会阻塞其余资源,例如在脚本加载完成以前,它后面 的图片、样式以及其余脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。若是将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体 验。解决这一问题的方法有不少,在这里有比较详细的介绍(这里是译文和更详细的例子),而最简单可依赖的方法就是将脚本尽量的日后挪,减小对并发下载的 影响。
3. 异步执行inline脚本
inline脚本对性能的影响与外部脚本相比,是有过之而无不及。首页,与外部脚本同样,inline脚本在执行的时候同样会阻塞并发请求,除此之 外,因为浏览器在页面处理方面是单线程的,当inline脚本在页面渲染以前执行时,页面的渲染工做则会被推迟。简而言之,inline脚本在执行的时 候,页面处于空白状态。鉴于以上两点缘由,建议将执行时间较长的inline脚本异步执行,异步的方式有不少种,例如使用script元素的defer属 性(存在兼容性问题和其余一些问题,例如不能使用document.write)、使用setTimeout,此外,在HTML5中引入了Web Workers的机制,偏偏能够解决此类问题。
4. Lazy Load Javascript
随着Javascript框架的流行,愈来愈多的站点也使用起了框架。不过,一个框架每每包括了不少的功能实现,这些功能并非每个页面都须要 的,若是下载了不须要的脚本则算得上是一种资源浪费-既浪费了带宽又浪费了执行花费的时间。目前的作法大概有两种,一种是为那些流量特别大的页面专门定制 一个专用的mini版框架,另外一种则是Lazy Load。YUI则使用了第二种方式,在YUI的实现中,最初只加载核心模块,其余模块能够等到须要使用的时候才加载。
5. 将CSS放在HEAD中
若是将CSS放在其余地方好比BODY中,则浏览器有可能还未下载和解析到CSS就已经开始渲染页面了,这就致使页面由无CSS状态跳转到CSS状 态,用户体验比较糟糕。除此以外,有些浏览器会在CSS下载完成后才开始渲染页面,若是CSS放在靠下的位置则会致使浏览器将渲染时间推迟。
6. 异步请求Callback
在某些页面中可能存在这样一种需求,须要使用script标签来异步的请求数据。相似:
1 <script type="text/javascript"> 2 //Javascript: 3 /*Callback函数*/ 4 function myCallback(info) { 5 //do something here 6 } 7 </script> 8 9 <!-- HTML: --> 10 <script type = "text/javascript" 11 src = "http://abc.com/cb" > 12 </script> 13 <!-- cb返回的内容: --> 14 <!-- myCallback('Hello world!'); -->
像以上这种方式直接在页面上写<script>对页面的性能也是有影响的,即增长了页面首次加载的负担,推迟了DOMLoaded和 window.onload事件的触发时机。若是时效性容许的话,能够考虑在DOMLoaded事件触发的时候加载,或者使用setTimeout方式来 灵活的控制加载的时机。
7. 减小没必要要的HTTP跳转
对于以目录形式访问的HTTP连接,不少人都会忽略连接最后是否带’/',假如你的服务器对此是区别对待的话,那么你也须要注意,这其中极可能隐藏了301跳转,增长了多余请求。具体参见下图,其中第一个连接是以无’/'结尾的方式访问的,因而服务器有了一次跳转。
8. 避免重复的资源请求
这种状况主要是因为疏忽或页面由多个模块拼接而成,而后每一个模块中请求了一样的资源时,会致使资源的重复请求。出现的概率不大,可是仍是要注意排查,否则可能会出现以下局面,来自这里。
在网上看见的这篇,以为总结的很是好,在这里借鉴一下,不要见怪!