手機網站太慢手機

Question

我正在建立一個網站的移動部分的原型。它不使用動態工作人員，只使用jQuery和Foundation 4.當我在iphone的瀏覽器中測試網站時，加載和響應觸摸非常緩慢。一些有經驗的人可以告訴我所有的事情，以確保網站在移動設備上加載和運行速度更快嗎？

我所有的圖像都保存爲「網頁」，所以他們不應該是一個問題。它會慢，因爲我的CSS樣式表非常冗長？我不是一個將一個類與許多事情相結合和應用的專家，所以我可能擁有太多的ID和單獨的類？在這種情況下，這會是一個大問題嗎？另外，它可能會很慢，因爲我正在使用基金會，jQuery和Flexlider插件，他們每個人都有自己的多個樣式表和.js文件？我應該扔掉我沒有使用的文件嗎？我在正確的軌道上，我還能做什麼？先謝謝你。

Answer 1

有一些事情幫助我使我的手機應用程序更快。我遇到同樣的問題，屏幕響應非常低。

---

擺脫每無用的代碼

我有很多的註釋代碼，而我竟然沒有使用文件。這包括未使用的CSS樣式。

你甚至需要類或ID？

看着我的應用程序，我幾乎在任何元素的類或Id。我是否可以使用元素選擇器。 here關於選擇器的更多信息。遵循DOM結構。
我主要使用一個類爲組和Ids爲一個特定的元素（我幾乎從不需要）。

檢查，如果你有CSS樣式不添加東西

有時候你有多個樣式，實際上並沒有將它添加任何東西。一個很好的例子是使用float: *;和display: inline-block;。當在一個元素上使用這兩個元素時沒有額外的功能，因爲默認情況下，float會使元素內聯塊。

優化你的腳本

有了這個，我的意思是，看看能不能有相同的功能越短，你的代碼。使用兩個幾乎相同的功能？將它們縮短爲一個功能。同時使用腳本語言的預製功能將會幫助您更快地完成代碼。所以不要創建自己的排序功能，而是使用預製功能。 有關優化您的代碼的幫助，我建議您看看here。

jQuery選擇

讓你的jQuery選擇更具體。例如：
您可能有一個帶有課程內容的div。

<div class="content"></div> 

而是與

$('.content') 

選擇它，你可以使用

$('div.content') 

的jQuery現在可以限定搜索DIV元素只。
更多信息前更有效的jQuery選擇here

商店determenation代碼

當你得到的信息，例如屏幕寬度減去其他分區的寬度，你使用這種更再一次，保存它！這樣你的網頁就不用重複計算，只需要獲取變量即可。

當你只使用你使用，最好是找到一個插件或其他插件或代碼它自己的一小部分，不要使用使用它

一半時，「大」插件。加載插件文件可能會損害你的性能，如果實際上甚至沒有必要，這將是一種恥辱。

---

這只是一個全球視圖，我有一個很大的優勢，我希望你能找到一個很好的使用。

當我錯了，隨時糾正我。