如果网站不支持JavaScript，复杂的功能将无法正常工作。在开发当中通常有几个脚本会写在HTML文件的头部。你嵌入的越多，网站的速度潜在的变得越慢。因此提高并行加载速度变得非常有必要，在前面的文章当中我已经提供了2种提高网站响应速度的方法，今天分享第三种方法，让让网站并行加载但顺序执行JS
你是否也在寻找
经验分享-延缓执行 JavaScript 提升网页加载速度
web开发经验推荐-新网站项目中的8个有用片段
在这种情况下我们可以使用Head.js来解决这样的事情，head.js是一个JavaScript调用自身的脚本。他能够并行加载JS，但是执行的时候却按顺序执行，来提高网站速度
如何嵌入和使用Head.js
HTML文件的头部。嵌入head.js配置变量head_conf的必需的一些特殊功能，你可以设置几个选项：
1 <script> 2 var head_conf = { ... } 3 </script> 4 5 <script src="/js/head.min.js"></script>
在head.js当中一次性加载多个JavaScript
Head.js的主要功能是同一时间并行加载多个脚本。相反的，你不必单独提取每个脚本，Head.js工作流程如下：
1 head.js("file1.js", "file2.js", "file3.js"); 虽然上面的脚本文件是排序写下来的，Head.js并不是先加载在前的，然后紧接着加载第二个，他是并行加载的然后顺序执行。这个很容易可以想象，这样加载的好处是样式表和图片的加载速度更快，使得确保整个页面感觉要快得多。
对浏览器的CSS功能
特别提出的是head.JS对CSS3支持也是没有问题的，因为不是所有的浏览器中都支持原生标准的。Head.js带有各个浏览器的样式特殊的类的定义：
.webkit p {color: red; }
上面的例子在Webkit的浏览器所有p标记为红色。你可以明确地定义浏览器支持特定的CSS3属性或您的浏览器不支持某些属性：
1 .borderimage div { 2 border-image: url("border.png") 25% repeat; 3 } 4 5 -no-borderimage div { 6 border: 1px solid green; 7 }
在这个例子中，我们定义的iv元素在支持border的浏览器当中定义一个类，在不支持border的浏览器当中定义另外一个类来区分显示
如何使用Head.js让CSS3在不同的浏览器上面显示不同分辨率
Head.js的另一个特点是可以定义样式表对应不同的分辨率，下面的例子：
.lt-1024 p { font-size: 10px; }
如果分辨率是1024以下的像素，字体大小被设置为10点。head_conf当中设置：
var head_conf = { screens: [800, 1024] };
对旧版本的IE浏览器中的HTML5支持
旧版本的浏览器 - 忽略HTML5元素的支持，但是Head.js可以确保即使是旧的浏览器当中这些元素也能正确加载。
下载head.js
本文链接：网站性能分析（下）-让网站并行加载但顺序执行JS
更多详情阅读：网站性能分析（下）-让网站并行加载但顺序执行JS
123
