前端开发性能优化方案

减小HTTP请求次数和请求大小

• 尽可能合并CSS和JS文件（把须要引入的CSS合并为一个，JS也是合并为一个），原理是在减小HTTP请求次数，尽量的把合并后的代码进行压缩，减少HTTP请求资源的大小
  A:webpack这种自动化构建工具，能够帮咱们实现代码的合并和压缩（工程化开发）
  B:在移动开发(或者追求高性能的PC端开发[例如百度首页])，若是CSS或者JS不是须要不少，咱们能够选择把css和js编程内嵌式（也就是代码直接写在HTML中）

• 采用图片的“懒加载”（延迟加载）
  目的是为了减小页面“第一次加载”过程当中HTTP的请求次数，让页面打开速度变快
  步骤：开始加载页面的时候，全部的真实图片都不去发送HTTP请求加载，而是给一张占位的背景图，当页面加载完，而且图片在可视区域内咱们再去作图片加载

• 利用浏览器和服务器端的缓存技术(304缓存)，把一些不常常更新的静态资源文件作缓存处理（例如：JS、CSS、静态图片等均可以作缓存）
  原理是为了减小HTTP请求大小，让获取速度更快

• CSS雪碧图技术(css sprite / css 图片精灵)
  把全部相对较小资源图片汇总到一张大图上，后期咱们只须要把大图加载下来，用背景定位的方式展现对应的小图便可

  .bg{
      background:url('xxx.png');
    }
    .box1{
       background-position:xx xx;
    }
    .box2{
       background-position:xx xx;
    }
  
    <div class='bg box1'></div>

• 减小对于COOKIE的使用（最主要的是减小本地COOKIE存储内容的大小），由于客户端操做COOKIE的时候，这些信息老是在客户端和服务器端传来传去

• 在客户端和服务器端进行信息交互的时候，对于多项数据咱们尽量基于JSON格式来进行传送（JSON格式的数据处理方便，资源偏小） ==>相对于XML格式的传输才会有这个优点

• 尽量实现JS的封装（低耦合高内聚），减小页面中的冗余代码（减小HTTP请求资源的大小）

• 在基于AJAX的GET请求进行数据交互的时候，根据需求可让其产生缓存（这个缓存不是304缓存），这样下一次从相同地址获取的数据是上一次缓存的数据（可是不多用，项目中通常刻意清除这个缓存的时候偏多）

• 利用H5中提供的localstorage本地存储或者是manifest离线缓存，作一些信息的本地存储，下一次加载页面的时候直接从本地获取，减小HTTP请求次数

代码优化

->有利于SEO
->有利于扩展维护
->有利于减小性能消耗
[JS代码优化的108条建议] [雅虎CSS优化的36条建议]
...

• 在JS中尽可能减小闭包的使用（缘由：闭包会产生不释放的栈内存）
  A:循环给元素作事件绑定的时候，尽量的把后期须要的信息（例如索引）存储到元素的自定义属性上，而不是建立闭包存储
  B:能够在最外层造成一个闭包，把一些后续须要的公共信息进行存储，而不是每个方法都建立闭包(例如单例模式)
  C:尽量的手动释放不被占用的内存
  ...

• 尽可能使用字体图标或者SVG图标，来代替传统的PNG等格式的图片（由于字体图标等是矢量图(基于代码编写出来的)，放大不会变形，并且渲染速度快，相对比位图要小一些）

• 减小对DOM的操做（主要是减小DOM的重绘和回流(重排)）
  A:关于重排的分离读写
  B:使用文档碎片或者字符串拼接作数据绑定(DOM的动态建立)

• 在JS中避免“嵌套循环”（这种会额外增长不少循环次数）和“死循环”（一旦遇到死循环浏览器就卡壳了）

• 尽量使用事件委托(事件代理)来处理事件绑定的操做，减小DOM的频繁操做，其中包括给每个DOM元素作事件绑定

• 尽可能减小CSS表达式的使用(expression)

#myDiv {
    position: absolute;
    width: 100px;
    height: 100px;
    left: expression(document.body.offsetWidth - 110 + "px");
    top: expression(document.body.offsetHeight - 110 + "px");
    background: red;
  }

• 减小使用标签选择器，CSS选择器解析规则是从右向左解析

.container .link a{
    先找到全部的A，再筛选是在.link样式类中的，再次筛选是在.container样式类中的... 先找到的是全部的A，操做起来是消耗性能的，咱们在使用CSS选择器的时候尽量减小对标签选择器的使用
 }

• CSS中设置定位后，最好使用Z-INDEX改变盒子的层级，让全部的盒子不在相同的平面上，这样后续处理的时候，性能有那么一丢丢的提升

• CSS中尽可能减小对于filter滤镜属性的使用(这个属性消耗性能较大一些)

• 在CSS导入的时候尽可能减小使用@import导入式，由于@import是同步操做，只有把这个对应的CSS导入，才会向下加载，而link是异步操做

• 配置ETag(有点相似于304缓存)

• 使用window.requestAnimationFrame（JS中的帧动画）代替传统的定时器动画

• 减小递归的使用，避免死递归，避免因为递归致使的栈内存嵌套（建议使用尾递归）

• 避免使用iframe（不只很差管控样式，并且至关于在A页面中加载了其它页面，消耗较大）

DNS及HTTP通讯方式的优化

• 页面中出现音视频标签，咱们不让页面加载的时候就去加载这些资源（要否则页面加载速度会变慢）（方案：只须要设置 preload='none' 便可），等待页面加载完成，音视频播放的时候咱们在去加载音视频资源
• 页面中的数据获取采用异步编程和延迟分批加载
  使用异步获取数据，是为了下降HTTP通道的堵塞，不会由于数据没有请求回来耽误下面信息的渲染，提升页面的打开速度（咱们能够这样处理：须要动态绑定数据的区域先隐藏，等数据返回而且绑定完成后在让其显示）
  延迟分批加载相似于图片懒加载，是为了减小第一次页面加载时候的HTTP请求次数
• 基于SCRIPT调取JS的时候，可已使用 defer或者async 来异步加载

重量级优化：作CDN加速（烧钱机器）

额外技巧

1.咱们通常都把CSS放到BODY上，把JS放到BODY下面（缘由：让其先加载CSS在加载JS，先加载CSS是为了保证页面渲染的过程当中，元素是带着样式渲染的，而JS通常都是用来操做DOM元素的，须要等到元素加载完再操做）

2.能用CSS搞定的绝对不用JS，能用原生JS搞定的绝对不用插件，绝对不使用FLASH（除了音视频的低版本浏览器播放）
=>CSS处理动画等功能的性能优于JS，并且CSS中的transform变形还开起了硬件加速

3.JS中尽可能减小对EVAL的使用，由于JS合并压缩的时候，可能出现因为符号不完善，致使的代码执行优先级错乱问题，EVAL处理起来消耗的性能也是偏大一点的

4.使用keep-alive实现客户端和服务器端的长链接

5.尽可能使用设计模式来管理咱们的代码（单例、构造、Promise、发布订阅），方便后期的升级和维护

6.开启服务器端的gzip压缩（这个压缩能够有效减小请求资源文件的大小），其实客户端的图片等资源也是能够进行压缩的（可是对于24位的位图，压缩后可能会变模糊）

7.页面中不要出现无效的连接（利于SEO优化），还有其它技巧：提升关键字曝光率、img须要加alt、设置meta标签、标签语义化...

8.避免使用with语句（很是耗性能）