前端性能优化十五：js优化的总体原则

1. js优化的总体原则:

js 复制代码

①. 当需要时才优化:
    a. 项目到了某个阶段才需要优化.
       (1). 大的改版、代码架构无法满足现有业务.

②. 考虑可维护性:
    a. 考虑团队的开发水平、规范.
    b. 不是为了优化牺牲了后续的可维护性.

(1). 提升JS文件的加载性能:

js 复制代码

①. 加载元素的顺序:
    a. css文件放在<head>里,js文件放在<body>结尾文件.
    b. 反过来会阻塞整个页面的渲染.
    c. 让css文件正常加载并渲染出来,其它的DOM结构也要正常的加载,最后加载js文件.

(2). JS变量和函数优化:

js 复制代码

①. 尽量使用id选择器:
    a. 在页面中唯一,查询很快.
    b. class选择器在页面中不唯一,可能会有多处.

②. 尽量避免使用eval:
    a. 这个方法非常耗费性能

③. js函数尽可能保持简洁:
    a. 合理分成多个按功能划分的函数.
    b. SOLID原则.

④. 使用事件节流函数(debounce):
    a. 如响应scroll和resize事件等,监听窗口变化的回调函数,它是会一直在很快执行的.
    b. 可以使用节流函数,每隔一段时间如100ms才执行一次.
    c. 提高了效率和性能的提升.

⑤. 使用事件委托:
    a. 如:ul li span a
    b. 事件响应不用绑定到li或span上,可以直接绑定到ul上.
    c. 在事件响应的时候,函数不用查询到每一个a上,而是直接到ul上就可以了.
    d. 可以提高查询效率和事件响应速度.

(3). JS动画优化:

js 复制代码

①. 避免添加大量JS动画

②. 尽量使用CSS3动画:
    a. css可以直接访问浏览器的GPU

③. 尽量使用Canvas动画:
    a. 稍微比纯js的效果要好一点.

④. 合理使用requestAnimationFrame动画代替setTimeout、setInterval:
    a. requestAnimationFrame可以在正确的时间进行渲染.
    b. setTimeout、setInterval无法保证回调函数执行的时机.
    c. 比如多个setTimeout,是无法保证哪个先调用的、顺序加载的.

⑤. 动画和事件进行分离:
    a. 动画的执行和绑定的事件单独处理而不要耦合在一起.
    b. 否则动画执行的时机和回调的时机是很难保证的.

(4). 合理使用js的逻辑缓存:

js 复制代码

①. 合理缓存DOM对象:
    a. 每次浏览器参与DOM对象都是比较废时间的.
    b. 把查询完的DOM节点缓存到一个变量中,取这个对象,并且对这个对象进行事件绑定,就不用再查询浏览器了.

②. 缓存列表长度

③. 使用可缓存的Ajax:
    a. ajax对应的接口:
       (1). 如果是很少变的或固定一段时间很少更新的接口,可以开启cache.
       (2). 就不用每次从服务器上取数据,从cache中获取数据.