Javascript加载执行问题探索

最新推荐文章于 2023-04-10 18:22:55 发布
最新推荐文章于 2023-04-10 18:22:55 发布
阅读量77 收藏
点赞数
文章标签： javascript xhtml ui ViewUI
原文链接：http://www.cnblogs.com/html5cn/articles/2318435.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左右，大大提高了网页的下载呈现和友好型。

同样也可以看看腾讯网，他也是这么干的。

 

 

 

本文转自HTML5中国官方网站：http://bbs.html5cn.org/thread-1177-1-1.html

转载于:https://www.cnblogs.com/html5cn/articles/2318435.html

weixin_30414245
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
geogebra javascript API参考潘立强翻译部分(1)1
08-03
geogebra javascript API参考潘立强翻译部分(1)1
使用GeoGebra来进行项目辅助开发
draracle的巢穴
06-21 1323
在开发包围盒寻路算法的过程中，经常碰到一个问题，就是虽然抓到了现场的数据，但是想通过数据还原场景就需要非常多的功夫，特别是还要想办法将地形绘制出来，往往这一步最耗时间，而且还可能因为绘制不精确导致某些线索的丢失。于是萌生了借助某些软件来实现现场还原的想法。最开始想用cad软件，但cad软件虽然可以支持命令输入，但很少有cad软件太复杂了，用起来很不习惯。 后来在网上找到一个软件：GeoGebra几何。这个软件非常轻量级，但很好用，是一款数学绘图软件，虽然不支持直接批量输入绘图命令，但支持给对象导入js脚本
GeoGebra 與數學探索 1 GeoGebra 入門到進階之整體介紹
m0_47985483的博客
12-07 1182
GeoGebra 除了可以輕鬆的讓我們以即時動態反饋圖形的方式模擬探索幾何的問題, 或是幫我們驗證答案, 也可以進行數論、微積分、矩陣等等各方面的探索, 在問題尺度不大又需要即時以圖像視覺呈現探索過程的情況下, GeoGebra 其實優於以寫程式的方式進行探索. 一般會認為寫程式水準較高, 用滑鼠拖拉是較初階的水準, 其實如果使用者是中小學生或是教師, 或是大學新鮮人針對微積分的範圍, 直接以滑鼠拖拉進行即時反饋圖形的方式探索驗證, 會讓使用者可以專心在問題的分析而不是在程式的除錯上.
三元函数的几何图形一般是_迭代加轨迹方法绘制递归函数
weixin_36373787的博客
12-31 703
GeoGebra中，定义函数时很遗憾不支持递归。为了绘制递归函数的图象，一般采用floor函数或ceil函数转化成非递归函数来进行绘制，这类方法已有多篇文章讲解制作的原理及作法，此处不再细说。昨天我们介绍了一种方法绘制递归函数利用JavaScript绘制GeoGebra递归函数，本文介绍利用迭代加轨迹的方法来绘制递归函数的图象。实例：绘制函数 f(x) 的图象实现原理：GeoGebra不...
JavaScript初探
feiyan的博客
09-02 261
javascript 既可以作为前端语言，也可以作为后端语言 语法上与java有类似之处，但本质上与java语言没有关系 1. javascript 基本语法 1.1 基本数据类型 number 数字类型， 1.0 100 string 字符串类型 “hello” ‘world’ null 空值 undefined 未定义 比如一个变量还没有赋值 布尔类型 tr...
JavaScript文档加载模式以及元素获取
10-15
为了克服同步加载的问题，可以使用`async`或`defer`属性。`async`属性使得脚本可以在不阻塞页面解析的情况下加载和执行，而`defer`属性则会在整个文档解析完成后，但在`DOMContentLoaded`事件触发之前执行脚本。 ``...
Sequential在浏览器中可视化JavaScript代码执行的环境
08-10
2. **编写和加载代码**：在Sequential提供的编辑器中输入或导入要分析的JavaScript代码。 3. **配置和运行**：设置所需的断点，选择是否开启步进模式，然后开始执行代码。 4. **观察和分析**：观察代码执行的可视...
JavaScript
03-16
1. DOM事件：JavaScript可以监听并响应用户的点击、鼠标移动、页面加载等事件，通过`addEventListener`和`removeEventListener`方法添加和移除事件监听器。 2. 回调函数：事件触发时执行的函数，常用于异步编程，如...
JavaScript程序设计JavaScript运行原理（
11-19
JavaScript是一种广泛应用于网页和网络应用的脚本语言，它的运行原理是理解其核心概念的关键。JavaScript的运行主要包括以下...因此，无论你是初学者还是经验丰富的开发者，都应该不断探索和学习JavaScript的内在机制。
js 对角点 求 矩形_geogebra基础入门12:轨迹指令的初步应用（以矩形大法为例）...
weixin_28718641的博客
12-09 2240
一、平面几何常用的轨迹指令geogebra的轨迹指令比较丰富，平面几何中常用的是下面两个：(1)Locus(,) ；轨迹(< 构造轨迹的点>,< 控制点>)。返回从属于点 P 的轨迹点 Q 的轨迹。注：点 P 需要是对象上(如直线、线段、圆)的点。返回第一个参数点的轨迹曲线，这个点是依赖于第二个参数点的派生点。(2)Locus(,) ；轨迹(< 构造轨迹的点>,...
GeoGebra图形计算器，可输出多维立体图像
07-17
GeoGebra图形计算器，输入算式、公式，以及输入数据，可以得出每个计算步骤，并且可以图形显示，可以帮助理解复杂、抽象、立体多项算法，我用于理解机器学习算法。
geogebra下载 GeoGebra v6.0.574.0
10-23
GeoGebra(geogebra中文版)是一款结合“几何”、“代数”与“微积分”的动态数学软件，它是由美国佛罗里达州亚特兰大学的数学教授Markus Hohenwarter所设计的。一方面来说，GeoGebra(geogebra中
geogebra使用技巧
热门推荐
panfei263031的博客
03-20 1万+
文章目录geogebra视频教程推荐创建工具多选对象 geogebra视频教程推荐 最实用的GGB（geogebra）入门课程，数学教师学生适用课程 创建工具 创建工具这个功能很有用，比如画一个三角形的内切圆、过一个点画一个线段的垂线段等，由于geogebra没有提供这样的命令，所以就需要很多的中间步骤。geogebra允许用户自己创建工具，根据输入条件，直接输出对应的结果。创建工具的方法： 先一步一步的做出最终结果； 点击工具->新建工具，然后点击输入和输出，就可以创建工具。 这里以过一点画线段
关于js脚本的应用
yomie123的博客
08-06 123
今天写了一个html页面，中间有用到一个js文件。 把这个html文件拉到浏览器中运行之后发现那个js文件没有用到，后来想也许要在服务器中运行才有用。果然，把一个文件夹移到服务器上后发现这个js脚本就用起来了。...
JavaScript学习笔记（一）
最新发布
君兮月影的博客
04-10 462
学习JavaScript高级程序设计（第4版）学习笔记（一）
JavaScript加载顺序报错
baidu_37639000的博客
04-28 425
JavaScript如果放在HTML主体之前，由于被操作的元素未被加载报错： 1.script中忽略函数的影响，仅对标签及元素的获取和操作：报错； 注：获取得到null，不报错，操作则在console日志报错。<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
动态加载JS脚本的4种方法
liaoya的专栏
01-16 2106
1、直接document.write    document.write(""); 2、动态改变已有script的src属性    s1.src="test.js" 3、动态创建script元素    var oHead = document.getElementsByTagName
js怎么设置描点跳转_描点法画三角函数图像的动态演示——数学软件GeoGebra制作教程...
weixin_42501850的博客
12-15 533
之前，我们学了描点法画函数图像「多种函数适用」，其效果如下：当时，在文末强调了：如果想要适用于三角函数，就涉及到文本方面的修改！那么，先来看一下修改后的效果：手动输入之前还有一篇描点法画函数图像是以一次函数为例，效果如下：自变量x的取值是提前设定的。我们不妨也来改一改，以y= A sin(ω x + φ)为例：提前设定我们暂且称第一种为“手动输入”，第二种为“提前设定”。这两个动态演示主要是涉及文...
Web前端开发技术-JavaScript的事件.pptx
07-07
这些行为包括页面的加载、鼠标单击、鼠标指针移动等具体的动作，对实现网页的交互效果起着重要的作用。事件源、事件类型和事件处理程序是事件的三要素，分别指触发事件的元素、触发的事件类型和事件触发后要执行的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值