相親原始碼的效能為何這麼重要，該怎樣實現優化？

一、使用 requestAnimationFrame 來實現視覺變化

/**
 * If run as a requestAnimationFrame callback, this
 * will be run at the start of the frame.
 */
function updateScreen(time) {
  // Make visual updates here.
}
requestAnimationFrame(updateScreen);

二、使用 Web Workers

var myWorker = new Worker('worker.js');
// 你可以通過postMessage() 方法和onmessage事件向worker傳送訊息。
first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}
second.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

myWorker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('Message received from worker');
}

三、使用位操作

if (value % 2) {
	// 奇數
} else {
	// 偶數 
}
// 位操作
if (value & 1) {
	// 奇數
} else {
	// 偶數
}

~~10.12 // 10
~~10 // 10
~~'1.5' // 1
~~undefined // 0
~~null // 0

const a = 1
const b = 2
const c = 4
const options = a | b | c

// 選項 b 是否在選項中
if (b & options) {
	...
}

四、不要覆蓋原生方法

五、降低 CSS 選擇器的複雜性

#block .text p {
	color: red;
}

內聯 > ID選擇器 > 類選擇器 > 標籤選擇器

六、使用 flexbox 而不是較早的佈局模型

• Chrome 29+
• Firefox 28+
• Internet Explorer 11
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

七、使用 transform 和 opacity 屬性更改來實現動畫

八、合理使用規則，避免過度優化

• 白屏時間：指從輸入網址，到頁面開始顯示內容的時間。
• 首屏時間：指從輸入網址，到頁面完全渲染的時間。

<script>
  new Date() - performance.timing.navigationStart
  // 通過 domLoading 和 navigationStart 也可以
  performance.timing.domLoading - performance.timing.navigationStart
</script>