jqGrid：与 FF 相比，IE 9/11 中的性能问题（（滚动时）

Question

设置了一个网格，它实际上从 java 返回记录-end.The 数据以 json 格式发送，因此我将数据类型用作 json在 jqgrid 中。我已经使用了论坛中的建议，即，已经尝试包括所有属性，但是当从 java 检索的记录数为 > 500 时，性能仍然很差行。这仅在 IE 中很慢，但在 FF 中渲染速度非常快并且工作正常。

请注意，我不想要分页，但所有记录都应在网格内显示垂直滚动条。

贴上重要的properties/functions我用过的，请指点一下

    type: "POST",
    cache: false,
    url: '............', 
    datatype: "json",
    viewrecords: false,
    gridview: true, // tried false as well
    pgtext: "",
    ignoreCase: true,
    rownumbers: true,
    pginput: false,
    loadonce: true, // tried setting the loadonce:false as well , no luck
    pager: false,
    cellEdit: true,
    pgbuttons: false,
    editurl: 'clientArray',
    beforeProcessing: function (data) {
//setting the rownum, if not set it always shows only 20 records as its the default
      $(this).setGridParam({rowNum: data.length}).trigger("reloadGrid");
    },
    loadComplete: function (data) {
        if (data.length > 0) {
            if (data.length <= 10) {
                $(this).setGridHeight('auto');
            }
            else {
                $(this).setGridHeight(200); //setting vertical scroll bar within the grid and not for browser
            }
        }
        else if (data.length == 0) {
            ..............
        }
    }

Answer 1

我建议您升级到最新的 free jqGrid 4.12.1 或升级到 GitHub 的当前代码 (jqGrid 4.12.2-pre)。 Free jqGrid 是我从 2014 年底开始开发的 jqGrid 的分支。它可以提高您的应用程序的性能并简化代码，因为我实现了许多对您有用的功能。

免费的 jqGrid 支持 maxHeight 选项。 你只需要包含 maxHeight: 200，它可以与 height: "auto"（默认值）结合使用在免费的 jqGrid 中）。我认为如果您必须显示更多 500 行，那么避免分页的要求是错误的。您可以向您的客户展示滚动纯 HTML table 1000 行或免费 jqGrid 1000 行的性能（请参阅 the demo) and compare with the demos with paging. The first demo displays 4000 rows with 13 columns using the page size 20. If works much quickly as the demo with 1000 rows. Moreover you can try to sort by any column or to filter the data. The performance is very good. Even the next demo 40000 行工作得更快，因为 1000 行的演示没有分页. 用户的主要目标：拥有快速网格，几乎可以立即显示结果。JavaScript 在现代网络浏览器中运行速度足够快，本地分页的使用对于每个用户来说都是可以理解的直观。

可能对您有帮助的下一个新的免费 jqGrid 选项是：

forceClientSorting: true，如果服务器不 returns 数据 sorted，则可以与 loadonce: true 结合使用 sortname 和 sortorder。 forceClientSorting: true 的用法通知 jqGrid 在显示之前对来自服务器响应的数据进行排序。

multiPageSelection: true 选项可以与 well-known multiselect: true 选项结合使用。通常 jqGrid 支持 selarrrow 参数（保存选定行的 ID）仅用于一页。在初始加载期间、更改到另一个页面期间和排序期间，该数组将重置为空数组 []。选项 multiPageSelection: true 允许 "pre-select" 使用 selarrrow 某些行（例如，您可以从 beforeProcessing 内的服务器响应中设置它）并保留对所有页面的选择。 The demo created for the answer 演示该功能。

隐藏列会增加页面的大小并使页面变慢，因为数据将保存在页面的 DOM 上，而不是简单地保存 JavaScript [=172= 中的数据].选项additionalProperties是free jqGrid的新特性，解决了这个问题。旧版本的 jqGrid 在本地 data 参数中仅加载和保存列的数据（对于 colModel），但 colModel 在生成的网格中创建列。因此，通常使用 hidden: true 属性来表示此类数据。选项 additionalProperties 包含输入数据的 附加属性 数组，需要在本地读取和保存。例如，选项 additionalProperties: ["taskId", "isFinal"] 从每个输入数据项中读取并本地保存 taskId 和 isFinal 属性。这些属性可以在自定义格式化程序 cellattr、rowattr 内部使用，用于排序和过滤。另一种用法是 additionalProperties: [{ name: "taskId", sorttype: "integer"}, "isFinal"]，其中 additionalProperties 的项目与 colModel 项目具有相同的格式。它通知免费的 jqGrid 字段 taskId 应该在排序或过滤期间被解释为整数。 The demo 在搜索对话框中显示 additionalProperties 的用法。

您在问题的评论中提出的另一件事。 getRowData 方法有助于从当前页面读取数据（如果使用 pager: true 并将 rowNum 设置为值小于网格中的项目数）。此外getRowData使用unformatter从页面解码格式化数据以转换为数据的初始格式。不带 rowid 参数的 getRowData 可用于从页面获取所有数据。另一方面 getGridParam 只是 return reference 到内部 data 参数以及从服务器读取的所有数据。 $("#grid").jqGrid("getGridParam", "data") 运行速度非常快，包含所有页面的 所有数据。

许多开发人员提出的另一个常见问题：我应该下载免费的 jqGrid 并使用对 jqGrid 文件本地副本的引用（jquery.jqgrid.min.js 和 ui.jqgrid.min.css ) 或使用 the wiki article 中描述的 CDN 的 URL？ 推荐大家使用CDN。在互联网不可用的情况下，您可以使用本地副本作为后备路径。如果确实需要，有很多方法可以实现回退行为。如果您提供 public 可从 Internet 获得的网站，那么您确实应该使用 CDN。下面我可以试着解释一下为什么会这样。

首先一些特定版本的jqGrid，jQuery或其他普通文件不可更改。新版本的文件将有 另一个版本 等 CDN 上的另一个路径。因此，例如从 http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js 加载的数据将 始终相同 。

推荐使用 jqGrid 的方法，如 jQuery 和其他常见的 JavaScript 库和 CSS 框架是 CDN 的用法. Here you can find the code example and here 工作演示，它使用来自 CDN 的所有依赖文件。主要优点：所需的文件将主要从本地缓存中使用，当真正需要下载时文件，文件将从世界上的任何位置非常快速地加载。我试着解释一下原因。

让我们从 http://cdn.jsdelivr.net/free-jqgrid/4.12.1/css/ui.jqgrid.min.css[=158 加载免费的 jqGrid 文件=] 和来自 http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js。您可以查看更严重的响应的 HTTP headers 来了解原因。让我们检查 jquery.jqgrid.min.js 的 headers。看起来像

HTTP/1.1 200 OK Date: Sun, 07 Feb 2016 11:46:33 GMT Content-Type: application/javascript; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Last-Modified: Tue, 19 Jan 2016 13:22:55 GMT Vary: Accept-Encoding ETag: W/"569e38af-4d806" Access-Control-Allow-Origin: * Timing-Allow-Origin: * Cache-Control: public, max-age=31536000 Server: NetDNA-cache/2.2 X-Cache: MISS Content-Encoding: gzip

初始加载数据总数为121.791字节(headers:418; body:121.373).

我不想评论所有 HTTP header，只评论最重要的一些：

初始加载的数据被压缩。

header Cache-Control: public, max-age=31536000 允许在 365 天（356*24*60*60）内将加载的数据缓存在网络浏览器或代理的缓存中。如果用户下次加载相同的页面，将不会完成对服务器的请求。

header ETag: W/"569e38af-4d806" 和 Last-Modified: Tue, 19 Jan 2016 13:22:55 GMT 对 re-validating 数据非常重要。如果用户按 F5 重新加载数据，但它仍然在本地保留数据，那么向服务器请求获取 jquery.jqgrid.min.js 将 包含 ETag来自文件的缓存版本。该请求将包含 HTTP headers

If-Modified-Since：2016 年 1 月 19 日，星期二 13:22:58 GMT If-None-Match: W/"569e38b2-acbef"

您可以验证来自 http://cdn.jsdelivr.net/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js 的响应将仅包含 320 个字节，以
开头
HTTP/1.1 304 Not Modified

表示服务器确认可以使用之前加载的jquery.jqgrid.min.js版本。因此 jquery.jqgrid.min.js 很快就会变成 "reloaded"。

最后我要说的是，初始加载数据和对 re-validation 请求的响应都将从 cdn.jsdelivr.net 非常快速地 获得。该网站在世界上的许多地方都有镜像服务器，并且服务器针对 re-validation 响应进行了优化。

我希望现在清楚了 为什么 我建议使用像 cdn.jsdelivr.net 这样的 CDN 作为加载免费 jqGrid 文件的主要来源。

jqGrid：与 FF 相比，IE 9/11 中的性能问题（（滚动时）

jqGrid : Performance issues ((while scrolling) in IE 9/11 when compared to FF

javascript

performance

jquery

jqgrid