开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 2828|回复: 5
收起左侧

[js/PHP求助] JavaScript提升网页加载速度

[复制链接]

发表于 2013-2-21 12:51:02 | 显示全部楼层 |阅读模式   北京市北京市
如果你的网站需要广泛地加载外部 JS 文件,那么将它们写在 “website-lazy-load.js” 里动态的加载进来,例如 Google Analytics tracking 的JS 文件、 Google AdSense 的JS 文件等等。



简介
延缓执行 JavaScript 是一个能有效提高网页加载速度以及提升用户阅读体验质量的途径。从实际经验来看,将我们的网站从经济实惠的 VPS 迁移到 Softlayer(美国著名的一个数据中心)独立服务器平台上只能给网站加载速度带来20%的提升,但是通过延缓执行 JavaScript 却能帮助提速 50% ,不妨看看 Google Webmaster 工具 > Site Performance(网站性能)的统计结果:
实战
网页开发遵循一个假设,就算有 JS 文件突然被中断了,只要没有 JS 执行错误,那网页就一定会被正确渲染。简单的说,延缓执行 JS 可以采取下面两种规则:
等到页面 Document 准备好之后再来执行内联的 JS 代码,这些代码至少也得放在页面底部。
动态地加载外部 JavaScript 文件。如果多个 JS 文件之间存在依赖,确保主要的 JS 文件引用写在网页底部以便最后加载。
下面这个主页面的代码片段指出了我们如何在开发中延缓 JavaScript 的执行。

    <script type="text/javascript">// <![CDATA[              _lazyLoadScripts = new Array();             _lazyExecutedCallbacks = new Array();      // ]]></script>     <script type="text/javascript" src="/scripts/jquery-1.4.4.min.js"></script>   
  • <script type="text/javascript" src="/scripts/website-lazy-load.js"></script>   
在开发中经常会有些嵌套网页或者构件需要依赖一些外部 JS 文件或 JS 代码的执行。在这种情况下,可以像上面例子那样在主页面顶部定义两个变量 “_lazyLoadScripts” 和 “_lazyExecutedCallbacks” 。
在下面代码片段中,你可以看到这两个变量是如何被使用在嵌套网页或构件上的。

    <script type="text/javascript">// <![CDATA[   
  •      _lazyExecutedCallbacks.push(function ()   
         {   
  •          // in the case you need to execute some scripts in a nested page or module.   
             // don't execute them explicitly, but push them into the callback list.   
  •      });   
    // ]]></script>   
  • <script type="text/javascript">// <![CDATA[   
         // push the external JS files into the list for deferring loading.   
  •      _lazyLoadScripts.push("/scripts/your-script.js");   
  • // ]]></script>  
这些被压入(push)到 “_lazyExecutedCallbacks” 里的 JS 代码和被插入到 “_lazyLoadScripts” 里的外部 JS 文件全部都会在 “website-lazy-load.js” 里被执行,执行的代码片段如下:

    // dynamically load external JS files when document ready   
  • // dynamically load external JS files when document ready   
    function loadScriptsAfterDocumentReady()   
  • {   
         if (_lazyLoadScripts && _lazyLoadScripts != null)   
  •      {   
             for (var i = 0; i < _lazyLoadScripts.length; i++)   
  •          {   
                 var scriptTag = document.createElement('script');   
  •              scriptTag.type = 'text/javascript';   
                 scriptTag.src = _lazyLoadScripts;   
  •              var firstScriptTag = document.getElementsByTagName('script')[0];   
                 firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag);   
  •          }   
         }   
  • }   
         
  • // Execute the callback when document ready.   
    function invokeLazyExecutedCallbacks()   
  • {   
         if (_lazyExecutedCallbacks && _lazyExecutedCallbacks.length > 0)   
  •          for(var i=0; i<_lazyExecutedCallbacks.length; i++)   
                 _lazyExecutedCallbacks();   
  • }   
       
  • // execute all deferring JS when document is ready by using jQuery.   
    jQuery(document).ready(function ()   
  • {   
         loadScriptsAfterDocumentReady();   
  •      invokeLazyExecutedCallbacks();   
  • });  
小贴士
开发网页的合理步骤应该是首先编写 HTML 和 CSS 。等这些网页在浏览器里能够正确地(符合你的期望)被渲染出来之后,再开始编写 JS 代码来支持动画或者其他的效果。
不要在 HTML 页面上的任何一个元素上编写 代码来绑定事件,但是可以在 HTML Document 都准备好的情况下进行绑定。这样可以避免在 JS 文件加载完成之前因用户触发了 onclick 事件而导致的 JS 错误。
如果你的网站需要广泛地加载外部 JS 文件,那么将它们写在 “website-lazy-load.js” 里动态的加载进来,例如 Google Analytics tracking 的JS 文件、 Google AdSense 的JS 文件等等。
这种方法同样地对 CSS 文件也有效。但是别对 主CSS 文件这么做。



发表于 2017-6-10 13:15:26 | 显示全部楼层   山西省运城市
好东西,学习了
回复 支持 反对

使用道具 举报

发表于 2014-5-8 15:22:37 | 显示全部楼层   河南省洛阳市
非常专业啊,看的有点迷糊了         
回复 支持 反对

使用道具 举报

结帖率:100% (1/1)

签到天数: 2 天

发表于 2014-5-2 02:41:05 | 显示全部楼层   广东省佛山市
路过看不懂
回复 支持 反对

使用道具 举报

头像被屏蔽
结帖率:86% (6/7)
发表于 2014-3-14 15:32:38 | 显示全部楼层   湖南省长沙市
JS看不懂
回复 支持 反对

使用道具 举报

结帖率:33% (1/3)
发表于 2013-2-21 13:00:22 | 显示全部楼层   四川省成都市
鄙视 转载的
鄙视
鄙视
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 诚聘英才| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 800073686,邮箱:800073686@b.qq.com
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表