作為一個(gè)游戲玩家，我的內(nèi)心一直有一種做電子游戲的強(qiáng)烈欲望。幾個(gè)月前，當(dāng)我第一次參加Global Game Jam時(shí)，我就沉迷于這種沖動(dòng)。我和我的團(tuán)隊(duì)使用Vue.js為web創(chuàng)建了一個(gè)名為“ZeroDaysLeft”的單頁應(yīng)用程序。這款游戲的主題是綠色，我們考慮了資本主義對(duì)地球環(huán)境的影響，并想在游戲中添加一些有益的信息。使用vuv .js制作的游戲并不多。我的團(tuán)隊(duì)晚了一天，在玩了一場(chǎng)石頭剪刀布的游戲來選擇我們的框架后，我們趕緊去編碼它，并在周末結(jié)束時(shí)讓我們的游戲運(yùn)行起來。從本地來看，一切都很順利。自然，我們?yōu)槲覀兊拇a弗蘭肯斯坦感到自豪，并想與世界分享它。

只有一個(gè)問題，當(dāng)我們構(gòu)建應(yīng)用程序和查詢域時(shí)，它是如此占用內(nèi)存。它幾乎不能工作，我們?cè)噲D運(yùn)行它的每臺(tái)機(jī)器都會(huì)在處理地獄中掛起——甚至我那健壯的基于Intel i7處理器的系統(tǒng)也會(huì)崩潰。game jam的時(shí)間限制將我們帶回到現(xiàn)實(shí)中，我們決定將生產(chǎn)性能問題放在一邊，這樣我們至少可以在我們的設(shè)備上推出一款完整的游戲。就像幾乎每一個(gè)“完成”的項(xiàng)目一樣，我們第二天就忘記了。

只是我無法釋懷。它一直困擾著我。Vue.js嗎?Netlify嗎?是我們的密碼嗎?我必須弄清楚。

調(diào)查經(jīng)濟(jì)放緩

我用Lighthouse做了一個(gè)快速的測(cè)試。幸運(yùn)的是，F(xiàn)irefox有一個(gè)瀏覽器插件。這就是我得到的。

89%不壞。事實(shí)上，與許多廣泛使用的網(wǎng)站相比，它是體面的。測(cè)試提到了一些潛在的問題，如速度索引和第一個(gè)內(nèi)容和有意義的油漆。從理論上講，解決這些問題可以提高分?jǐn)?shù)，但不一定能改善應(yīng)用程序巨大的性能問題。我們有兩個(gè)圖像和音頻資產(chǎn)，但都不夠大，不會(huì)導(dǎo)致掛起。我們可以過度優(yōu)化這些已經(jīng)優(yōu)化過的資產(chǎn)，但這可能對(duì)我們沒有任何幫助。

測(cè)試并沒有為我們提供任何可能導(dǎo)致這種性能問題的真正見解。這時(shí)，我在想“是Vue嗎?”“我沒有理由這么想，但如果我不去核實(shí)，那就太愚蠢了。我檢查控制臺(tái)部署的站點(diǎn)，它是空白的。警告通常不會(huì)在生產(chǎn)環(huán)境中顯示。當(dāng)我在本地做同樣的操作時(shí)，我被幾個(gè)Vue警告擊中了頭部。

與大多數(shù)開發(fā)人員一樣，我對(duì)控制臺(tái)警告的理解是，它們只是警告而不是錯(cuò)誤，因此我的注意力更好地集中在其他事情上。我一直希望消除這些警告可以修復(fù)我的生產(chǎn)問題。我決定再深入一點(diǎn)，然后修復(fù)它們。

所有這些警告都來自我創(chuàng)建的用于顯示名為Cards的選項(xiàng)的組件。vue，因此該組件可能需要大量重寫。

我決定按順序處理這些控制臺(tái)警告。

> [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
 found in 
 ---> <Cards> at src/components/Cards.vue

Vue.js有很多指令，使使用框架更加直觀，例如v-for，它可以快速將數(shù)組呈現(xiàn)為列表。 使用它時(shí)，我們需要一個(gè)：key才能有效地重新渲染組件。 但是，我們使用對(duì)象作為鍵，這是非原始值，因此導(dǎo)致此錯(cuò)誤。 我決定將index.description用作新鍵，因?yàn)樗且粋€(gè)字符串，并且只要值發(fā)生更改，就可以更有效地重新呈現(xiàn)。

> [Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

found in
---> <Cards> at src/components/Cards.vue

將：key更改為字符串（index.description），以解決上一個(gè)錯(cuò)誤，從而解決了重復(fù)的鍵錯(cuò)誤。 我們只能將字符串類型寫入DOM，因此，當(dāng)我們傳遞要渲染的對(duì)象時(shí)，該對(duì)象將轉(zhuǎn)換為等效的字符串（即[object Object]），并且因?yàn)檫@以前是我們的鍵，所以每個(gè)對(duì)象盡管擁有不同的值 ，將轉(zhuǎn)換為[object Object]，因此出現(xiàn)重復(fù)的鍵警告。 既然鑰匙不是物體，警告就會(huì)消失。 所以要提高效率。

> [Vue warn]: You may have an infinite update loop in a component render function.
found in
---> <Cards> at src/components/Cards.vue

對(duì)于一個(gè)非常模糊的警告，此警告似乎是最重要的。 無限循環(huán)是內(nèi)存消耗的代名詞。 該消息并未告訴我們可能出了什么問題。 它確實(shí)暗示它與組件中的render函數(shù)有關(guān)。 也許是因?yàn)槲覀兊鸟斂痛a，我們觸發(fā)了不間斷的更新，而這占用了太多的計(jì)算能力，從而導(dǎo)致瀏覽器和設(shè)備崩潰。

該警告至少告訴我們要檢查Cards.vue，所以我的第一個(gè)想法是檢查組件中的反應(yīng)性，因?yàn)檫@可能會(huì)導(dǎo)致錯(cuò)誤。 反應(yīng)性屬性在更改后會(huì)觸發(fā)重新渲染。

我們正在顯示index.days和index.description中的數(shù)據(jù)。 但是，我們不會(huì)更改此數(shù)據(jù)。 我們從cardInfo數(shù)組獲得索引。

> v-for="index in cardInfo.sort(() => Math.random() - 0.7).slice(0,4)"

我們使用此代碼塊對(duì)數(shù)組中的元素進(jìn)行隨機(jī)排序，然后將前四個(gè)元素顯示為玩家選擇的選項(xiàng)。當(dāng)用戶單擊一個(gè)選項(xiàng)時(shí)，將調(diào)用effects（）函數(shù)，除了計(jì)算動(dòng)作如何影響游戲狀態(tài)之外，它還使用cardInfo上的拼接原型刪除前四個(gè)元素。

在使用虛擬DOM的Vue這樣的框架中，隨著諸如cardInfo之類的反應(yīng)性屬性一起使用，每當(dāng)數(shù)據(jù)屬性的值更改時(shí)，都會(huì)觸發(fā)重新渲染。在本例中，我們將直接使用sort（）原型對(duì)其進(jìn)行更改，然后刪除元素以僅對(duì)其進(jìn)行重新排序。所有這些都會(huì)觸發(fā)“無限”重新渲染，從而引發(fā)警告。

我決定更改如何過濾數(shù)據(jù)的邏輯，并停止對(duì)反應(yīng)性屬性cardInfo進(jìn)行多次更改。我安裝了lodash.shuffle并定義了一個(gè)計(jì)算屬性shuffledList（），它將創(chuàng)建一個(gè)名為list的cardInfo副本。我對(duì)其應(yīng)用了隨機(jī)播放操作，并返回了“凍結(jié)”結(jié)果，該結(jié)果將被切片以顯示四張卡片。我們使用了Object.freeze（），它將使我們返回的對(duì)象不可變，從而完全停止了所有重新渲染。問題解決了。

被我的框架絆倒

老實(shí)說，當(dāng)我開始調(diào)查時(shí)，我認(rèn)為我必須優(yōu)化很多資產(chǎn)。 它只是說明了在使用許多框架抽象時(shí)我們必須非常小心—特別是在Vue中，必須正確且僅在必要時(shí)才使用每個(gè)指令，因?yàn)樗鼈兘^對(duì)有折衷。

這讓我想到了我在做什么，這可能會(huì)給我的應(yīng)用程序增加不必要的性能問題。 大多數(shù)現(xiàn)代的前端框架都進(jìn)行了很多抽象，使我們更容易地為Web制作應(yīng)用程序。記住使用這些東西可能會(huì)引起的潛在性能問題很重要。 我經(jīng)常使用Vue.js，并決定探索一些我使用的指令，甚至不考慮它們可能對(duì)我的應(yīng)用程序帶來的性能影響。 特別是三個(gè)非常流行的指令對(duì)我來說很突出。

• v-if and v-show

這兩個(gè)指令都用于有條件地渲染元素，但是它們?cè)谀缓蟮墓ぷ鞣绞絽s大不相同，因此，因此必須使用不同的方式。 v-if最初不渲染組件，僅在條件為真時(shí)才渲染組件。 這意味著，如果您多次切換組件的可見性，它將被重復(fù)重新渲染。 如果您要多次更改組件的可見性，則不想使用此功能。 這會(huì)影響您的表現(xiàn)。

v-show是一個(gè)很好的選擇。 無論使用CSS如何，這都會(huì)呈現(xiàn)您的組件，但是只會(huì)根據(jù)條件是true還是false使其可見。 這種方法確實(shí)有其缺點(diǎn)，因?yàn)樗粫?huì)將非必要組件的渲染推遲到實(shí)際需要它們出現(xiàn)在屏幕上的時(shí)候。 如果您的初始渲染不太沉重，則效果很好。

• v-for

此偽指令通常用于從數(shù)組中呈現(xiàn)列表。它具有item in list形式的特殊語法，其中l(wèi)ist是源數(shù)據(jù)數(shù)組，而item是要迭代的數(shù)組元素的別名。默認(rèn)情況下，Vue在源數(shù)據(jù)陣列上添加監(jiān)視程序，每當(dāng)發(fā)生更改時(shí)，該監(jiān)視程序就會(huì)觸發(fā)重新渲染。持續(xù)不斷的重新渲染會(huì)對(duì)應(yīng)用程序性能產(chǎn)生不利影響?？紤]實(shí)用程序很重要，如果您只想可視化對(duì)象，則Object.freeze（）是一個(gè)很好的解決方案，可以大大提高性能。但是請(qǐng)務(wù)必記住，您將無法更新組件或編輯對(duì)象數(shù)據(jù)。

這樣做并意識(shí)到Lighthouse可能會(huì)檢查以更直接的方式查看可能影響用戶體驗(yàn)的應(yīng)用程序性能，我被問到如何跟蹤服務(wù)器上的應(yīng)用程序性能。我們是否讓直覺和開發(fā)人員知道自己在做什么以及正在使用最佳實(shí)踐的假設(shè)？無論如何，這種整體經(jīng)驗(yàn)使我對(duì)單頁應(yīng)用程序性能有不同的看法。隨時(shí)在GitHub上查看項(xiàng)目存儲(chǔ)庫，或在Twitter上對(duì)我問好。