提升JS的执行效率
JS优化总体原则
- 当需要时才优化
- 考虑可维护性
提升JS文件加载性能
- 加载元素的顺序CSS文件放在
<head>里，JS文件放在<body>里。
JS变量和函数优化
- 尽量使用id选择器
- 尽量避免使用eval
- JS函数尽可能保持简洁
- 使用事件节流函数
- 使用事件委托
- 合理使用
requestAnimationFrame动画代替setTimeout,setIntervalrequestAnimationFrame可以在正确的时间进行渲染，setTimeout（callback）和setInterval (callback)无法保证callback回调函数的执行时机
合理使用缓存
- 合理缓存DOM对象
- 缓存列表长度
- 使用可缓存的Ajax
对JS的缓存进行优化
Cookie
- 通常由浏览器存储，然后将Cookie与每个后续请求一起发送到同一服务器。收到HTTP请求时，服务器可以发送带有Cookie的header头。可以给Cookie设置有效时间。
- 应用于：
- 会话管理：登录名，购物车商品，游戏得分或服务器应要记录的其他任何内容
- 个性化： 用户首选项，主题或其他设置
- 跟踪： 记录和分析用户行为，比如埋点
sessionStorage
- 创建一个本地存储的键/值对
- 应用于
页面应用页面之间的传值
IndexedDB
- 索引数据库
- 应用于
- 客户端存储大量结构化数据
- 没有网络连接的情况下使用（比如：Google Doc,石墨文档）
- 将冗余，很少修改，但经常访问的数据，以避免随时从服务器获取数据
LocalStorage
- 本地存储
- 应用于
- 缓存静态文件内容JS/CSS (比如百度M站首页)
- 缓存不常变更的API接口数据
- 存储地理位置信息
- 浏览在页面的具体位置
选择合适的模块化加载方案
JS模块化加载方案和选型
-
CommonJS
- 旨在Web浏览器之外为JavaScript建立模块生态系统
- Node.js模块化方案受CommonJS的影响
-
AMD (Asynchronous Module Definition) (异步模块定义) 规范
- RequireJS模块化加载器： 基于AMD API 实现
-
CMD (Common Module Definition) (通用模块定义) 规范
- SeaJS模块化加载器：遵循CMD API 编写
-
ES6 import
代码示例：
/* CommonJS */
// 引入依赖
var store = require('store');
// exports
exports = function() {
return store.get('customers');
}
/* NodeJS module */
// 引入依赖
var store = require('store');
function customerStore() {
return store.get('customers');
}
// exports
modules.exports = customerStore;
/* RequireJS */
// <script data-main="scripts/main" src="scripts/require.js"></script>
/* SeaJS */
// 方式一
define(function(require, exports, module) {
// 模块代码
});
// 方式二
define('module', ['module1','module2'], function(require, exports, module){
// 模块代码
});
/* ES6 import */
// square.js
export function square(x) {
return x*x;
}
// main.js
import { square } from 'square';
console.log(square(10)); // 100
