I'm writing a web application where, to avoid a big JS file to load full of code that is rarely used, I decided to modularize and load the modules once they are needed.
The loading works fine: Each piece of JS code is correctly loaded and executed; I used the jQuery method "append" to append a <script> at the end of the <head>.
You can see the result on the picture below.
But now the question came when I'd like to remove the code that I no longer need.
I know Facebook has already met the issue due to their big JS size, but on the speech (https://jmperezperez.com/facebook-frontend-javascript/) it seems that they acted as "optimization" of the JS code moving things from the client to the server.
Any idea or clue is strongly welcome.
Thank you very much for your answers.
Related
Recently I came across a site named (http://tomerlerner.com) which looked very cool to me.
Just to study how this has been made, I looked into the source code (view-source:http://tomerlerner.com/about).
But a few things crippled me up. Like, if you see the 'MAIN CONTENT AND INJECTED VIEWS' (commented part) there he has hidden the main content with some sort of pointers. And the java scripts which are also commented out at the bottom are working.
Can anyone tell what process he has followed and how to do it.
There is no way you can hide the HTML source since the code is what the browser get as instructions from the server.
But you can minify and uglify your JS/HTML in such a way that they would look convoluted to human eyes. This effectively hides any meaningful variable and function names and would make it difficult for someone else to reproduce the code in a readable way. Google for minify and uglify - you will get tons of solutions for this purpose.
And there are some server side solutions too emerging. Thosecan process client side scripts and render the markup in the server side itself before sending to the front end.
Angular Universal is one such framework.
Does anyone tried to play with async: true for js includes in Rails? I mean it works great but just if you are not using jQuery. If you do, then you could face some strange effects like "$" is not defined and etc. There is plenty of articles how to avoid that, but all of them seems to be done with no Rails in mind. For example, this one: http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader
Seems like I have to move jQuery from applicaction.js - means out from being putted into one big file with other JS I have.
Just wonder is there some "rails-way" of loading js asynchronously since Google is strongly recommended to do that (it is affected a page load speed a lot, and as a result - your Page Rank)?
This is a browser issue, not a Rails issue. In short, you can't do this on most browsers. This will cause a dependency error, which is what the error points to. One solution is to add the dependency in a file with all the dependent code.
However, this problem has been solved in ES6, using JavaScript imports. There is a guide on how to implement these imports in another answer here. See How do I include a JavaScript file in another JavaScript file? for that info.
I want little help in web page debugging.
I have an xhtml page in which various javascript files are embedded where logics are written.
Now if i have to enhance the functionality of web page then how can i know which javascript file is responsible for which functionality.
How to get the flow if the code is very massive say for example in one xhtml page 20 scripts are embedded
Currently using firebug debugging tool
There is no other way. You have to go through all over the JS script to trace the flow. Normally in most browser, it will tell you what's wrong with the code. Perhaps it conflict everywhere. Try spend your time to remove one by one to see how is the code flowing through your webpage
some time ago, I was reading an article(a library built by some guy) about how his library can do
lazy loading of JS
resolve dependencies between JS
(typically encountered when trying
to "include" one js from another)
include files only once. thought
specified multiple times regardless
of how they are called (either
directly specifying it as file or
specifying it as one of the
dependencies)
I forgot to bookmark it, what a mistake. Can some one point me to something which can do the above. I know DOJO and YUI library have something like this, but I am looking for something which I can use with jQuery
I am probably looking for one more feature as well.
My site has asp.net user controls
(reusable server side code snippets)
which have some JS. Some of them get
fired right away, when the page is
loading which gives a bad user
experience. Yahoo performance
guidelines specify that JS should
be at the bottom of the page, but
this is not possible in my case as
this would require me to separate the
JS and the corresponding server side
control into different files and
maintenance would be difficult. I
definitely can put a jQuery
document.ready() in my user control
JS to make sure that it fires only
after the DOM has loaded, but I am
looking for a simpler solution.
Is there anyway that I could say "begin executing any JS only after DOM has loaded" in a global way than just writing "document.ready" within every user control ?
Microsoft Research proposed a new tool called DOLOTO. It can take care of rewriting & function splitting and enable the on-demand js loading possible.
From the site..
Doloto is a system that analyzes
application workloads and
automatically performs code splitting
of existing large Web 2.0
applications. After being processed by
Doloto, an application will initially
transfer only the portion of code
necessary for application
initialization. The rest of the
application's code is replaced by
short stubs -- their actual function
code is transferred lazily in the
background or, at the latest,
on-demand on first execution.
OK I guess I found the link
[>10 years ago; now they are all broken]
http://ajaxian.com/archives/usingjs-manage-javascript-dependencies
http://www.jondavis.net/techblog/post/2008/04/Javascript-Introducing-Using-%28js%29.aspx
I also found one more, for folks who are interested in lazy loading/dynamic js dependency resolution
http://jsload.net/
About the lazy-loading scripts thingy, most libraries just adds a <script> element inside the HTML pointing to the JS file to be "included" (assynchronously), while others like DOJO, fetches it's dependencies using a XMLHttpRequest and then eval's its contents, making it work synchronously.
I've used the YUI-Loader that is pretty much simple to use and you don't need the whole library to get it working. There are other libraries that gives you just this specific funcionality, but I think YUI's is the safe choice.
About your last question, I don't think there's something like that. You would have to do it yourself, but it would be similar to using document.ready.
i did in my framework a similar thing:
i created a include_js(file); that include the js file only if it isn't included reading and executing it with a synchronous ajax call.
Simply put that code in top of the page that needs dependencies and you're done!
I've been building a site. At some stage I noticed that IE display was a little broken and Chrome had all but rendered nothing but the body tag (empty), and FF all looked good.
After throwing my keyboard around the room and bashing my head against my mouse, I discovered the problem. I had left (don't ask how or why, must have been some lightning speed cut and paste error) an HTML comment unclosed in an inline script block.
<script type="text/javascript">
<!--
...
</script>
I'm guessing (not tested) the problem would have either not come up, or manifested itself in a far more noticeable way if the script was external. So anyways, I got to thinking, is there ever a time when you have a really good reason to write inline script??
No. Write Unobtrusive Javascript.
If you want your Javascript to run as early as possible, it might make sense to include inline Javascript, since it will run before any other HTTP requests have necessarily completed.
And in some cases, you're including Javascript from a 3rd party provider and you don't really have a choice. Certain ad systems, as well as Google Analytics, spring to mind.
If the script must be dynamically generated (say by a PHP or ASP.NET MVC page) would be one reason to have it inline :-)
Depends on how much JS do you plan to write. If you're writing many support routines (lots of validation checks, text processing, animation and effects) then it makes sense to have the code in a separate file. This allows code reuse and removes a lot of junk from your HTML page.
On the other hand, there is no need to put 10 lines of code, or a single function (a refresh JS comes to mind) in a separate file. It will also load slightly faster, since the browser does not need to make an additional HTTP request to download the separate JS file.
Most XSS vulnerabilities can only be exploited using inline javascript.
It's not necessarily enough of a reason, but the pages will load faster. To this end, sometimes, even when you write the script in another file, you want it to show up as inline on the client side.
I sometimes place javascript inline in pages that get partially reloaded (to bind some events to newly added form-fields for example) and / or pages that use some unique javascript that I will not use on any other page.
Having many external scripts can ultimately slow down the page as the browser must call each file separately. Combining the JavaScript into one file or into the page itself can sometimes alleviate this problem.
On the other hand, I believe the browser may cache a script file once it's been called for the first time so if you have a lot of the same code across your site, external is the way to go.
I work a good deal in something called Flex, which combines XML and ActionScript to create the final bytecode. It is ALWAYS best practice to separate the two as much as possible. That way, you can very clearly and easily separate the View (the HTML or MXML in my case) from the Controller (the script)
It also means that you do not have to worry about looking through five files for one line of code -- all of your code is in one place.
File caching is the reason to have external js and css files. Even if you only have one HTML page, this page is likely to be updated often and so will be downloaded by the browser as often. If the js (and css) are in the HTML page, that too will be downloaded often. Keeping them separate will keep the HTML file smaller and will download faster. The js and css files will have been cached so will not be continually downloaded. That is assuming these files are not updated very often.