如何调整JS文件提高网页速度?

  随着互联网用户需求的提升,加上移动设备的越来越普及和流行,网站加载速度越来越受到站长的关注。网站加载时间是用户流失的一个主要原因,普通用户是不会有耐心来等待一个超长的网页加载,而这一点直接影响到网站的运营。

  在百度站长平台页面优化建议中,百度就着重检查了网站加载时间这一块,并针对首字节时间、使用长链接、启用gzip压缩、图片压缩、设置静态内容缓存时间、合理使用Cookies、合并CSS和JS文件等方面给出了优化建议。这些就不一一说了,下面就谈谈网页如何设置JS文件提高加载速度。

  


  绝大部分网页都会把JS文件放在head中,但是很多浏览器都会使用单一的线程来做网页页面的加载和JS脚本处理,也就是当执行引擎遇到script代码的时候,此时页面后面的加载都必须等JS执行完毕。如果JS执行速度慢,那么用户就只能死等了,此时用户就很可能关掉网页。

  IE8,Firefox3.5和Chrome2都实现了js的并行下载,这个相当不错的,自动就缩短了JS的执行时间,但是还是会阻碍一些其他资源的下载。比如说JS文件后的图片代码要等到JS执行完毕后才会进行加载,这样还是可能造成用户的等待,如何做呢?

  一、JS文件位置调整

  既然JS文件放在前面后延迟后面代码的加载,那么我们可以考虑将JS放在/body前或更厚,这样就可以让script前的html完美的呈现,不会让用户看到空白页面,提高了体验度。

  二、合并JS文件

  尽管在将JS文件位置后移后可以让其他代码优先加载,但在执行JS文件的时候任然比较耗费时间,如果JS文件比较多,就需要进行多次“Get”请求,延长加载速度。那么我们自然就是要减少Get请求。通常有两种方案:

  第一:合并js文件,比如将1.js、2.js和3.js合并掉。

  第二:利用第三方工具,比如php中的Minify。

  关于合并JS,是用得比较多的,绝大部分网站都是外部调用JS,而现在把调用的JS合并到一起也是很常见的。

  三、最后执行JS文件

  不管是把JS文件放在脚尾,还是合并JS文件,都是治标不治本,也就是无限的去缩短JS执行时间,并且避免JS执行与代码加载互相冲突,但是这样只是让html代码文件尽管加载,还是不能很好的避免JS执行与代码加载互阻,当web页面越来越复杂,JS文件越来越多,这个阻碍就会越来越大。

  所以最好的办法就是让JS文件最后加载,也就是页面全部呈现完再追加JS脚本,当window.onload事件触发完后,我们才开始加载JS,这样完全不会让用户去等待网站的主题内容加载,目前有很多大型网站就是利用的这个。这一点需要与技术人员协作完成或自己动手在网上找代码,不过个人建议还是教给会的人完成,自己可以先学,以免出现失误,得不偿失。

  以上就是个人的一些浅见,所以除非需要将JS文件放在head位置,否侧建议应该将JS文件放在/body之前或是更后面,同时合理的合并JS文件,减少GET次数,如果无限制还可以设置JS最后执行,当然是不影响网页整体UI的情况下,这样大大提高了网页主题信息的加载速度。提高网站的用户体验。

  文章来自seo博客:http://blog.sina.com.cn/mumuhouzi 有什么问题欢迎讨论!

时间: 2024-10-30 17:51:25

如何调整JS文件提高网页速度?的相关文章

网站分析:通过本地托管ga.js文件提高网页性能

中介交易 SEO诊断 淘宝客 云主机 技术大厅 Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted,说明ga虽然是异步跟踪,但某些情况下对网页性能与加载时间确实存在影响.Google分析代码到底会不会影响网页性能?本地托管ga.js是否可行?本文提供本地服务器托管ga.js的基本思路与实现方法. Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里

利用JS延迟加载百度分享代码,提高网页速度

发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示. 这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --> <div id=&q

利用JS延迟加载百度分享代码,提高网页速度_javascript技巧

发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --><div id=&quo

帮助开发者提高网页速度的15个工具

Response times, availability, and stability are vital factors to bear in mind when creating and maintaining a web application. If you're concerned about your web pages' speed or want to make sure you're in tip-top shape before starting or launching a

网站加速图文教程一:让JS文件加载速度加快

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 很多网站里会添加大量的JS代码,其中是统计啊,广告代码等一大堆的JS代码,如用某XX联盟的广告大部分时间打开网页的时候都显示在加载该联盟的广告,这样严重影响了用户的体验.有没有什么方法加快JS的加载呢?下面便宜吧就介绍一下让JS文件加载速度加快的图文教程. 首先,大部分的JS调用的代码为下: <script src="xxxx

提高网页速度浏览切实可行的七个方法

速度|网页 网站速度,笔者总结了一些切实可行的方法,制作主页时,以下的方法可以令你的网页速度大大提高. 一.记得帮页面减肥 我们浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘,再用浏览器解释查看的.下载网页的快慢在显示速度上占了很大比重,所以,网页本身所占的空间越小,那么浏览速度就会越快.这就要求在做网页的时候遵循一切从简的原则,如:不要使用太大的Flash动画.图片等资源.干净.简洁的页面会给人一种思路明朗的感觉. 二.如没必要,尽量使用静态HTML页面 众所周知,ASP.PHP.JSP

雅虎:13条技巧提高网页速度

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 a网页打开速度,是网站做SEO的一个重要方面,包括搜索引擎本身也会对自己的网页考虑这个问题: 最近,雅虎的Exceptional Performance团队在其开发者网络上提出了提高网页打开速度的13条规则,其中包括"减少http请求",避免网页转向"等 具体内容如下: 1.减少http请求 2.减少多媒体,图片

受欢迎网站的前提提高网页打开速度

  关于受欢迎网站用户体验的方法论有很多,最基本的:别让我等!!提高网页打开速度. 为什么迅雷在下载软件中独树一帜?为什么越来越多的用户在低画质的视频网站上在线观看连续剧,而不是下载更清晰的视频文件?答案是:用户的耐心非常有限,用户对速度的追求远远超过了对画质等因素的追求. 回到网站运营问题上,你是否有在全国各地都测试过,访问打开你的网站需要几秒? 曾有很多研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来,我列

通过本地文件提高Google Anlytics性能

中介交易 SEO诊断 淘宝客 云主机 技术大厅 Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted,说明ga虽然是异步跟踪,但某些情况下对网页性能与加载时间确实存在影响.Google分析代码到底会不会影响网页性能?本地托管ga.js是否可行?本文提供本地服务器托管ga.js的基本思路与实现方法. Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里