3

I'm a little confused. I have my _layout.cshtml page below and it has a bunch of bundles containing .css and .js files. When I first load the site it runs through each file in the bundles. Fine, OK, great! But then on each new view, each line of code from every file gets run through again! (ex. jQuery, bootstrap, etc) I set break points to test this and they were all hit every time I loaded a new view.

I thought the whole purpose was the browser would be to cache these files so they wouldn't load each time a new view gets called? Am I missing some understanding here? Did I not set up the layout correctly? Are they not being loaded but the code is being run through (that's why all my break points are being hit) with each new view?

Is there a way to set it up so this doesn't happen and all the files are loaded once when my clients visit my home page? I don't understand why each .js file (ex. bootstrap) is loaded on every view that gets loaded!!

Here is my layout page

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

  <title>Yogabandy - @ViewBag.Title</title>
  @Styles.Render("~/Content/yogabandy-base/css") 
  @RenderSection("content", required: false) 
  @Scripts.Render("~/bundles/modernizr")

</head>

<body>

  @Html.Partial("_Navbar")


  @RenderBody()

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUWFuy0zfuKe4uig_koh3O6SRDaf40gA4&libraries=places" async defer></script>
  @Scripts.Render("~/bundles/jquery") 
  @Scripts.Render("~/bundles/bootstrap") 
  @Scripts.Render("~/bundles/jqueryval") 
  @Scripts.Render("~/bundles/yogabandy-base") 
  @RenderSection("scripts", required: false)
</body>

</html>
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • The browser does cache them. But JavaScript has to be parsed and loaded in order to run... You'd be upset if your JavaScript *didn't* run on every page load. – Heretic Monkey Feb 25 '18 at 05:09
  • so what you're saying is the browser doesn't re download them but still runs through them on each and every page view loaded? – chuckd Feb 25 '18 at 05:10
  • Yeah, that's how browsers work. Check the network tab in your browser's developer tools; you should see the scripts loading either "(from cache)" or with a "304 Not Modified" response. If it didn't run them again, nothing would happen on the new page. – Heretic Monkey Feb 25 '18 at 05:12
  • ok thanks Mike, I know this is a little off topic, but do you know how to speed up the load time of the site (both the initial page and each view after) in visual studio and Chrome. Visual Studio just takes so damn long to load up my site to debug it. ~30-60 secs. Maybe it has something to do with my machine!! MAcbook air '13 running VMWare with Win 10 and VS 2017. Should I just go out and buy a 4 core windows machine and see if it helps the load time to debug my site??? – chuckd Feb 25 '18 at 05:16
  • Well, running VS in a VM is likely the culprit. I'd use VS Code directly on the Mac instead. Also, if you're debugging a remote server, everything's got to go over the network. – Heretic Monkey Feb 25 '18 at 05:18
  • True, my DB is in azure and I'm debugging on my local host, but even when I push to my Azure site and then connect a remote debugger it still seems like it takes along time. Longer then it should. FYI - it always seems like the sites I build run really fast a t first then after adding .js files and db calls everything slows down significantly! In a debugging sense I mean... – chuckd Feb 25 '18 at 05:20
  • Hey Mike, what do you mean VS code directly on the mac?? You mean VS for Mac? I think it's a new version of VS... – chuckd Feb 25 '18 at 05:25
  • @user1186050 You can use VS Code and command-line ASP.Net ...I find this much faster than the full Visual Studio which can be slow even running natively. You may not need a VM on Mac to do this. – SaltySub2 Feb 25 '18 at 05:33
  • ya I like VS though...I just don't know if loading up my mvc project in VS and starting up and running IIS to test and debug has slowed down over the last year building this site up and adding more js and more files to load. It always seems like that is the case, maybe I'm just paranoid! Maybe I should just get a heavy duty win machine to dev?? – chuckd Feb 25 '18 at 05:40
  • Well I’ve used ASP.Net Core with VS Code and command-line Dotnet (dev and publish) as well as Kestrel... it’s fast :) ...I can’t see myself using full-blown VS and full IIS unless necessary. – SaltySub2 Feb 25 '18 at 05:43
  • I don't think VS loads full IIS when debugging. I think its a small, temp version of it. I could be wrong – chuckd Feb 25 '18 at 05:46

2 Answers2

2

In ASP.Net MVC calling (returning) a View (reload or change of URL assuming standard routing) is considered a new “page” load.

For conventional web browsing AFAIK when a page loads ie. a typical http(s) request, the page has to load from top to bottom, including re-loading the JS and CSS.

Because a standard http request (eg. GET) is stateless, on the client side, the browser will use exactly the HTML, CSS and JS it is told to use. It cannot “guess” what JS you might want or not want to load.

The web browser would generally cache JS and CSS, assuming no “cache-busting” is being used.

To avoid reloading of the whole page, you can use AJAX techniques, or now a single-page-application approach: https://www.asp.net/single-page-application

SaltySub2
  • 299
  • 2
  • 6
1

If you are not using SPA or Partial view/page rendering, when you navigate from one view to another view a complete post back will happen and new content will be loaded to the DOM, in that case all the resources will be requested again by the page to the server. If the content like JS/Images/CSS is already cached, in that case content will not be loaded from server but from the cache, but complete JavaScript will execute again.

If you don’t want this to happen, go for partial page rendering or implement SPA.

You can read more about SPA here https://www.asp.net/single-page-application AND MSDN

PSK
  • 17,547
  • 5
  • 32
  • 43
  • what's SPA and should I rebuild my site so that everything is a partial underneath, say, the navbar? So basically the whole site just fetches partials underneath some header area like the navbar??? – chuckd Feb 25 '18 at 05:23
  • @user1186050 Do see my answer above with the link regarding SPA in ASP.Net. Do also research AJAX in general. You have to think of two separate sides. On the server side you have views, partials, etc... but this delivers to the client a “full page” encapsulated in a typical http request so the client browser can deal with it properly. “Partials” on the browser side eg under the navbar means that content must be changed via “dynamic HTML” ie. manipulating the content of the DOM on the browser side. So the server delivers a whole “set” to the browser then the browser manipulates parts of it. – SaltySub2 Feb 25 '18 at 05:29
  • SPA is single page application, you don't need to rebuild your entire site again. MVC supports it using partial view rendering. – PSK Feb 25 '18 at 05:29
  • As per @PSK to clarify your server-side gives the “whole page” to the browser. Then the browser can make AJAX calls to the server which then delivers “partial pages” because AJAX calls don’t want a whole page, just little bits to change parts of the web page... if that makes sense. – SaltySub2 Feb 25 '18 at 05:32
  • Hi Salty. I currently make lots of ajax calls to my server to get partial pages. I'm doing this with .load() calls. I just thought I'd ask about re doing my site with a single page application template, using angular or knockout. Not really sure which one, not familiar with either!! – chuckd Feb 25 '18 at 05:35
  • @user1186050 Looks like for ASP.Net there’s a new template for ASP.Net with Angular 5. This looks promising, coincidentally I’m keen to try this out this week! It looks like if you are doing a lot of AJAX maybe a “fresh” and full SPA is best. Generally I only like DHTML for UI stuff and AJAX for minor background stuff or refreshing JSON feeds, etc. – SaltySub2 Feb 25 '18 at 05:37
  • If I gave my url to you would you maybe give me some advice? – chuckd Feb 25 '18 at 05:42
  • Yup please add a URL or screenshot to your question so people can suggest the best approach. – SaltySub2 Feb 25 '18 at 05:45
  • 1- JS bundling is not done. 2- Coverage is very low, huge number unused JS and CSS present. I suggest you better change it to SPA or hybrid SPA using MVC – PSK Feb 25 '18 at 06:10
  • Whuh! I'm bundling all files except those single js files needed on each page required! What do you mean coverage is very low, huge number unused JS and CSS? can you be specific? maybe I set something up wrong! – chuckd Feb 25 '18 at 06:12
  • oh wait! it's prob because I published the debug version, not the release version. hold up let me re publish – chuckd Feb 25 '18 at 06:14
  • https://stackoverflow.com/questions/43394650/how-to-show-code-coverage-feature-in-chrome-canary-dev-tools – PSK Feb 25 '18 at 06:17
  • I just re published in release mode. Could you please recheck? thanks – chuckd Feb 25 '18 at 06:17
  • You can also check on static data encoding, it will also help. Avoid having jvascript for individual views, you should have common js file which should be attached to your layout – PSK Feb 25 '18 at 06:27
  • well, I have a javascript file for each view for things like ajax calls and other button click type actions. If I include just one large ass js file in the layout it will be huge!!!! FYI - I do have a js file being loaded in the layout, I call it yogabandy-base.js. Which includes common stuff for the whole site. – chuckd Feb 25 '18 at 06:31
  • Hi I can’t comment on the specific js architecture, but at a macro level, I think you’d need a SPA approach. Have maybe a few “primary” views, each is a SPA. So, the “pages”, each an SPA, would be Home (signed-in and not-signed in, notifications, updates, etc), Yogabands, Students, Teachers, Search(Map). This way, you only need to deliver (and optimise for) 4 or so Views. Each of those Views would then essentially load only the necessary CSS and JS for that (including Bootstrap and Angular stuff). I wouldn’t micro-optimise yet, just mainly convert to SPA first. – SaltySub2 Feb 25 '18 at 07:29
  • hey Salty. ok that kinds makes sense even though I don't know SPA yet. I think I'm kinda doing that already on a MVC level. Essentially, I have a view for home page, results page, notifications, yogabands, etc. Kinda like what you say. I think where I really need the most help is with the UI. I'm not that greaet with UI stuff and don't know where to turn to look for help other then hiring someone. Any advice there!? – chuckd Feb 25 '18 at 07:40
  • Hey the UI seems OK at this point, great UI and UX is a huge topic LOL. As for SPA, think of it as MVC being the main "page holder". Eg. your MVC delivers a View for Maps. But that Map should be an SPA in itself. That is, searching, placing icons, bookmarking locations, etc. should NOT change to another View - everything is AJAX in the background transparent to the user. See an example here: http://todomvc.com/examples/angularjs/#/ ...You can edit and change the to-do list without any new page load (or new View delivered). A new View would be say, Notes which would also be a SPA itself. – SaltySub2 Mar 08 '18 at 02:33