I'm currently working on a tiny Sublime Text plugin that involves controlling a Chrome instance with Selenium. One of the features I'm working on is live reloading of styles. The idea is to reload the CSS on the browser (through Selenium) any time you make a change on any of your CSS files.
I can easily reload the browser, but I don't want to do that, because its rather slow, and maybe you have some input on the page, which would be lost. Ideally I would like to force Chrome to reload all styles without reloading the page. Since I can inject JavaScript code into Chrome with Selenium, it suffices an answer using JavaScript only, I can deal with the Selenium part. However, if there is some Selenium-specific way of doing this, even better!
I would rather not depend on jQuery or any other external libraries for this, but if needed, I can live with that also.
For the time being, I don't need compatibility with any other browser than Chrome (>31), but if there is a cross-browser compatible solution, it would be a plus!
EDIT: After reading a few answers to similar questions, I want to add a few constrains:
I'm not writing the HTML, so I cannot change the way styleheets are added, or the order, neither can I expect them to have a specific id, or anything like that. I can inject any JavaScipt I want, but I cannot control how the HTML was generated in the first place.
I don't want to append ?v=random() or anything like that, because I don't have control over the server either, so I don't know if the server will look at that and do something different. Besides, I would not like to circumvent the caching, if the server responds 302 and the browser caches, then I'm OK with that.
If possible, I would like the solution to work also for programatically injected CSS (as far as is possible), since the page may be using some CSS AMD loader, or any other Ajax stuff. Ideally, I would like to say to Chrome "please reapply all CSS" as abstract as possible, instead of relying on finding all link tags and such, because those solutions always have a gotcha.
Just to clarify, I know these are kind of hard constrains, but I'm developing a plugin for a text editor, so I need to cope with every technology/web framework/methodology the developer is using, so I cannot trust too much that the developer will follow certain patterns. Of course, I would like to cope with as many situations as possible, but I'm willing to drop unrealistic constrains if necessary. However, I do can force developers to use a specific version of Chrome, at least for developing.
As of now, none of the answers I've found on SO so far provide this level of development-agnosticism.
Related
On one of my web projects, I use a lot of javascript/jQuery code, which is pretty slow on browsers (Windows 7 x64), especially on IE.
I use 3 Ajax requests at the same time only on Home page.
On Search page, I also use ajax requests, which are fired on scroll event, on any 'search tag' (simple anchor tag) click event and etc. which in general is making data loading very slow.
I use jQuery plugins such as, Anythingslider, jquery coockies plugin, Raty (rating plugin), Tipsuy, jQuery coreUISelect, jScrollPane, mouse wheel and etc. All those 3rd party plugins I have minified and combined in jquery.plugins.js file, which is almost 80KB.
I select a lot of DOM elements with jQuery. For example I use the following code:
$("#element")
instead of:
document.getElementById('element');
I also have one big CSS file, which is more than 5 000 lines, because I have combined all 3rd party jQuery plugins's css files into one file, for caching and less HTTP requests.
Well, I wonder, what can I do to optimize my code for better performance and speeding up web page load?
What kind of tools can I use to debug and my JS code? I forgot to mention that, when I refresh page in Google Chrome or Firefox with firebug or Chrome native developer tools opened, the page in that case loads also very slow. Sometimes the Firefox is even crushed.
Will selecting of DOM elements with raw js give me a better and faster way to parse the document? Or should I leave, the jQuery selecting? Talk about is about 50 elements.
Should I separate and after that minify external plugins, such as Anythingslider? Or is it better when I have 'all in one' js file?
Is it better to also separate jQuery plugins's css code from main style.css? Because even hovering on element and affecting the :hover state from css file, is pretty slow.
Well guys, I'm really counting on you.
I've been googling all night to find answers on my questions and really hope to find it here.
Thanks.
1) minify it
2) all the browsers come with built in debugging tools
3) reduce access to the dom by storing references in variables, don't look up the same element twice
4) separate and use a well known cdn
5) separate just cos its easier to manage
More jQuery tips here : jquery-performance-rules and here : improve-your-jquery-25-excellent-tips.
Make sure all your static resources are cached with no disk lookup
This library is pretty cool
You can compare selector performance here: http://jsperf.com/
Just setup your HTML code, include jQuery lib and place each selector you want to compare as various test case.
Many of the jquery-performance-rules still apply,
Also have look at here jquery-proven-performance-tips-tricks
Since there are a lot of ways to improve code, especially with such big websites like yours, I think it will be more useful to just post the external links, since these are very nicely written and concise tutorials and tools. Here are some of them:
Yahoo's tutorial, one of the most complete tutorials I know
W3Schools' tutorial on using image sprites, especially useful when there are a lot of small images on the page
Tips on efficient jQuery usage
Firebug, Firefox plugin for debugging javascript, html, css
HTML validator, can be very useful to quickly find errors in markup
HTML compressor for minifying your HTML code (there are a lot of tools on the web for this purpose, it's just a matter of finding the best one)
CSS compressor, same as for HTML
I would also recommend IDE for building web applications/websites called JetBrains' PHPStorm. It is commercial software, but definitely worth every cent, since it gives hints and tips for improvement while typing.
Raw performance may not be your issue. If you notice poor performance on page load, see this article I wrote specifically about minimizing javascript execution on page initialization.
http://blog.lavoie.sl/2013/12/optimizing-page-loads-by-reducing-javascript.html
I've noticed that almost all my browser's Javascript CPU resources get spent on jquery.min.js, specifically loaded from :
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Are there any tool to minimize the resources consumed by JavaScript generally and/or jQuery specifically without outright blacklisting specific scripts?
I suppose the most obvious approach would be dynamically reducing the number of timer and other events a script receives. In fact, you could probably halt all events to scripts not in the foreground page, except for a specific whitelist of sites you actually want to permit to receive events in the background.
I'm perfectly happy with Javascript performance going way down so long as overall browser performance improves.
Sounds more like there is another script using jquery to do specific tasks. The jquery script itself after loading in the browser, to my knowledge, does not use any additional resource after that point in time.
Based my assumption of what is happening, there is nothing you can do at the moment (specifically because you haven't provided enough information to help).
Change all the getElementsByClassName to getElementsByTagName. This will improve the performance drastically as the getElementsByTagName is more efficient
A friend of mine uses a web-app for work related purposes.
The app's built using PHP/MySQL , and while it has some JavaScript to make it easier to work with, it's not user friendly enough, and with a bit of extra JS, a lot of stuff could be automated.
I would like to enhance that app, but I'd like to not have to modify the original server-side code. To do this, all I could think of was Greasemonkey. Is this the only way to do it, or am I missing out something? I'd also like to be able to use a modern JS framework, like jQuery.
EDIT: I should tell you what improvements I want to make. There are a lot of fields on the page, so autocompletion would really help a lot. This will be used for data entering, so AJAX may be used for some error checking as well.
Greasemonkey is certainly an option. Another idea is to code up your improvements, and then make bookmarklets out of them. Your friend can use the bookmarks (probably in a bookmark bar) to do the things you've improved. Bookmarklets have access to the page as though they were a part of the page.
Edit 1 In fact, now I think about it, a bookmarklet should be able to load a script file (from a different origin) into a document by adding a script tag to the head section (well, or anywhere, really). Since the SOP is based on where the document came from, not the script, ... That way, he'd just have to press the button once (for any given page he goes to) to load your improvements.
Edit 2 Yup, a bookmarklet can be used to bootstrap any script file into the page; here's an example:
javascript:(function(){var%20d=document,db=d.body||d.documentElement,elm;elm=d.createElement('script');elm.src="http://example.com/yourscript.js";db.appendChild(elm);db.removeChild(elm);})();
That adds a script element for the file http://example.com/yourscript.js to the body of the current document, which executes it. (The bookmarklet then removes the script element; just adding it is enough, it doesn't have to stick around; details.) Your script can then do things like add other scripts (jQuery, in your example) in the same sort of way, fire up auto-completers, etc. Tested the above (which probably needs tuning) with Chrome and Firefox; IE isn't liking it but I think that's an issue with my encoding of the bookmarklet or something rather than a fundamental problem. (I'm relatively new to bookmarklets.)
I think Javascript can manipulate across frames, can't it?
Can't you just make a page that loads the original site in one frame and your js interface improvements in another?
(Getting the permission of the employer is also a good idea, if thats not been addressed)
This is based on my full question. I decided to take it in parts and see if I still can't get any help.
What are all the options we've got for client-side frameworks?
I've heard mostly about prototype and jquery, but I know there are way too many options out there beyond those two, and I don't know if they handle async download.
From all of them which one is the fastest, both on the DHTML (interface) and the AJAX (download)? What are the advantages it has over the others?
What is it that you want to do?
DHTML is Dynamic HTML - which gives you the ability to set properties of HTML elements dynamically, at runtime while the page is displayed in a browser. A script can change the content of a div, the src of an <img> tag, the style of a paragraph.
AJAX is Asynchronous Javascript and XML, and as a term was initially coined to describe the practice of using Javascript running in the browser to asynchronously download data formatted in XML, and then do stuff with that data in the execution context of the browser's web page. For example, update a table. The term "Ajax" has now expanded its meaning to encompass the async download of data of any form, not just XML, into the browser. Very often web apps will download data in json format, or csv, or html, or... ? AJAX has very little to do with "graphical frameworks". It can act as a complementary technology. For example, you could download a set of URLs, or a set of image properties, via AJAX.
jQuery is a library of javascript functions that makes it easier to do "DHTML" -type things in a cross-browser environment.
You asked, which is fastest for dealing with images?, but you haven't described what you're really after, what exactly "dealing with images" means. Regardless, I think the answer is mu, because #1, these things are independent of graphical frameworks, and #2, they are not easily comparable. You are asking for a comparison between apples, hammers, and music.
But, maybe you're not really asking about graphical frameworks. The title of your question seems to be completely unrelated to the text you've posted - it suggests you want to download and cache a few images. If that's what you're after, you can do that via DHTML or jQuery. Any modern browser will automatically cache these images for you; you don't need to do anything special. But in all cases you'll be relying on the browser's communication infrastructure to do the download, and so there will be no speed differential. They will download as fast as the browser and the network allows.
Addendum
I think maybe your focus on speed is misplaced. What do you really want to do? Is speed a problem now? Seems like you are just getting started. Seems like what you really want is to learn the landscape a little better, figure out what is possible, rather than what is fast.
For playing videos in a browser, check out flowplayer - a flash video player that can be scripted with javascript/jQuery.
I'm starting to give a little more attention to making my javascript and ajax degrade gracefully. Which is more recommended:
working on incorporating the graceful degradation into your existing code (can be tricky)
or
developing a different sets of pages for the non-js users.
I'm leaning towards the different sets of pages, because I feel it's easier and I get to deliver the best possible results for each user type (js-enabled or js-disabled). Do you agree with me, and if not, why do you disagree?
I'm also worrying about hacking attempts. For example hacker gets to the js-enabled version, then disables his js. Any thoughts on this point? I don't know much about hacking, but can this be a security concern if I go with the separate versions?
Thanks in advance
Though it doesn't work well for existing sites, often it's more useful to use the Progressive Enhancement paradigm: build the site so it works with no special add-ons, then start layering your awesomeness on top of that.
This way you can be sure it works from the ground up and everyone (including those who use screen readers, those who turn off images or stylesheets, and those who don't use javascript) can all access your site.
For an existing site, however, it will depend on what functionality the ajax is delivering. In general you should strive to mirror all the ajax functionality with js disabled. If you have security holes in your js version, than you probably will in your non-js version too. AJAX can't get to anything that can't be accessed via ordinary URL.
Developing two separate sets of pages, one for JS enabled and one for non-JS, is obviously a lot of work, not only initially, but also as your application keeps evolving. If that doesn't bother you too much, I think that's the way to go. I think you are right about same-page graceful degradation being very tricky sometimes. Sometimes this is just because of the layout: With JS enabled, you can simply hide and show elements, where as without JS: where to put everything? Separate sets of pages can help keep page structure cleaner.
About hacking attempts: You can never, never, never rely on client-side JavaScript validation. Everything has to be checked (or re-checked) server-side, and your server-side code may make no assumptions whatsoever on the user input. Therefore, I think the scenario of someone de-activating JS while using the application is irrelevant. Try to keep the expected user input uniform for the non-JS and the JS versions, validate it properly, and you're good.
You'll probably want to check out jQuery Ajaxy. It lets you gracefully upgrade your website into a full featured ajax one without any server side modifications, so everything still works for javascript disabled users and search engines. It also supports hashes so your back and forward buttons still work.
It's been implemented on these two sites (which I know of) http://wbhomes.com.au and http://www.balupton.com