首先第一条优化就是:有很多程序员都是喜欢把<script>进行对外部javascript文件引用放在<head>中,浏览器是先下载js文件,然后再对<body>里面的内容进行解释翻译的,如果js文件很多或者很大的话,这样子,不知道你们会不会这样子,不管你们会不会,如果不是必须要打开该网站进行内容的操作的话,我是会第一时间关掉,很多时候,打开一个网页要等很久,我都会判断为死网页的,就是不存在的,所以呢,如果你躺着也中枪的话,醒目点。
PS:这里提醒下:按理论来讲,例如在<head>里面有三个js文件,按理论来讲这三个js文件都是逐一进行下载的,然后在IE8, Firefox3.5和Chrome2都是可以进行js的并行下载的,这是相当的不错的,但还是在js下载完才可以对<body>进行显示
解决办法:既然js阻止了UI的渲染,那么我们直接将js放在</body>前就可以让<html>在<script>下载完之前完美的体现出来,这样子用户就不会看到整个空白的网页,自然提高了友好性。
第二条优化:如果在</body>前用了三个<script>标签引用外部文件,那么这个时候,就等于有三个请求下载,也就是有三个get请求,大家都知道get请求时带上http的,所以这样子重复的带上http请求头,必然造成时间的耗费,所以我们就应该减少get请求呢
解决办法:第一种:把a.js和b.js文件合并在一起,这样子就可以减少get请求的了
第二种:采用第三方工具,例如:php中的Minify,这一种做法,淘宝上用的还是蛮多的,看一个下其中的一个<script>,应用了三个js文件,由3个js文件合并为一个
<script src="http//***************/kiss-min.js, ****************/global-min.js , *********/et.js?t=2011092320110301.js>
第三种优化:不管把js文件放在脚尾,还是3个js文件合并为1个,其本质都是”阻塞模式“,就是说锁死浏览器,当wed页面越来越发杂,js文件越来越多,还是让我们很头疼,此时我们提倡一种“无阻塞模式”加载js脚本文件,也就是页面全部呈现再追加js,也就对应着window.onload事件触发后,我们追加js,这就是所谓的“无阻塞”,但是其中有一个非常要注意的地方就是我么对js的要求是否有严格的顺序。
解决办法:第一种:js文件没有顺序要求,比如a.js和b.js没有顺序要求,那我们就可以用jquery来动态追加js实现
window.onload=function(){
$(#"head").append("<script src="js/a.js" type="text/javascript">")
$(#"head").append("<script src="js/b.js" type="text/javascript">")
}
这样子的话,a.js和b.js这两个文件就是在DomContentLoad结束后再进行触发加载的,这样就不会造成页面的锁定等待。
第二种解决方法:因为在IE系列里,你不能保证a.js一定会在b.js前执行,它只会安照服务器端返回的顺序执行代码。
//第一步:加载jquery类库
loadScript(“jquery/jquery-1.4.1.js,function(){
//第二步:加载a.js
loadScript("js/a.js,function(){
//第三步:加载b.js
loadScript("js/b.js",function(){
})
}")
}”)
腾讯新闻的网站也是这样子处理的