1. js优化的总体原则:
①. 当需要时才优化:a. 项目到了某个阶段才需要优化. (1). 大的改版、代码架构无法满足现有业务.②. 考虑可维护性:a. 考虑团队的开发水平、规范.b. 不是为了优化牺牲了后续的可维护性.(1). 提升JS文件的加载性能:
①. 加载元素的顺序:a. css文件放在<head>里,js文件放在<body>结尾文件.b. 反过来会阻塞整个页面的渲染.c. 让css文件正常加载并渲染出来,其它的DOM结构也要正常的加载,最后加载js文件.(2). JS变量和函数优化:
①. 尽量使用id选择器:a. 在页面中唯一,查询很快.b. class选择器在页面中不唯一,可能会有多处.②. 尽量避免使用eval:a. 这个方法非常耗费性能③. js函数尽可能保持简洁:a. 合理分成多个按功能划分的函数.b. SOLID原则.④. 使用事件节流函数(debounce):a. 如响应scroll和resize事件等,监听窗口变化的回调函数,它是会一直在很快执行的.b. 可以使用节流函数,每隔一段时间如100ms才执行一次.c. 提高了效率和性能的提升.⑤. 使用事件委托:a. 如:ul li span ab. 事件响应不用绑定到li或span上,可以直接绑定到ul上.c. 在事件响应的时候,函数不用查询到每一个a上,而是直接到ul上就可以了.d. 可以提高查询效率和事件响应速度.(3). JS动画优化:
①. 避免添加大量JS动画②. 尽量使用CSS3动画:a. css可以直接访问浏览器的GPU③. 尽量使用Canvas动画:a. 稍微比纯js的效果要好一点.④. 合理使用requestAnimationFrame动画代替setTimeout、setInterval:a. requestAnimationFrame可以在正确的时间进行渲染.b. setTimeout、setInterval无法保证回调函数执行的时机.c. 比如多个setTimeout,是无法保证哪个先调用的、顺序加载的.⑤. 动画和事件进行分离:a. 动画的执行和绑定的事件单独处理而不要耦合在一起.b. 否则动画执行的时机和回调的时机是很难保证的.(4). 合理使用js的逻辑缓存:
①. 合理缓存DOM对象:a. 每次浏览器参与DOM对象都是比较废时间的.b. 把查询完的DOM节点缓存到一个变量中,取这个对象,并且对这个对象进行事件绑定,就不用再查询浏览器了.②. 缓存列表长度③. 使用可缓存的Ajax:a. ajax对应的接口: (1). 如果是很少变的或固定一段时间很少更新的接口,可以开启cache. (2). 就不用每次从服务器上取数据,从cache中获取数据.