前端性能优化实践之代码层面更改（3）

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 放在 文档加载尾部
  

6、css 优化  ?