网站性能分析（下）-让网站并行加载但顺序执行JS

如果网站不支持JavaScript，复杂的功能将无法正常工作。在开发当中通常有几个脚本会写在HTML文件的头部。你嵌入的越多，网站的速度潜在的变得越慢。因此提高并行加载速度变得非常有必要，在前面的文章当中我已经提供了2种提高网站响应速度的方法，今天分享第三种方法，让让网站并行加载但顺序执行JS

你是否也在寻找

经验分享-延缓执行 JavaScript 提升网页加载速度
使用jquery动态加载javascript以减少服务器压力
web开发经验推荐-新网站项目中的8个有用片段

在这种情况下我们可以使用Head.js来解决这样的事情，head.js是一个JavaScript调用自身的脚本。他能够并行加载JS，但是执行的时候却按顺序执行，来提高网站速度

如何嵌入和使用Head.js

HTML文件的头部。嵌入head.js配置变量head_conf的必需的一些特殊功能，你可以设置几个选项：

<script>
  var head_conf = { ... }
</script>
 
<script src="/js/head.min.js"></script>

在head.js当中一次性加载多个JavaScript

Head.js的主要功能是同一时间并行加载多个脚本。相反的，你不必单独提取每个脚本，Head.js工作流程如下：

head.js("file1.js", "file2.js", "file3.js");

虽然上面的脚本文件是排序写下来的，Head.js并不是先加载在前的，然后紧接着加载第二个，他是并行加载的然后顺序执行。这个很容易可以想象，这样加载的好处是样式表和图片的加载速度更快，使得确保整个页面感觉要快得多。

对浏览器的CSS功能

特别提出的是head.JS对CSS3支持也是没有问题的，因为不是所有的浏览器中都支持原生标准的。Head.js带有各个浏览器的样式特殊的类的定义：

.webkit p {
  color: red;
}

上面的例子在Webkit的浏览器所有p标记为红色。你可以明确地定义浏览器支持特定的CSS3属性或您的浏览器不支持某些属性：

.borderimage div {
  border-image: url("border.png") 25% repeat;
}
 
-no-borderimage div {
  border: 1px solid green;
}

在这个例子中，我们定义的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