「每日一題」你是如何做性能優化的？

今天的主題其實是「答題思路」，或者說是「解決問題的思路」。

為什麼要做性能優化？

有些人看到這個題目，一上來就說「減少請求，添加緩存」之類的。不是說你錯了，而是說你回答問題的時候沒有思路。

首先你要明白一點：做任何事情都是有「目的」的。

吃飯喝水是為了生存，那麼做性能優化的「目的」是什麼？

想過這個問題么？如果沒想過，今後就要刻意問問自己了。

優化的目的可以是：

1. 增強用戶體驗。但是這樣說很虛，具體來說可以是：

1.1. 加快頁面展示速度（慢）

1.2. 加快頁面運行速度（卡）

2. 節約伺服器帶寬流量

3. 減少伺服器壓力

無論如何，你需要有一個目的。

什麼時候做性能優化？

你有目的了，不代表你馬上就要去採取行動。

首先，你應該完成了網頁的基本功能後再優化。如果你在前期就花時間優化，那麼後期有可能沒時間做其他功能。

其次，在沒有找到性能瓶頸之前，不要優化！

在沒有找到性能瓶頸之前，不要優化！

一個網頁的性能到底跟哪幾方面有關？你優化的地方屬於哪一方面？這是需要首先搞清楚的。

一個網頁的大概流程包括：

1. DNS 查詢
2. 發送請求
3. 等待伺服器響應
4. 下載伺服器響應內容
5. 解析 HTML、CSS、JS 等
6. 渲染 HTML、CSS、JS 和圖片等
7. 響應用戶的點擊事件等

如果你的性能瓶頸在「等待伺服器響應」這一步，那麼你怎麼優化 JS、CSS 都沒用。

所以再說一遍：在沒有找到性能瓶頸之前，不要優化！

怎麼優化？

等你找到了瓶頸所在，就可以「對症下藥」了。

1. DNS 查詢——減少網頁所用的域名個數，可可以減少 DNS 查詢的時間
2. 發送請求——添加緩存、合併文件，都可以減少請求數量
3. 等待伺服器響應——這一步的優化只能是在 MySQL 和後台方面做考慮了
4. 下載伺服器響應內容——添加 Etag、Expires 響應頭，得到 304 響應，可以降低下載量
5. 解析 HTML、CSS、JS 等——去掉無用的 HTML、CSS 和 JS 即可減少解析時間
6. 渲染 HTML、CSS、JS 和圖片等——避免使用低效的 HTML、CSS 和 JS 即可
7. 響應用戶的點擊事件等——盡量不在前端做複雜的運算等……

整體思路

看看上面的答題思路：

1. 為什麼要做？
2. 什麼時候做？
3. 怎麼做？

這是一個最基本的答題思路，希望對你有幫助。

更多前端交流，盡在前端交流4群：392054247