前端的性能优化

性能优化

• 减少 HTTP请求数
  　　减少 HTTP请求数的主要途径包括：
  　　(1). 从设计实现层面简化页面
  　　(2). 合理设置 HTTP缓存
  　　(3). 资源合并与压缩
  　　(4). CSS Sprites合并 CSS图片，减少请求数的又一个好办法。
  　　(5). Inline Images
  　　(6). Lazy Load Images
• 将外部脚本置底
  浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。脚本尽可能的往后挪，减少对并发下载的影响。
• 异步执行 inline脚本
  inline脚本对性能的影响与外部脚本相比。首页，与外部脚本一样， inline脚本在执行的时候一样会阻塞并发请求，由于浏览器在页面处理方面是单线程的，当 inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。 inline脚本在执行的时候，页面处于空白状态。建议将执行时间较长的 inline脚本异步执行，例如使用 script元素的defer 属性、使用setTimeout 。
• Lazy Load Javascript
  一个框架往往包括了很多的功能实现，这些功能并不是每一个页面都需要的，如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。一种是为那些流量特别大的页面专门定制一个专用的 mini版框架，另一种则是 Lazy Load。YUI 则使用了第二种方式，在 YUI的实现中，最初只加载核心模块，其他模块可以等到需要使用的时候才加载。
• 将 CSS放在 HEAD中
  如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态。有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。
• 异步请求 Callback
  在某些页面中可能存在这样一种需求，需要使用 script标签来异步的请求数据
• 减少不必要的 HTTP跳转
  对于以目录形式访问的 HTTP链接，很多人都会忽略链接最后是否带 ’/’，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了 301跳转，增加了多余请求。
• 避免重复的资源请求
  这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求

代码级优化

javascript

• 慎用 with
  在 with代码块中访问非局部变量是都是先从 obj上开始查找，如果没有再依次按作用域链向上查找，因此使用 with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降
• 避免使用 eval和 Function
  每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢 100倍以上
• 减少作用域链查找
  如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。
• 数据访问
  Javascript中的数据访问包括直接量、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：
• 字符串拼接
  在 Javascript中使用"+" 号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。
• CSS选择符
• Image压缩