headjs implements parallel loading of websites but sequential execution of JS

Load JS in parallel, but execute it in sequence to improve website speed

<script src="js/head.min.js"></script>
<script type="text/javascript"> head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_validate.js"); </script>

Note: head.js("js/jquery-1.6.1.min.js","js/jquery.validate .min.js","js/my_validate.js"); The JS contained in it must be in the local folder, otherwise it will be executed in the middle of IE

For example: head.js("js/jquery-1.6.1.min .js","js/jquery.validate.min.js","js/alert.js"); If there is no jquery.validate.min.js file locally, alert.js will not be executed under IE

1. Asynchronously load other JS files, such as Jquery. Although I previously placed the referenced external JS at the bottom of the page, after using head.js, I can collect all the JS content into one file and place it at the end of the page. Then you can reference other external JS in this JS file. For example, a JS is quoted at the bottom of my page. The content is:

head(function() {
........
});
/* part 1 */
head.js("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
/* part 2 */

The first part is the JS script to be executed after the page is loaded, and the second part is the address of the external JS file referenced before executing the script. Obviously if I want to upgrade the Jquery version I am using, I only need to modify this file without changing the page content. This is useful for statically published MovableTypes.

2. CSS3 attribute support detection. It’s a mouthful to say, but it means you can tell whether the browser supports a certain CSS3 property. If a certain attribute is supported, a class named after this attribute will be added to the HTML node of the page. If it is not supported, the class name will have a no- prefix. For example, IE6 does not support the boxshadow attribute, so when browsing the page using IE6, the html node of the page will be similar to this: .

In this way, you can set in the CSS file that when the browser does not support a certain advanced attribute, other solutions will be used instead.

.boxshadow .box{
box-shadow: 0px 0px 5px #bbb;
}
.no-boxshadow .box{
border: 2px solid #bbb;
}

Currently the CSS3 properties that head.js can detect include borderimage borderradius boxshadow opacity reflections rgba textshadow transforms transitions.

3. head.js can detect the type and version of the browser, and can also detect the path of the currently visited page relative to the root directory of the website. Even cooler, head.js can dynamically detect the current window size of the browser. Moreover, dynamically pass the previous attributes to the html node and add the corresponding class! In this way, combined with CSS, you can create a cool design that adapts to each browser, makes each page unique, and automatically changes layout as the window size changes.