5
我正在開發一個在客戶端使用jQuery Mobile的Web應用程序，在服務器端使用PHP & MySQL。該應用程序在桌面瀏覽器（如Safari，Chrome和Firefox）上運行良好。但是，在iPad上 - 應用程序從主屏幕作爲Web剪輯打開 - 應用程序的性能會更差。滾動工作正常，但點擊鏈接從服務器加載頁面變得非常緩慢。jQuery Mobile在iPad上很慢
iPad屏幕的記錄顯示（例如）在敲擊後需要0.3秒，然後突出顯示該元素並顯示加載程序。從開始1.0秒後，打開頁面的下半部分被渲染/顯示（在加載器下方）。然後在顯示頁面的上半部分之前又需要0.6秒，從而使加載頁面所需的總時間爲1,6秒。顯示此過程的視頻（以原始速度的25％播放）可以找到here。
據我所知，加載頁面（通過WiFi）需要一些時間，但我不明白爲什麼渲染頁面的上半部分需要額外的0.6秒。假設頁面在1.0秒後完全加載（因爲頁面的下半部分已經顯示出來了），我認爲這也需要相當多的時間，因爲在我的Mac上Safari只需要0.5秒左右。但是這可能會導致我的iPad處理器速度較慢以及WiFi連接滯後。
希望有人知道一些（客戶端）優化使應用程序執行（或感覺）更快。我已經禁用jQuery Mobile中的動畫，我會嘗試自己優化服務器端。
也許這一切都是要了解的重要：
- 所有頁面我從服務器返回有一個完整的
<head>多引用樣式表和腳本。 jQuery Mobile會忽略<head>還是飲食這會帶來處理能力？ - 我在大多數頁面上都有一個固定的頁眉和頁腳。我正在使用
<div data-role="…" data-position="fixed" data-id="…" data-tap-toggle="false">來完成此操作。頁眉和頁腳也包含在所有頁面中。 - 大多數報頭具有在左側（
<a data-role="button">標籤）的按鈕，在中間（<h1>標籤）標題和右側（<div data-role="controlgroup">）含有兩個按鈕（<a data-role="button">）一個controlgroup。 - 標題中的一個按鈕設置爲將頁面預取到其鏈接的位置（
<a href="…" data-role="button" data-rel="dialog" data-prefetch>）。該按鈕包含在每個頁面中，但鏈接的href在每個頁面上都是相同的。 這可能是什麼..？ - 所有頁腳有一個導航欄（
<div data-role="navbar">）與幾個項目（<li><a>）。 - 某些頁面是帶有過濾功能的列表視圖（
<ul data-role="listview" data-filter="true">）。目前只包含一些項目（<li><a>，最多5個）和列表分隔線（<li data-role="list-divider">）。 - 其他頁面爲表格（
<form>），其中包含列表視圖（<ul data-role="listview" data-inset="true">），其中有幾個表單字段（<li data-role="fieldcontain">）。
嗯，這是所有的「特殊」的東西我能想到的。如果您需要了解更多或看到一些源代碼，請讓我知道。
我用jQuery Mobile開發了一個內部Web應用程序開發框架。我很高興地說，這個性能在框架和產生的網絡應用程序中都達到了相當高的水平。 這讓我想，你的網頁上可能有東西可能會消耗大量的處理？你能否看到，發現併發布這些零件以便SO可以有更好的外觀？ – kishu27
@ kishu27我已經添加了一些描述我的應用程序的技術細節。 – Jonathan
如果我處於您的情況，我會開始刪除頁面渲染的部分內容（評論它），並查看影響性能的因素。你提到的事情是我也做的，除了＃1。而且它們不會影響性能。 – kishu27