0、注意: 引用图片均来自于 我上系列性能优化文章
1、本节主要解决上一节 JS 计算花了 很多时间的问题进行分析和尝试
- 首先 确认一下优化方法(图片来自于我之前发布的 文章 )
- 总结来说 有这几种方式
- 还有一点 小需要知道的是 V8 优化机制
此处 举个例子说明这个事情
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");
- 我们进行 对比
2、实践一下 这几个 优化方式
1、代码拆分
比如此处展示部分
2、写代码 注意点,这些地方需要更改和注意
3、HTML 优化
-
项目中原本 三个 和表格相关的部分,都是要 flex 进行 布局替换, 项目布局 无 table 布局, 以 felx 为主
-
压缩 空白字符 和 删除 注释 在 webpack 压缩时候 会处理
4、CSS 优化
3、测试一下 当前优化效果
- 我们将继续 进行 优化