前端js，如何在結構化與性能中作取捨。

js發展中的問題

隨着前端web技術的發展，js要解決的問題也變得愈來愈多，愈來愈複雜。
解決更復雜的問題，須要更好的結構。 解決更復雜的問題，也須要更好的性能。
結構的優化在必定程度上會犧牲性能，一樣的，性能的優化也有可能會破壞原有的結構。

通常化的例子

咱們先來看看之前這些問題是如何（被）解決（妥協）的。

jquery vs 原生api

回到10年前，精通jquery是前端程序員的一個里程碑，沒有人執着於原生api。原生api有更好的性能，jquery有更好的結構。但問題在於開發效率的提高，兼容性的提高，jquery結構化的收益大大超過了其對性能的一點點浪費。

再來看angular1 vs jquery

回到5年前，面試最喜歡問，你知道什麼是髒值檢測麼？angular不只帶來了更復雜的結構，並且帶來了更難理解的開發模式。但出乎意外的，jquery敗下陣來。
angular的性能更差，兼容性也不如沉澱了多年的jquery。 但是，angular勝在了面對複雜問題時的解決能力、維護支出與開發速度。5年前，互聯網正處於高速發展中，大型項目增加迅速，對開發資源的需求達到了頂峯。時間就是金錢，高效率就是時間。

react（vue） vs angular1

再來看兩年前這場pk，隨着MVVM的框架日漸成熟，angular1敗下陣來。react借鑑了angular1的思想，vue同時借鑑了react和angular1的思想。jsx等模板語法帶來了開發效率的提高。grunt，gulp，webpack等工具帶來了工程化能力的提高。es6的逐步成熟也給開發者帶來了更多的效率。這些都使前端的結構更加的複雜。但別忘了虛擬dom，帶來了更好的性能提高。

這一路走來，前端的結構變得愈來愈複雜，但性能卻並無愈來愈差，在大型網站項目中，反而性能獲得了提高。由於複雜項目中，難以維護的雜亂代碼帶來的性能損耗，有可能超過層級結構比較深所帶來的損失。

結構化與性能的取捨，在實際開發中，如何進行呢？

實際開發中，實際上是在大環境中的一個縮影。
在當前的前端開發技術背景下。結構化的問題每每交給框架來解決，項目結構化問題應按需求來構建。

1. 如開發大型項目，則應首先對性能有所預期。性能要求低的部分能夠採用通用框架，性能要求高的部分，能夠採用更極端的技術方案。
2. 如開發小型項目，則應在框架選擇上有所取捨，捨棄複雜的架構每每更節約資源。

最後，若是在開發項目過程當中，遇到了繞不開的性能問題，個人解決思路以下，可供借鑑：

1. 首先，若是是代碼質量問題致使的性能問題，應先優化代碼質量。將問題從性能與架構的衝突，變爲性能與編碼能力的衝突。
   
2. 如確實因架構致使的性能問題被識別出來之後，應首先考慮這樣的性能需求是否應由前端來保證，是否能夠由服務端輔助完成，或者業務是否設計合理。
   
3. 最後，如以上兩點還不能解決問題，那麼在有限的範圍內，能夠採用其餘框架或方案來解決原框架的性能瓶頸，或者能夠期待下一次的項目升級與重構了。

總結

結構化與性能自己並非徹底對立衝突的兩個方面。雖然他們兩者互相影響，但隨着我的計算機軟硬件升級、v8引擎帶來的性能提高，以及MVVM框架的日趨成熟，結構化代碼組織現在愈來愈遠離web開發的性能瓶頸區。
但不幸的是，性能問題還將在可預見的將來內，始終如影隨形的伴隨着每一位開發者。