Tips for optimizing webpage loading time by registering a client script resource at the bottom of the page

Lately, I've been finding Extender controls on Asp.net quite annoying. Script controls that inject javascript at the top of the web page have me reconsidering if there is a better way to place them at the bottom, similar to using 

ClientScriptManager.RegisterStartupScript
. After reading a post by DanWahlin, it seems like it's possible but with the downside of handling duplicate scripts and ensuring all necessary ones are included in the correct order. So, my question narrows down to this:

"I'm working on developing custom controls and Extender controls, and I prefer for all scripts to be placed at the bottom of the webpage. What alternatives do you recommend and why?"

Note: These scripts as well as CSS are embedded as web resources.

c#javascriptasp.nethttpwebrequestcustom-server-controls

Answer №1

When discussing the MS AJAX Toolkit, it's worth noting the "LoadScriptsBeforeUI" option in the Toolkit ScriptManager. By setting this to "false," you can prioritize loading your UI before the scripts, which may be beneficial depending on your goal.

I'm curious about your aversion to having scripts at the top of a webpage. This is a common practice and usually only poses issues with slow internet connections.

Answer №2

As far as I know, you need to manage the OnRender aspect of the page. I had a similar situation where I needed to relocate the viewstate of the page for SEO purposes

 protected override void Render(System.Web.UI.HtmlTextWriter writer)
 {
  System.IO.StringWriter stringWriter = new System.IO.StringWriter();
  HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
  base.Render(htmlWriter);
  string html = stringWriter.ToString();
  int startPoint = -1;
  int endPoint = -1;
  startPoint = html.IndexOf("<input type=\"hidden\" name=\"__VIEWSTATE\"");
  if (startPoint >= 0)
  {
    endPoint = html.IndexOf("/>", startPoint) + 2;
    string viewstateInput = html.Substring(startPoint, endPoint - startPoint);
    html = html.Remove(startPoint, endPoint - startPoint);
    int FormEndStart = html.IndexOf("</form>") - 1;
    if (FormEndStart >= 0)
      html = html.Insert(FormEndStart + 1, viewstateInput);        
  }
}

Perhaps you could implement a similar approach by searching for script tags. Another option is to add a <%=MyVar%> at the end of the page, which can be set from the code behind, although this may result in excessive coupling with the page

Answer №3

Currently, it is not possible to achieve this using ajax extender controls. I found a solution by utilizing the client-side script dependency framework called script.js. This allowed me to successfully accomplish my goal.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When applying the `toString()` method to a new array of length 5, it

I tried to understand the code snippet by referring to a specific link. However, I'm puzzled as to why it's displaying four commas in the console. As I'm generating an array with five items, could you please explain how it functions? ...

javascriptarraysstringmethods

What is the appropriate HTTP status code for "item not found" when using RESTful ajax?

Imagine having a single-page web application featuring a list of items. Users can click on an item to view more information about it. The details of each item are loaded asynchronously via an AJAX GET request to the URL http://www.example.com/item/[id], an ...

javascriptjqueryajaxhttp-status-codessingle-page-application

Does not work in Electron's Chrome environment, although it does work in Node's console

I've incorporated the npm package foreach-batch into my electron project. The package is properly installed and there are no issues related to a Cannot find module. var forEachBatch = require('foreach-batch') var stuff = [0,1,2,3,4,5,6,7,8, ...

javascriptnode.jsnpmelectron

Transferring Sound file between Django and Vue

I am attempting to transfer a audio file that was generated by gtts from Django to Vue using HttpResponse. In the views.py file of Django: f = open('path/of/mp3/file', 'rb') response = HttpResponse() response.write(f.read()) response[& ...

javascriptpythondjangovue.js

Adjusting position in relation to the cursor's movements

I have searched extensively for similar questions but have been unable to resolve my issue. Here, I am sharing just a single list item from my code. The task at hand is to create a span element on the mousemove event over the list item, and dynamically set ...

javascripthtmljquerycsscursor-position

Guidance on incorporating CSS into ES6 template literals within a react framework

I am trying to implement the Material UI stepper in my React application. The step content is set up as a string literal. My goal is to include CSS styling for paragraphs within the step content. Many online resources suggest using \n to add a line ...

javascriptreactjsecmascript-6material-uitemplate-literals

Is there a way to stop the navbar from covering the title?

Looking for help with customizing my navbar. At the moment, it resembles image one but I'm aiming for the appearance of image two. Any suggestions on how to achieve this? Is it a CSS modification that needs to be made? /* Nav Bar*/ .navbar-brand{ ...

javascripthtmlcssbootstrap-4

Is there a way to implement absolute imports in both Storybook and Next.js?

Within my .storybook/main.js file, I've included the following webpack configuration: webpackFinal: async (config) => { config.resolve.modules = [ ...(config.resolve.modules || []), path.resolve(__dirname), ]; return ...

javascriptnext.jsstorybook

When you duplicate the React State object and make changes to the copied object, it directly affects

When attempting to duplicate a state object, I noticed that the state object is being modified directly in the code snippet below: @boundMethod private _onClickDeleteAttachment(attachmentName: string): void { console.log("_onClickDeleteAttachment | th ...

javascriptreactjs

What sets local Node package installation apart from global installation?

My curiosity sparked when I began the process of installing nodemon through npm. Initially, I followed the recommended command and noticed the instant results displayed on the right side of my screen: npm i nodemon This differed from the installation ins ...

javascriptnode.jsnpmnodemon

How can I customize the appearance of the container and items in a dropdown <select> menu?

Im using contact form 7 on wordpress, i don't want to use a plugin rather use plain css/js to bring the results if possible. Something like this : https://i.stack.imgur.com/VTWRg.jpg ...

javascriptcsswordpresscontact-form-7

Is it possible to maintain the sidebar while eliminating the scrolling JavaScript?

Looking to recreate the image display style on Facebook where pictures appear in a lightbox format. The challenge I'm facing is figuring out how they manage to have the sidebar with no visible scroll bar inside... If you want to see this for yourself ...

javascriptjqueryhtmlcss

Using a template literal as a prop is causing rendering issues

I have a functional component const CustomParagraph = forwardRef((ref: any) => { return ( <div> <p dangerouslySetInnerHTML={{ __html: props.text }}></p> </div> ); }); Whenever I use this component, I am unable ...

javascriptreactjstemplate-strings

Adjusting the opacity of the background image in the section - focus solely on the background

This section is what I'm working on. <section ID="Cover"> <div id="searchEngine">hello</div> </section> I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. T ...

javascriptjqueryhtmlcss

Choose the substring that comes after a certain word

Given strings in this format <iframe width="560" height="315" src="https://www.youtube.com/embed/KRFHiBW9RE8" frameborder="0" allowfullscreen></iframe> I am looking to extract just the source URL, which is the content between src=" and the cl ...

c#htmlasp.netregexstring

React-Redux error: Unable to call addItem function

Recently, I started learning about redux by following an E-Commerce site tutorial that uses React and Redux. In the tutorial, there is a CollectionItem Component with a button that triggers an addItem function to add the selected item to the shopping cart. ...

javascriptreactjsreduxreact-redux

JQuery functions are functioning properly in Internet Explorer 10, but are encountering issues in Internet Explorer

My JavaScript function calls a jQuery function that works in IE10 but not in IE7. function test() { // Display message before calling jQuery function... alert("Before"); // Call the jQuery function... $("#boxscroll").getNiceScroll().resize(); // Display m ...

javascriptjqueryhtmlinternet-explorer

I am looking to implement a dropdown menu that appears after clicking on an image. Any suggestions on how to achieve this using

I've been experimenting with adding a dropdown class, but I'm feeling a bit lost on where to start. Here's a snippet of code that shows what I'd like to do to add a dropdown menu: <span id="dropdown-info" ng-init= "myVar='i ...

javascriptangularjstwitter-bootstrap

You will be unable to browse the website while a file is in the process of downloading

I am attempting to download a large file directly from the server in chunks using the Context.Response.OutputStream.Write method. However, I am facing an issue where I cannot navigate on the site until the download is complete, i.e., until the response e ...

c#asp.nethttpresponseoutputstream

"Troubleshooting Problem with JSON Encoding in PHP and Parsing with getJSON in

Apologies if this sounds like yet another discussion on the topic, but I've been struggling for hours without finding a solution. I'm attempting to retrieve data from a MySQL database, generate a JSON using PHP, and then parse this JSON in JavaS ...

javascriptphpgetjsonjson