1、JS 开销
-
JS 不仅需要
通过网络加载进来，而且需要 解析/编译，执行， 都会耗时，并且相对于 图片和 css 会消耗更多的时间 -
此处对比
引入 js 和 引入 图片的 时间及处理对比
- 并且 在
performance中也可看到 其实 js 占了很多的时间
- 那既然 js 开销这么大
如何解决这个事情 ？
- 后面会详细 写这部分内容 敬请期待~
2、配合 V8 有效代码优化 ？
- 简单来讲 帮助优化器 正确优化， 而不是帮倒忙
敲一个 例子对比 一下
const { performance, PerformanceObserver } = require("perf_hooks");
const num1 = 1;
const num2 = 3;
function add(a, b) {
return a + b;
}
performance.mark("start");
for (let i = 0; i < 1000; i++) {
add(num1, num2);
}
add(num1, "test");
for (let i = 0; i < 1000; i++) {
add(num1, num2);
}
performance.mark("end");
const observer = new PerformanceObserver((list) => {
console.log(list.getEntries()[0]);
});
observer.observe({ entryTypes: ["measure"] });
performance.measure("测量测试", "start", "end");
添加 add(num1, "test") 时 优化器会尝试优化 导致用时更多
- 不添加时
- 所以代码中应该 尽量减少 这种操作
准确来说 遇到函数声明 暂时跳过 不看函数内容，调用时才进入函数内部进行解析，高效的做法是 看到函数已经开始准备预先解析，遇到函数调用时，可更快执行函数和解析
3、函数 优化
-
举个
反面例子 -
新建一个 testFuc.js 并在 App 引用，再更改一下 webpack.config.js 输入和输出
-
这就是一个 testFuc.js 普通的函数
- App.js 引入并在 constructor 调用
- 更改 webpack 配置
- 打包结果
- 去 performance/network 看一下 时间
-
怎么解决 ？正面例子 -
解决的思想
就是 使得 解析器 看到函数时 就同时准备解析
比如此处 函数就给后面加上括号，然后再对比 加载时间，我这自动保存会去掉 括号，暂时不写出来
-
另外一个问题 即使加了括号，后续 js 压缩也会去掉，现在 已经解决了这个问题 ， uglify
-
兼容之前版本 可以使用 optimize.js github.com/nolanlawson…
4、对象优化 ？（重要：new 一个对象 haha）
1、避免隐藏类调整
- 此处需要 调整一下顺序就可，也就是说
实例化不同的内容时 统一一下顺序 比如 第一个是 color number 第二个也要写成 先color 后number
2、避免实例化后添加新属性
- 此处 说明创建时 就一次性创建需要的内容
3、将 array-like 先转为 Array 再进行便利和处理
4、避免读取超过 数组长度
- 这个在敲代码 应该注意 不过执行也会报错，出错概率较低
5、避免元素类型转换
- 类型越具体 越利于优化，改动类型不利
5、HTML 优化 ?
-
写 meta 只写自己需要的部分
-
html5 语义化标签
-
js 放在 文档加载尾部
