技术原网址是: http://bbs.html5cn.org/thread-1177-1-8.html
一: 原始情况
首先大家看看如下的代码:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head id="head">
- <title></title>
- <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
- <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
- <script src="js/hello.js" type="text/javascript"></script>
- <script src="js/world.js" type="text/javascript"></script>
- </head>
- <body>
- <img src="1.jpg" width="200" height="300" />
- </body>
- </html>
复制代码
估计90%的程序员都会把js文件放在head中,但是大家有没有深究过呢?很多浏览器都会使用单一的线程来做“界面UI的更新”和“JS脚本的处理“,
也就是当执行引擎遇到”<script>“的时候,此时页面的下载和渲染都必须等待<script>执行完毕。那么对用户而言就悲哀了,看着锁住的页面,
此时用户很可能就会给你关掉。
从上面的瀑布图中我们可以看出二点:
第一:
三个js文件并行下载,但是按我上面的理论中js应该是一个接一个的执行。然而在IE8,Firefox3.5和Chrome2都实现了js的并行下载,
这是相当不错的,但是他还是会阻碍一些其他资源的下载,比如说图片。
第二:
图片1.jpg的下载是在js执行完成后触发的,这也验证了上面所说的情况,阻止了image的加载。
二:第一步优化
既然js阻止了UI渲染,那么我们可以考虑将js放在</body>前,这样就可以让<script>前的html完美的呈现,不会让用户看到页面空白等待
而苦恼的情况,自然就提高了友好性。
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head id="head">
- <title></title>
- <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <img src="1.jpg" width="200" height="300" />
- <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
- <script src="js/hello.js" type="text/javascript"></script>
- <script src="js/world.js" type="text/javascript"></script>
- </body>
- </html>
复制代码
下面的图也展示了1.jpg和三个js几乎并行下载和执行。时间由上面的“469ms+”缩小到“326ms”。
三:第二步优化
看上面的“瀑布图”,估计大家也看出来了,三个js文件进行了三次“Get”请求,大家都知道Get请求是需要带http头的,
所以说需要耗费时间,那么我们采取的方案自然就是减少Get请求。通常有两种方案。
第一:合并js文件,比如将上面的“hello.js"和“world.js“合并掉。
第二:利用第三方工具,比如php中的Minify。
关于第二种做法,taobao用的还是比较多的,看一下其中的一个script,应用了三个js文件。由3个Get请求变为了1个。
四:第三步优化
不管是把js文件放在脚尾,还是三个合并一个,其本质都是”阻塞模式“,就是说锁死浏览器,当web页面越来越复杂,js文件越来越多,还是
让我们头疼的,此时我们就提倡一种“无阻塞模式“加载js脚本,也就是页面全部呈现完再追加js,也就对应着window.onload事件触发后,我们才
追加js,这就是所谓的“无阻塞“,但是其中有一个非常要注意的地方就是我们对js的要求是否有严格的顺序。
第一:无顺序要求,比如我对”hello.js“和”world.js"没有顺序要求,那么我们完全可以用jquery来动态追加实现。
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head id="head">
- <title></title>
- <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <img src="1.jpg" width="200" height="300" />
- <script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- window.onload = function () {
- $("#head").append("<script src='js/hello.js' type='text/javascript'><\/script>")
- $("#head").append("<script src='js/world.js' type='text/javascript'><\/script>");
- }
- </script>
- </body>
- </html>
复制代码
从图中可以看出,"hello.js"和“world.js"出现在蓝色线以后,也就说明这两个js是在DomContentLoad结束后再进行触发加载的,这样就不会造成页面的锁定
等待。
第二:有顺序要求
为什么一定要有顺序要求这个概念呢?对于上面的那个动态追加的“两个js”文件,在IE系列中,你不能保证hello.js一定会在world.js前执行,
他只会按照服务器端返回的顺序执行代码。
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head id="head">
- <title></title>
- <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <img src="1.jpg" width="200" height="300" />
- <script type="text/javascript">
- function loadScript(url, callback) {
- var script = document.createElement("script");
- script.type = "text/javascript";
- //IE
- if (script.readyState) {
- script.onreadystatechange = function () {
- if (script.readyState == "loaded" || script.readyState == "complete") {
- script.onreadystatechange = null;
- callback();
- }
- }
- } else {
- //非IE
- script.onload = function () {
- callback();
- }
- }
- script.src = url;
- document.getElementById("head").appendChild(script);
- }
- //第一步加载jquery类库
- loadScript("jquery/jquery-1.4.1.js", function () {
- //第二步加载hello.js
- loadScript("js/hello.js", function () {
- //第三步加载world.js
- loadScript("js/world.js", function () {
- });
- });
- });
- </script>
- </body>
- </html>
复制代码
大家也能看到,页面完全Load的时间其实也就310ms左右,大大提高了网页的下载呈现和友好型。
同样也可以看看腾讯网,他也是这么干的。
分享到:
相关推荐
JavaScript引擎包括GoogleV8(Chrome,Node)都是专为快速执行大型JavaScript程序而设计的。在开发过程中,如果你在乎内存使用率和性能情况,那么你应该会关心在用户的浏览器中JavaScript引擎背后是怎么样的。无论是...
在执行搜索时让文档过渡(就像在“黑客帝国”武器场景中一样!) 修复封面/页面被倒置 添加按兴趣选择的下拉列表(Mortens 数据)示例: //api.issuu.com/call/interests/list?lang=en 很高兴有: 改进旋转...
谨慎使用此加载程序,在依赖此加载程序之前探索Vuer的方法来实现所需的内容 安装 使用npm install将其安装到您的项目中 npm install --save-dev vue-inheritance-loader 您必须将其添加到webpack配置中,并且必须在...
页面下载到浏览器后,许多站点都使用JavaScript加载内容。 因此,您需要有一个现代的javascript引擎来解析和执行这些额外的指令,以获取人类希望看到的内容。 受地理限制的内容; 由于GDPR,美国的一些站点阻止了...
Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关...
_将提供的链接粘贴到Chrome(或Canary)中,您将拥有令人难以置信的ChromeDevTools,可以逐步执行代码进行学习,探索和调试。 什么是配置? 您会注意到已经为您设置的两件事,应该有助于学习快速编写自定义插件和...
克隆这个 repo 并执行: npm install npm run watch # Go to http://localhost:8080/ 这将安装我们的依赖项并运行一个小型的实时重新加载服务器。 这应该能让你启动并运行。 开发依赖 这是我用于开发的快速概述:...
FriPan本身不执行直系同源物聚类,但是可以直接加载[Roary]( )的输出。 每个基因组是一行,并且每个基因簇都有一个柱状位置。 安装确保已安装npm : brew install npm # MacOS Homebrew or Linuxbrewsudo apt-get...
:books: 学习和探索MongoDB。 注意:这是在macOS上开发的。 指示 作为先决条件,您必须安装Mongo。 有关选项,请参见“部分。 启动MongoDB服务器 使用来自佐治亚州(GA)的邮政编码测试数据加载数据库(这是来自...
adversarial.js完全用JavaScript实现-因此它可以完全在您的浏览器中运行。我们依赖TensorFlow.js。 该库支持以下攻击: (L_inf攻击) (L_inf攻击) (L0攻击) (L0攻击) (L2攻击) 该演示可以破坏以下预加载的...
关于这个插件plogger是一个动态操作插件,在页面加载事件上配置时,可以实时捕获用户交互事件,错误和xhr并将它们记录在... 在plogger报告中分析您的探索,其中包含散点图可帮助您可视化探索产生的事件,错误和xhr 事件
8.2.3 多个javascript文件的加载与执行 160 8.2.4 与html5 web workers通信 160 8.3 编写主页 161 8.3.1 处理错误 161 8.3.2 html5 web workers 162 8.3.3 html5 web workers的嵌套使用 162 8.3.4 使用定时器 ...
完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎 正式发布表达式计算引擎WfcExp V0.9(附源码) 运算...
同时,还会介绍如何以不唐突的方式添加事件(甚至在页面加载完成之前)。此外,这一章还将深入更高级的主题,例如事件冒泡、委托和命名空间。 第4章介绍通过jQuery实现动画的技术,我们将学会隐藏、显示和移动页面...
10.2.3 多个JavaScript文件的加载与执行 209 10.2.4 与HTML5 Web Workers通信 209 10.3 编写主页 210 10.3.1 处理错误 211 10.3.2 停止Web Workers 212 10.3.3 Web Workers的嵌套使用 212 10.3.4 使用定时器 ...
这是 (解 )的源代码,这是对如何解码JPEG图像的交互式探索,该技术已在Parametric Press的第一期中发布。 用自己的图像替换 您可以将查询参数?imageSrc=https://urlToImage.jpg到文章中,它将使用该图像(而不是...
8.2.3 多个JavaScript文件的加载与执行 160 8.2.4 与HTML5 Web Workers通信 160 8.3 编写主页 161 8.3.1 处理错误 161 8.3.2 HTML5 Web Workers 162 8.3.3 HTML5 Web Workers的嵌套使用 162 8.3.4 使用定时器 163 ...
8.2.3 多个JavaScript文件的加载与执行 160 8.2.4 与HTML5 Web Workers通信 160 8.3 编写主页 161 8.3.1 处理错误 161 8.3.2 HTML5 Web Workers 162 8.3.3 HTML5 Web Workers的嵌套使用 162 8.3.4 使用定时器 163 ...
8.2.3 多个JavaScript文件的加载与执行 160 8.2.4 与HTML5 Web Workers通信 160 8.3 编写主页 161 8.3.1 处理错误 161 8.3.2 HTML5 Web Workers 162 8.3.3 HTML5 Web Workers的嵌套使用 162 8.3.4 使用定时器 163 ...
8.2.3 多个JavaScript文件的加载与执行 160 8.2.4 与HTML5 Web Workers通信 160 8.3 编写主页 161 8.3.1 处理错误 161 8.3.2 HTML5 Web Workers 162 8.3.3 HTML5 Web Workers的嵌套使用 162 8.3.4 使用定时器 163 ...