在生产环境而不是开发环境中加载页面时，脚本无响应

Question

I'm trying to use JQuery UI's sortable functionality(see http://jqueryui.com/sortable/ ) for scheduling work assignments by dragging from a list of jobs to an employee, by date.

It looks fine on my development environment. It loads quickly and works correctly. However, when I publish to my production server and try to load the same page on my production site it locks up.

After waiting a while and telling the unresponsive page to stop, I get the following error in the console in Firefox:

Error: Script terminated by timeout at:
w</u.uniqueSort@http://productionserver/bundles/jquery?v=v5ipibJm7AKDxo-gwvDlrhtKDuuTixthciRUzTvH4GU1:1:122745
add@http://productionserver/bundles/jquery?v=v5ipibJm7AKDxo-gwvDlrhtKDuuTixthciRUzTvH4GU1:1:133074
_on@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:9595
_classes@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:8850
_toggleClass@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:9474
_addClass@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:9266
_setHandleClassName/<@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:204369
each@http://productionserver/bundles/jquery?v=v5ipibJm7AKDxo-gwvDlrhtKDuuTixthciRUzTvH4GU1:1:110253
_setHandleClassName@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:204340
n.widget/</h[t]</<@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:4508
refresh@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:213332
n.widget/</h[t]</<@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:4508
_create@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:204024
n.widget/</h[t]</<@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:4508
_createWidget@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:6648
n.widget/n[e][t]@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:4069
n.widget.bridge/n.fn[t]/<@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:5885
each@http://productionserver/bundles/jquery?v=v5ipibJm7AKDxo-gwvDlrhtKDuuTixthciRUzTvH4GU1:1:110253
each@http://productionserver/bundles/jquery?v=v5ipibJm7AKDxo-gwvDlrhtKDuuTixthciRUzTvH4GU1:1:108205
n.widget.bridge/n.fn[t]@http://productionserver/bundles/jqueryui?v=tG29gr4b89aZuHZhwb2RRduOLQe69zZ-D0yHV7Mp9SM1:1:5790
@http://productionserver/JobScheduling/MainJobBoard/:6304:7
c@http://productionserver/bundles/jquery?v=v5ipibJm7AKDxo-gwvDlrhtKDuuTixthciRUzTvH4GU1:1:134341
fireWith@http://productionserver/bundles/jquery?v=v5ipibJm7AKDxo-gwvDlrhtKDuuTixthciRUzTvH4GU1:1:135109
ready@http://productionserver/bundles/jquery?v=v5ipibJm7AKDxo-gwvDlrhtKDuuTixthciRUzTvH4GU1:1:136894
v@http://productionserver/bundles/jquery?v=v5ipibJm7AKDxo-gwvDlrhtKDuuTixthciRUzTvH4GU1:1:94196

I was thinking it might have something to do with bundling or minifying of scripts, but when I set BundleTable.EnableOptimizations = true; in BundleConfig.cs and run it in Visual Studio everything worked fine. I also tried running in Release and setting compilation debug="false" in Web.config. Both worked fine.

For reference, here's my BundleConfig.cs RegisterBundles method:

    bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
    "~/Scripts/jquery-ui-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));


    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));


    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/bootstrap-datepicker.js",
              "~/Scripts/DatePickerReady.js",
              "~/Scripts/respond.js"));

    bundles.Add(new StyleBundle("~/Content/jqueryuicss").IncludeDirectory("~/Content/themes/base", "*.css", false));

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/bootstrap-datepicker3.css",
              "~/Content/site.css"));

What could be causing my page to lock up in production, but not in development? What do I need to change?

Any help would be appreciated.

Answer 1

It looks like it was caused by loading a very large amount of items one of the lists. I had several hundred items in one list and about two hundred total lists. In my development environment I was only loading a relatively small amount of test data, about forty items at most in a list with the same number of lists.

I just need to make sure I limit the amount of data being displayed to a reasonable amount.