「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

1. 对象优化可以做到哪些？

以相同顺序初始化对象成员，避免隐藏类的调整
实例化后避免添加新属性
尽量使用array 代替 array-like 对象
... 我们的优化都是为了迎合V8引擎，提升效率
保证对象的初始化的顺序尽量一致
避免读取超过数组的长度
避免元素类型转换

1.1 以相同顺序初始化对象成员，避免隐藏类的调整

// goods
class RectArea { // HC0
  constructor(l, w) {
    this.l = l; // HC1
    this.w = w; // HC2
  }
}

const rect1 = new RectArea(3, 4)
const rect2 = new RectArea(5, 6)

// bad
// 下面的声明方式，会增加隐藏类型，效率没有上面的高

const car1 = {color: 'red'} // HC0
car1.seats = 4; // HC1

const car2 = {seats: 2} // HC2
car2.color = 'blue'; // HC3

1.2 实例化后避免添加新属性

// In-object 属性
const car1 = {color: 'red'} 

// Normal/Fast 属性，存储property store里，需要通过描述数组间接查找
car1.seats = 4;

1.3 尽量使用array 代替 array-like 对象

argument 不能进行forEach

可以用间接的方式来实现forEach，但是不如在真实数组效率高

// 不如在真实数组效率高
Array.prototype.forEach.call(arrObj, (value, index) => {
  console.log(`${index}:${value}`);
});

我们可以使用slice 转换为真实的数组，效率会获得提升

const arr = Array.prototype.slice.call(arrObj, 0); // 转换的代价

arr.forEach((value, index) => {
 console.log(`${index}:${value}`);
})

1.4 避免读取超过数组的长度

function foo(arr) {
  for (let i = 0; i <= arr.length; i++) { // 越界比较
    // 1. 造成undefined 跟数字进行比比较
    // 2. 没原型链的查找
      if(arr[i] > 1000){  // 3. 业务上无效、出错
          console.log(arr[i])
      }
  }
}

foo([1, 100, 1000])

1.5 避免元素类型的转换

const arr = [3, 2, 3] // PACKED_SMI_ELEMENTS 
// PACKED_SMI_ELEMENTS 表示 每个元素都有值满的_整型

arr.push(4.4) // 需要对类型进行更改 更改为 PACKED_DOUBLE_ELEMENTS

类型越具体做的优化就越多

可以配合下图来看出数组改变对应编辑器的类型

2. HTML 优化

HTML 优化也很重要，下面的基本都用到过，作为一个复习来看下

HTML 优化减少 iframes 的使用，
- 父 html 需要等待所有 iframe 加载完成
压缩空白符
避免节点深层次的嵌套
避免 table 布局
删除注释
css&javascript 尽量外链
删除元素默认属性

HTML 优化借助工具

html-minifier 可以对上面的点进行优化处理

3. CSS 优化

CSS 是自右向左👈 去读的

主要从下面两点进行优化

降低CSS 对渲染的阻塞
利用GPU进行动画的完成

3.1 contain 属性

CSS contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。

这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。

这个属性在包含大量独立组件的页面非常实用，它可以防止某个小部件的 CSS 规则改变对页面上的其他东西造成影响。

developer.mozilla.org/zh-CN/docs/…

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。developer.mozilla.org/zh-CN/docs/…

3.2 font-display

www.w3cplus.com/css/font-di…

当我们使用JavaScript来控制字体加载的时候，我们希望确保文本一开始默认就是可见的，当自定义字体下载完毕后载应用自定义字体渲染文本。

可以让文字更早显示出来，减少都抖动

性能优化之对象、HTML、CSS优化