文档章节

通过延缓执行 JavaScript 提升网页加载速度

peterzhu0825
 peterzhu0825
发布于 2012/05/23 17:51
字数 908
阅读 343
收藏 2

简介


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

 

实战

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

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

  2. 动态地加载外部 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” 。

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

01 <script type="text/javascript">// <![CDATA[
02     _lazyExecutedCallbacks.push(function ()
03     {
04         // in the case you need to execute some scripts in a nested page or module.
05         // don't execute them explicitly, but push them into the callback list.
06     });
07 // ]]></script>
08 <script type="text/javascript">// <![CDATA[
09     // 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” 里被执行,执行的代码片段如下:

01 // dynamically load external JS files when document ready
02 // dynamically load external JS files when document ready
03 function loadScriptsAfterDocumentReady()
04 {
05     if (_lazyLoadScripts && _lazyLoadScripts != null)
06     {
07         for (var i = 0; i < _lazyLoadScripts.length; i++)
08         {
09             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    
18 // Execute the callback when document ready.
19 function invokeLazyExecutedCallbacks()
20 {
21     if (_lazyExecutedCallbacks && _lazyExecutedCallbacks.length > 0)
22         for(var i=0; i<_lazyExecutedCallbacks.length; i++)
23             _lazyExecutedCallbacks[i]();
24 }
25    
26 // execute all deferring JS when document is ready by using jQuery.
27 jQuery(document).ready(function ()
28 {
29     loadScriptsAfterDocumentReady();
30     invokeLazyExecutedCallbacks();
31 });

小贴士

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

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

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

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

本文转载自:http://www.oschina.net/question/267865_48538

peterzhu0825
粉丝 0
博文 1
码字总数 0
作品 0
广州
私信 提问
通过延缓执行 JavaScript 提升网页加载速度

简介 延缓执行 JavaScript 是一个能有效提高网页加载速度以及提升用户阅读体验质量的途径。从实际经验来看,将我们的网站从经济实惠的 VPS 迁移到 Softlayer(美国著名的一个数据中心)独立服...

坦诚相待
2012/04/12
2.2K
11
在Android上实现Java和Js交互

其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢。图片、 css 、 js 、 html 这些资源每个大概需要 10-200ms ,一般都是 30ms 就 ok 了。不过webview是必须等到全部资源都完...

zhiweiofli
2013/06/20
0
0
Crankshaft 使 Javascript V8 引擎再提升两倍速度

今天的Chrome特别发布会上,Google宣布了Javascript V8 引擎的新架构:Crankshaft。Crankshaft可以明显提升JavaScript的性能,让用户拥有到更快更顺畅的网页和网页应用体验,即便使用复杂的J...

红薯
2010/12/08
1K
13
10 款用于提升 WordPress 性能的插件

WordPress 已经成为最受欢迎的博客以及网站内容管理系统(没有之一),WordPress 最强大的在于其庞大的开发者社区,为 WP 开发出很多的插件,本文向大家介绍 10 款用于提升 WP 性能的插件。 ...

红薯
2011/07/11
1K
4
精读《高效 javascript》

前言 本期我来给大家推荐的书是《高性能JavaScript》,在这本书中我们能够了解 javascript 开发过程中的性能瓶颈,如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。同样...

程序员解决师
2018/08/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 请务必让我分担他们的痛苦!

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @clouddyy :分享石元丈晴的单曲《Why》: 《Why》- 石元丈晴 手机党少年们想听歌,请使劲儿戳(这里) @一代码哥 :当他妈狗屁的程序员,天天...

小小编辑
54分钟前
138
4
php 遇到 No input file specified的解决方法

(一)IIS Noinput file specified 方法一:改PHP.ini中的doc_root行,打开ini文件注释掉此行,然后重启IIS 方法二: 请修改php.ini 找到 ; cgi.force_redirect = 1 去掉前面分号,把后面的1...

chenhongjiang
今天
9
0
MySQL 基础

一、常用命令 在命令行中,配置好环境变量后,通过cmd可以直接进入mysql命令行模式,同时列举几种常用命令 # 进入mysql数据库,密码可以先不写,打完-p后再输入,防止被别人看到mysql -u账...

华山猛男
今天
6
0
简单的博客系统(四)Django请求HTML页面视图信息--基于函数的视图

1. 编写用于查询数据的功能函数 应用目录 下的 views.py 文件通常用于保存响应各种请求的函数或类 from django.shortcuts import renderfrom .models import BlogArticles# Create your ...

ZeroBit
今天
6
0
用脚本将本地照片库批量导入到Day One中

因为目前iCloud 空间已经不足,其中95%都是照片,之前入手了DayOne,且空间没有限制,订阅费一年也不少,再加上DayOne作为一款日记App 也比较有名,功能方面最大的就是地理视图与照片视图,尤...

在山的那边
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部