爲什麼說DOM操作是昂貴的
我們直到，首先DOM節點其實也是JS對象，爲什麼操作虛擬DOM沒有昂貴一說，操作真實的DOM節點就有昂貴之談呢？
首先可以確定的是操作DOM本身並不會費時費力，但是DOM身處於瀏覽器大環境中，操作DOM帶來的repaint和reflow造成的影響就十分可觀了。
TCP字段和HTTP字段
講解TCP字段的文章並不多，有個圖可以方便記憶：
HTTP字段相對來說就非常複雜了，一般來說，分爲通用首部字段，請求首部字段和響應首部字段。
舉幾個例子，通用首部常用的有Cache-control，connection，content等。
請求常用有，if-match（etag），if-modefied-since（last-modefied），Authorization，Host，referer。
響應常用的有，Etag，server，access-control-allow-origin等
雙向綁定
今天被問到了Vue的雙向綁定，充分暴露了我對Vue膚淺的認識，即便Object.defineProperty和Proxy的大名已經如雷貫耳，還是沒激起我去了解他們的好奇心。儘管其實React中這樣的寫法已經寫了無數遍了。
拿表單數據來說，在vue中使用v-model可以實現視圖對數據的修改，同時也可以實現數據對視圖的修改。在React中要實現這個的話要費勁一些，但是也很簡單：
function App() {
const [value, setValue] = useState("");
function changeData(e) {
setValue(e);
}
return (
<div className="App">
<h1>如何實現React雙向綁定</h1>
<input
value={value}
onChange={e => {
changeData(e.target.value);
}}
/>
<button
onClick={() => {
setValue("sad");
}}
>
設置
</button>
{value}
</div>
);
}
估計很多人都寫過這樣的代碼 ，不知道有沒有人和我一樣根本沒往雙向綁定這方面去思考，但是確實，通過點擊按鈕，監聽到了按鈕事件，數據改變，同時通過修改表單數據，最後也反映到了視圖的改變。
但是再深究一下，這種方式只是達到了數據雙向綁定的效果，原理上與Vue的實現還是大相徑庭的。
最後再說一下單向數據流和雙向綁定的關係，其實沒有關係，很多人會把他們弄混，其實Vue也是遵循的單向數據流，父組件向子組件傳值，子組件去修改父組件中值只能使用傳函數的方式。所以說雙向綁定只是Vue爲了方便開發者做的一個功能。
就算爲了深入學習下雙向綁定，也要把Mobx提上日期了呀。
Hooks的優點
- 代碼複用更加方便
- 代碼量顯著減少
- 有些情況下擁有更好的性能
- 更容易拆分組件
解決首屏渲染問題
因爲現在的SPA基本離不開Webpack，所以白屏問題百分之80都是在基於Webpack優化。這篇文章可以讀一下，主要講了下面幾點：
- 在HTML內實現Loading狀態
- 去掉外聯 css
- 緩存
- 使用動態 polyfill
- 使用 SplitChunksPlugin 拆分公共代碼
- 正確地使用 Webpack 4.0 的 Tree Shaking
- 使用動態 import，切分頁面代碼，減小首屏 JS 體積
- 編譯到 ES2015+，提高代碼運行效率，減小體積
- 使用 lazyload 和 placeholder 提升加載體驗
- 骨架屏
再有就是很招打的回答，用SSR唄。