前端性能优化之企业项目实战篇(2)

89 阅读1分钟

0、注意: 引用图片均来自于 我上系列性能优化文章

1、本节主要解决上一节 JS 计算花了 很多时间的问题进行分析和尝试

image.png

  • 首先 确认一下优化方法(图片来自于我之前发布的 文章 )

image.png

  • 总结来说 有这几种方式

image.png

  • 还有一点 小需要知道的是 V8 优化机制

image.png

image.png

此处 举个例子说明这个事情


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");

  • 我们进行 对比

image.png

2、实践一下 这几个 优化方式

1、代码拆分

image.png 比如此处展示部分

image.png

image.png

2、写代码 注意点,这些地方需要更改和注意

image.png

image.png

image.png

image.png

image.png

3、HTML 优化 image.png

  • 项目中原本 三个 和表格相关的部分,都是要 flex 进行 布局替换, 项目布局 无 table 布局, 以 felx 为主

  • 压缩 空白字符 和 删除 注释 在 webpack 压缩时候 会处理

4、CSS 优化

image.png

image.png

image.png

image.png

3、测试一下 当前优化效果

image.png

  • 我们将继续 进行 优化