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

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

在这种情况下我们可以使用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 {
&nbsp; font-size: 10px;
}

如果分辨率是1024以下的像素,字体大小被设置为10点。head_conf当中设置

var head_conf = { screens: [800, 1024] };

对旧版本的IE浏览器中的HTML5支持

旧版本的浏览器  - 忽略HTML5元素的支持,但是Head.js可以确保即使是旧的浏览器当中这些元素也能正确加载。

下载head.js

本文链接:网站性能分析(下)-让网站并行加载但顺序执行JS

 更多详情阅读:网站性能分析(下)-让网站并行加载但顺序执行JS

 

123

posted @ 2012-11-14 16:44  创想中国(羲闻)  阅读(4974)  评论(6编辑  收藏  举报