【寒假前端青训营】笔记02-JS优化

86 阅读2分钟

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。