简介

延缓执行 JavaScript 是一个能有效提高网页加载速度以及提升用户阅读体验质量的途径。从实际经验来看,将我们的网站从经济实惠的 VPS 迁移到 Softlayer(美国著名的一个数据中心)独立服务器平台上只能给网站加载速度带来20%的提升,但是通过延缓执行 JavaScript 却能帮助提速 50% ,不妨看看 Google Webmaster 工具 > Site Performance(网站性能)的统计结果:

实战

网页开发遵循一个假设,就算有 JS 文件突然被中断了,只要没有 JS 执行错误,那网页就一定会被正确渲染。简单的说,延缓执行 JS 可以采取下面两种规则:

等到页面 Document 准备好之后再来执行内联的 JS 代码,这些代码至少也得放在页面底部。

动态地加载外部 JavaScript 文件。如果多个 JS 文件之间存在依赖,确保主要的 JS 文件引用写在网页底部以便最后加载。

下面这个主页面的代码片段指出了我们如何在开发中延缓 JavaScript 的执行。

  1. <script type="text/javascript">// <![CDATA[
  2. _lazyLoadScripts = new Array();
  3. _lazyExecutedCallbacks = new Array();
  4. // ]]></script>
  5. <script type="text/javascript" src="/scripts/jquery-1.4.4.min.js"></script>
  6. <script type="text/javascript" src="/scripts/website-lazy-load.js"></script>

在开发中经常会有些嵌套网页或者构件需要依赖一些外部 JS 文件或 JS 代码的执行。在这种情况下,可以像上面例子那样在主页面顶部定义两个变量 “_lazyLoadScripts” 和 “_lazyExecutedCallbacks” 。

在下面代码片段中,你可以看到这两个变量是如何被使用在嵌套网页或构件上的。

  1. <script type="text/javascript">// <![CDATA[
  2. _lazyExecutedCallbacks.push(function ()
  3. {
  4. // in the case you need to execute some scripts in a nested page or module.
  5. // don't execute them explicitly, but push them into the callback list.
  6. });
  7. // ]]></script>
  8. <script type="text/javascript">// <![CDATA[
  9. // push the external JS files into the list for deferring loading.
  10. _lazyLoadScripts.push("/scripts/your-script.js");
  11. // ]]></script>

这些被压入(push)到 “_lazyExecutedCallbacks” 里的 JS 代码和被插入到 “_lazyLoadScripts” 里的外部 JS 文件全部都会在 “website-lazy-load.js” 里被执行,执行的代码片段如下:

  1. // dynamically load external JS files when document ready
  2. // dynamically load external JS files when document ready
  3. function loadScriptsAfterDocumentReady()
  4. {
  5. if (_lazyLoadScripts && _lazyLoadScripts != null)
  6. {
  7. for (var i = 0; i < _lazyLoadScripts.length; i++)
  8. {
  9. var scriptTag = document.createElement('script');
  10. scriptTag.type = 'text/javascript';
  11. scriptTag.src = _lazyLoadScripts[i];
  12. var firstScriptTag = document.getElementsByTagName('script')[0];
  13. firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag);
  14. }
  15. }
  16. }
  17. // Execute the callback when document ready.
  18. function invokeLazyExecutedCallbacks()
  19. {
  20. if (_lazyExecutedCallbacks && _lazyExecutedCallbacks.length > 0)
  21. for(var i=0; i<_lazyExecutedCallbacks.length; i++)
  22. _lazyExecutedCallbacks[i]();
  23. }
  24. // execute all deferring JS when document is ready by using jQuery.
  25. jQuery(document).ready(function ()
  26. {
  27. loadScriptsAfterDocumentReady();
  28. invokeLazyExecutedCallbacks();
  29. });

小贴士

开发网页的合理步骤应该是首先编写 HTML 和 CSS 。等这些网页在浏览器里能够正确地(符合你的期望)被渲染出来之后,再开始编写 JS 代码来支持动画或者其他的效果。

不要在 HTML 页面上的任何一个元素上编写 onclick="..." 代码来绑定事件,但是可以在 HTML Document 都准备好的情况下进行绑定。这样可以避免在 JS 文件加载完成之前因用户触发了 onclick 事件而导致的 JS 错误。

如果你的网站需要广泛地加载外部 JS 文件,那么将它们写在 “website-lazy-load.js” 里动态的加载进来,例如 Google Analytics tracking 的JS 文件、 Google AdSense 的JS 文件等等。

这种方法同样地对 CSS 文件也有效。但是别对 主CSS 文件这么做。

原文链接:http://my.oschina.net/u/563639/blog/59214

performance的更多相关文章

  1. Performance Monitor4:监控SQL Server的IO性能

    SQL Server的IO性能受到物理Disk的IO延迟和SQL Server内部执行的IO操作的影响.在监控Disk性能时,最主要的度量值(metric)是IO延迟,IO延迟是指从Applicati ...

  2. Performance Tuning

    本文译自Wikipedia的Performance tuning词条,原词条中的不少链接和扩展内容非常值得一读,翻译过程中暴露了个人工程学思想和英语水平的不足,翻译后的内容也失去很多准确性和丰富性,需 ...

  3. Performance Monitor3:监控SQL Server的内存压力

    SQL Server 使用的资源受到操作系统的调度,同时,SQL Server在内部实现了一套调度算法,用于管理从操作系统获取的资源,主要是对内存和CPU资源的调度.一个好的数据库系统,必定在内存中缓 ...

  4. [MySQL Reference Manual] 23 Performance Schema结构

    23 MySQL Performance Schema 23 MySQL Performance Schema 23.1 性能框架快速启动 23.2 性能框架配置 23.2.1 性能框架编译时配置 2 ...

  5. Unity性能优化(2)-官方教程Diagnosing performance problems using the Profiler window翻译

    本文是Unity官方教程,性能优化系列的第二篇<Diagnosing performance problems using the Profiler window>的简单翻译. 相关文章: ...

  6. 使用ANTS Performance Profiler&ANTS Memory Profiler工具分析IIS进程内存和CPU占用过高问题

    一.前言 最近一段时间,网站经常出现两个问题: 1.内存占用率一点点增高,直到将服务器内存占满. 2.访问某个页面时,页面响应过慢,CPU居高不下. 初步判断内存一点点增多可能是因为有未释放的资源一直 ...

  7. KPI:Key Performance Indicator

    通信中KPI,是Key Performance Indicators的缩写,意思是关键性能指标.performance 还有绩效:业绩的意思,但显然不适用于这种场合. 通信中KPI的内容有:掉话率.接 ...

  8. Performance Monitor1:开始性能监控

    Performance Monitor是Windows内置的一个可视化监控工具,能够在OS级别上实时记录系统资源的使用情况,通过收集和存储日志数据,在SQL Server发生异常时,能够还原系统当时的 ...

  9. Performance Monitor2:Peformance Counter

    Performance Counter 是量化系统状态或活动的一个数值,Windows Performance Monitor在一定时间间隔内(默认的取样间隔是15s)获取Performance Co ...

  10. Disk IO Performance

    一,使用 Performance counter 监控Disk IO问题 1,Physical Disk vs. Logical Disk Windows可以在一个Physical Disk上划出若干 ...

随机推荐

  1. HDU_2046——骨牌铺放问题,递推

    Problem Description 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数. 例如n=3时,为2× 3方格,骨牌的铺放方案有三种,如下图:   In ...

  2. HDU_2018——母牛产小牛的问题,递推

    Problem Description 有一头母牛,它每年年初生一头小母牛.每头小母牛从第四个年头开始,每年年初也生一头小母牛.请编程实现在第n年的时候,共有多少头母牛?   Input 输入数据由多 ...

  3. ios 限制输入长度

    ----------------UITextField限制输入的长度------------ - (BOOL)textField:(UITextField *)textField shouldChan ...

  4. 深度分析Linux下双网卡绑定七种模式

    现在一般的企业都会使用双网卡接入,这样既能添加网络带宽,同时又能做相应的冗余,可以说是好处多多.而一般企业都会使用linux操作系统下自带的网卡绑定模式,当然现在网卡产商也会出一些针对windows操 ...

  5. 实现函数 isInteger(x) 来判断 x 是否是整数

    将x转换为十进制整数,判断是否和自身相等即可: function isInteger(x){ return parseInt(x, 10) === x; } console.log('1.2 is a ...

  6. SecureCRT7.3和SecureFX7.3的MAC下破解

    破解脚本:http://files.cnblogs.com/files/jieyuefeng/SecureCRTFX_mac_crack.zip 破解方法: sudo perl ~/Downloads ...

  7. JAXB--学习2

    一.Jaxb处理java对象和xml之间转换常用的annotation有: @XmlType @XmlElement @XmlRootElement @XmlAttribute @XmlAccesso ...

  8. 2、第2节课html教程客户端控件/css第一课/20150917

    1.<form> 标签 提交 <form action="http://www.baidu.com" method="post'> </fo ...

  9. 验证视图状态 MAC 失败。如果此应用程序由网络场或群集承载,请确保 <machineKey>

    转自:http://hi.baidu.com/taotaowyx/blog/item/074bb8d83907bb3233fa1ce6.html 验证视图状态 MAC 失败.如果此应用程序由网络场或群 ...

  10. SQL2008转SQL2005数据库经验

    1.用SQL2008创建兼容2005的结构脚本. 2.在2005中生成数据库结构. 3.利用2005中的数据导入直接从源数据库中导入数据,此处注意自增长标识的选项需要添加,多表优化选项可以去掉,这里不 ...