使用JS，jQuery，ajax和＆amp; json，我需要帮助优化页面加载速度

时间：2017-08-23 22:18:30

标签： javascript jquery json ajax

我正在使用jQuery构建用户配置文件页面，从json类型数据库中提取。我在使用ajax填充页面时相当缺乏经验，所以现在，页面加载需要太长时间。如果我可以帮助改进我的代码，优化和加快页面加载，我真的很感激。

目标：我正在尝试从为多个拥有多个数据点的用户构建的JSON数据库中获取信息。以下是JSON数据的示例。我希望在选择了标签后显示信息。 每个配置文件中都有大量数据，特别是出版物。用户可以拥有任意数量的pub，我的代码现在遍历所有数据，然后再将其写入页面。

＆＃13;
＆＃13; 
{
  "Error": false,
  "Cached": false,
  "Profile": {
    "FirstName": "John",
    "LastName": "Smith",
    "PreferredName": "",
    "Email": "JohnSmith@example.com",
    "Gender": "",
    "PhoneNumber": "1234567890",
    "Office": "Todd Hall Addition 570B",
    "EndowedPosition": "MAJOR POSITION #1",
    "Biography": "THIS IS A BIOGRAPHY",
    "Appointments": [
      {
        "Title": "Title 1",
        "WorkingTitle": "",
        "Rank": "",
        "Department": "Department1",
        "Start": "2014-01-01",
        "End": ""
      },
      {
        "Title": "",
        "WorkingTitle": "",
        "Rank": "Rank 1",
        "Department": "Department2",
        "Start": "2014-01-01",
        "End": ""
      },
      {
        "Title": "Title 2",
        "WorkingTitle": "",
        "Rank": "",
        "Department": "",
        "Start": "2014-01-01",
        "End": ""
      }
    ],
    "IntellectualContributions": [
      {
        "Type": "Book",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "TitleMain",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      },
      {
        "Type": "Journal Article",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "TitleMain",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      },
      {
        "Type": "Manuscript",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "TITLEMAIN",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      },
      {
        "Type": "Book Review",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "Title",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": ["Author1"]
      },
      {
        "Type": "Newspaper",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "Title",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": [
          "Author 1",
          "Author 2",
          "Author 3",
          "Author 4"
        ]
      },
      {
        "Type": "Journal Article",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "Title",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      },
      {
        "Type": "Journal Article",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "TITLE",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      },
      {
        "Type": "Journal Article",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Published",
        "Title": "TITLE",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": ["Author 1"]
      },
      {
        "Type": "Journal Article",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Submitted",
        "Title": "Title",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      },
      {
        "Type": "Journal Article",
        "TypeOther": "",
        "IncludeProfile": "Yes",
        "Status": "Working Paper",
        "Title": "TITLE",
        "TitleSecondary": "",
        "FirstName": null,
        "MiddleName": null,
        "LastName": null,
        "Role": null,
        "JournalName": "",
        "Publisher": "",
        "Volume": "",
        "IssueNum": "",
        "PageNum": "",
        "WebAddress": "",
        "CaseNum": "",
        "YearPub": "",
        "Authors": []
      }
    ],
    "Education": [
      {
        "DegreeType": "PhD",
        "DegreeOther": "",
        "School": "University",
        "Major": "MAJOR 1",
        "FocusArea": "Focus Area",
        "DissertationTitle": "Dissertation Title",
        "Highest": "Yes"
      },
      {
        "DegreeType": "MBA",
        "DegreeOther": "",
        "School": "University",
        "Major": "MAJOR 1",
        "FocusArea": "",
        "DissertationTitle": "",
        "Highest": ""
      },
      {
        "DegreeType": "BBA",
        "DegreeOther": "",
        "School": "University",
        "Major": "MAJOR 1",
        "FocusArea": "",
        "DissertationTitle": "",
        "Highest": ""
      }
    ],
    "Present": [
      {
        "Title": "Presentation Title",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3",
          "Author4"
        ],
        "Date": "2014"
      },
      {
        "Title": "Presentation Title",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3"
        ],
        "Date": "2014"
      },
      {
        "Title": "PRESENTATION TITLE",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3",
          "Author4",
          "Author5"
        ],
        "Date": "2013"
      },
      {
        "Title": "PRESENTATION TITLE",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3",
          "Author4",
          "Author5"
        ],
        "Date": "2013"
      },
      {
        "Title": "PRESENTATION TITLE",
        "Type": "Paper",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3",
          "Author4",
          "Author5"
        ],
        "Date": "2012"
      },
      {
        "Title": "PRESENTATION TITLE",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3",
          "Author4",
          "Author5"
        ],
        "Date": "2012"
      },
      {
        "Title": "PRESENTATION TITLE",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3"
        ],
        "Date": "2012"
      },
      {
        "Title": "PRESENTATION TITLE",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2"
        ],
        "Date": "2012"
      },
      {
        "Title": "PRESENTATION TITLE",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
        ],
        "Date": "2012"
      },
      {
        "Title": "PRESENTATION TITLE",
        "Type": "Oral Presentation",
        "Name": "NAME",
        "Authors": [
          "Author1",
          "Author2",
          "Author3"
        ],
        "Date": "2012"
      }
    ],
    "Departments": [
      "Department1",
      "Department2"
    ],
    "Research": [
      "Research1",
      "Research2",
      "Research3",
      "Research4",
      "Research5"
    ],
    "Teaching": [
      "Teaching1",
      "Teaching2",
      "Teaching3",
      "Teaching4"
    ]
  }
}
＆＃13;
＆＃13;
＆＃13;

Here is a link to my HTML/JS

非常感谢任何和所有帮助！

1 个答案:

答案 0 :(得分：0)

我相信你的问题太广了，而且它不适合as an stackoverflow ideal question。因此，请将此答案视为格式化的一种长期评论：我无法解决您的问题，我担心没有人能够提供所提供的信息。

多少时间意味着太长时间＆＃39;在你的问题？

当你说'页面加载＆＃39;花费太长时间，您实际上是指页面加载，还是用户信息加载？那是不同的事情。 我打赌你指的是加载用户信息所需的时间，我会尽力回答。整页加载速度慢是一个与从AJAX引入数据无关的问题 - 事实上，在单独的请求中获取一些数据可以减轻初始文档的负载 - 。

您的数据库查询消耗了多少时间？ 网络请求需要多长时间？ - 您可以使用chrome developer tools中的网络标签来检查 - 。我非常确定数据库查询或网络是导致瓶颈的主要原因。虽然循环数据的jQuery代码很繁重，但通常网络/数据库比运行时执行更容易成为性能瓶颈。

如果您的数据库查询花费的时间太长，您应该检查它并发布与sql相关的问题。也许你只是立即抓住了很多信息，也许你已经针对你的数据库发出了太多连续不需要的查询......这只是jQuery问题。

如果查询消耗的时间很少，但服务器仍然需要很长时间才能给出响应，我们也无法在此告诉您：这是与您的平台和Web服务器相关的问题。

如果查询和网络都工作正常，但客户端中的javascript代码仍然需要花费太多时间来呈现数据 - 我不相信可能就是这样......但是，谁呢知道 - 那么你应该尝试重现没有http / db请求交互的问题：

您应该隔离解析响应的代码并将其呈现给DOM到函数，并使用虚假响应调用它，并查看它需要多少时间来完成其工作。在这种情况下，您可以触发一个易于重现的stackoverflow问题，因此这里的人可以帮助您更轻松： - ）

事实上，我试图设置这样的，但我在这里找到了unexpected token else：

else{
    //continue original If Statements to check PublishedType
}

如果您的代码表现为慢，那么请确定它与您在此处粘贴的代码不同，因为它会给出语法错误。如果您的问题只是语法错误，那么它与性能无关。

顺便说一句，确保您的代码可以从重构中受益; - ）

相关问题
最新问题