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、测试一下 当前优化效果
网络异常，图片无法展示
|
- 我们将继续 进行 优化
