js页面的性能优化

一 、基础优化

1.减少http的请求次数

    1)对css和js代码进行合并

    2)对于图片可以用雪碧图(也就是精灵图),对于比较小的图片可以使用base64编码

    3)对于图标可以使用字体图标

2.减少资源体积

    1)对css、js进行压缩

    2)对于图片大小要有控制，对于过大的图片需要进行压缩处理

    3)使用 gzip对静态资源进行压缩，（gzip能对压缩之后的资源再进行压缩）

3.加快静态资源请求速度

    1)使用CDN加速

    2)利用多个域名来存储静态资源

4.使用缓存

二 、代码优化

1.html、css代码的优化

    1)把css样式表放置在顶部，把js放置在页面底部

    2)避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示要比div+css布局慢

    3)对于很多地方都要用到的样式编写class而不是style

2.js代码优化

    1)减少重复性代码，代码重复利用，精简代码

    2)前端用变量保存请求结果，每次操作本地变量，不用请求，减少请求次数

    3)少用全局变量，缓存dom节点查找的结果，

    4)减少不必要的dom操作，例如：用innerHTMl代替dom操作，减少dom操作的次数

3.大量图片的优化措施

    1)图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载

    2)如果幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载