网站性能分析(下)-让网站并行加载但顺序执行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 { font-size: 10px; }
如果分辨率是1024以下的像素,字体大小被设置为10点。head_conf当中设置
:
var head_conf = { screens: [800, 1024] };
对旧版本的IE浏览器中的HTML5支持
旧版本的浏览器 - 忽略HTML5元素的支持,但是Head.js可以确保即使是旧的浏览器当中这些元素也能正确加载。
下载head.js
更多详情阅读:网站性能分析(下)-让网站并行加载但顺序执行JS
123