①. 当需要时才优化:
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 a
b. 事件响应不用绑定到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中获取数据.