JavaScript 总体优化
1、提升文件加载性能
加载元素的顺序 CSS 文件放在 <head> 里, JavaScript 文件放在 <body> 里。
2、变量和函数优化
- 尽量使用 id 选择器
- 尽量避免使用 eval
- JavaScript 函数尽可能保持简洁
- 使用事件节流函数
- 使用事件委托
3、动画优化
- 避免添加大量 JavaScript 动画
- 尽量使用 CSS3 动画
- 尽量使用 Canvas 动画
- 合理使用 requestAnimationFrame 动画代替 setTimeout、setInterval
- requestAnimationFrame可以在正确的时间进行渲染,setTimeout(callback)和setInterval(callback)无法保证 callback 回调函数的执行时机。
4、合理使用缓存
- 合理缓存 DOM 对象
- 缓存列表长度
- 使用可缓存的 Ajax
JavaScript 缓存优化
1、Cookie
通常由浏览器存储,然后将 Cookie 与每个后续请求一起发送到同一服务器。收到HTTP 请求时,服务器可以发送带有 Cookie 的 header 头。可以给 Cookie 设置有效时间。
- 会话管理:登录名,购物车商品,游戏得分或服务器应要记录的其他任何内容
- 个性化:用户首选项,主题或其他设置
- 跟踪:记录和分析用户行为,比如visitkey
2、sessionStorage
创建一个本地存储的键/值对。
- 缓存。
- 页面应用页面之间传值。
3、LocalStorage
本地存储。
- 缓存静态文件内容 JavaScript /CSS(比如百度M站首页)
- 缓存不常变更的 API 接口数据
- 储存地理位置信息
- 浏览在页面的具体位置
4、IndexedDB
索引数据库。
- 客户端存储大量结构化数据
- 没有网络连接的情况下使用(比如 Google Doc、石墨文档)
- 将冗余、很少修改、但经常访问的数据,以避免随时从服务器获取数据
七、JavaScript 模块化加载方案和选型
- CommonJS
旨在 Web 浏览器之外为 JavaScript 建立模块生态系统。Node.js 模块化方案受 CommonJS。
- AMD (Asynchronous Module Definition)(异步模块定义)规范。
RequireJS 模块化加载器:基于 AMD API 实现。
- CMD( Common Module Definition)(通用模块定义)规范。
SeaJS 模块化加载器:遵循 CMD API 编写。
- ES6 import。