关于页面加载时的时间消费，许多书中都做出了介绍，也提出了很多种方法。本文章就详细介绍XHR注入。

概述：JS分拆的方法

1.XHR注入：就是用ajax异步请求同域包含脚本的文件，然后将返回的字符串转化为脚本使用，该方法不会造成页面渲染和onload事件的阻塞，因为是异步处理，推荐使用。

2.iframe注入：加载一个iframe框架，通过使用iframe框架中的脚本来避免src方式加载脚本的阻塞，但是iframe元素开销较大，不推荐。

3.DOM注入：就是创建script元素，通过制定该元素的src并放入DOM树中，根据该语句书写的文字不同，会造成渲染或onload事件的阻塞。

4. document.write方法：在JS脚本中使用document.write('<script>XXX</script>');这种方法简单粗暴，但是它仍然会造成阻塞，所改变的只是什么时候阻塞。

详细介绍：
第一步：创造ajax函数：1建立XMLHTTPRequest或ActiveXObject对象 2.ajax对象的open方法 3.ajax对象的send方法 4.改写onreadystatechange事件，判断status（200）和readyState（4）属性值，对请求数据类型操作。

第二步：用ajax函数请求一个JS文件。

第三步：两个分支：第一种：拿来主义，eval（请求返回字符串）;执行了JS中的函数，达到目的。

第二种：创建script对象，利用该对象的text属性赋值 返回字符串 方式，达到目的。

看代码：

实例JS文件：创建一个100X100的黑色div，并加载到指定元素中。

function test() {

    oDiv = document.createElement('div');

    oDiv.style['width'] = '100px';

    oDiv.style['height'] = '100px';

    oDiv.style['background'] = 'black';

    document.getElementById('header').appendChild(oDiv);

}

test();

页面使用该JS文件

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

     *{ margin:0; padding:0;}

    </style>

</head>

<body>

 <div id="header" style=" height:150px; background-color:Red;"></div>

 <div id="init">

  <script type="text/javascript">

      //Ajax获取字符串

function Ajax(Method,url,funcSucc,funcFalse) {

    if (XMLHttpRequest)

        var oAjax = new XMLHttpRequest();

    else {

        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');

    }

    oAjax.open(Method, url, true);

    oAjax.send();

    oAjax.onreadystatechange = function () {

        if (oAjax.readyState == 4) {

            if (oAjax.status == 200) {

                var str = oAjax.responseText;

                funcSucc(str);

            }

            else {

                funcFalse();

            }

        }

    };

      Ajax('GET', 'javascript/load.js', function (str) {

          eval(str);

 //        var oScript = document.createElement('script');

//          oScript.text = str;

//          document.getElementsByTagName('head')[0].appendChild(oScript);

      }, function () {

          alert('失败');

      });

     </script>

 </div>

</body>

</html>

解决JS文件页面加载时的阻塞的更多相关文章

  1. 使用 v-cloak 防止页面加载时出现 vue.js 的变量名

    知识点:使用 v-cloak 防止页面加载时出现 vue.js 的变量名 场景:在使用vue语法,实现下拉框功能时,展示数据列表之前,出现对应的 vuejs 变量名 代码: var vm = new ...

  2. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  3. JSFF或JSF页面加载时触发JavaScript之方法

    现象一 最近在项目中遇到这么一个问题,有些页面元素是在页面加载时通过JavaScript动态渲染而成.当生成这些元素的JavaScript脚本被放置于JSPX文件中时,界面渲染没有问题.但是当我们把生 ...

  4. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  5. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  6. 页面加载时的div动画

    用@keyframes(动画),实现页面加载时的div动画(不要用js控制,因为当页面加载的时候,js还不一定可以使用) 可以在https://daneden.github.io/animate.cs ...

  7. 页面加载时loading效果

    页面加载时loading效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  8. ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失

    代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...

  9. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

随机推荐

  1. 【Cocoa】 Initializing View Instances Created in Interface Builder

    Initializing View Instances Created in Interface Builder View instances that are created in Interfac ...

  2. DB2批处理数据导入

    这里需要两个BAT文件 first.bat @echo off @set /p databaseName=1)请输入数据库名: @set /p userName=2)请输入用户名: @set /p u ...

  3. 说说oracle中的面向对象与面向集合

    这一篇算是对近期自己学习的一个心得总结 一.oracle的面向对象 SQL是面向集合的这个大家都知道,但是不可否认现在的oracle中有很多地方都体现着面向对象的思维.(这也算是各大语言殊途同归的一个 ...

  4. linux下更改文件夹所属用户和用户组

    改变所属用户组:chgrp -R users filename -R是为了递归改变文件夹下的文件和文件夹,users是要改为的用户组名称,filename是要改变的文件夹名称 ============ ...

  5. super的用法

    1．调用父类的构造方法子类可以调用由父类声明的构造方法.但是必须在子类的构造方法中使用super关键字来调用. 2．操作被隐藏的成员变量和被覆盖的成员方法如果想在子类中操作父类中被隐藏的成员变量和被覆 ...

  6. hdu 1250 Hat's Fibonacci

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1250 Hat's Fibonacci Description A Fibonacci sequence ...

  7. centos6 自启动任务

    tag: init upstart centos6.x 自启动 initctl event CentOS6开始转用Upstart代替以往的init.d/rcX.d的线性启动方式.upstart的概念就 ...

  8. SoapUI-x64（app:url请求参数）

    SoapUI-x64-5.2.0_576025

  9. asp.net web.config 经典模式和集成模式相关配置

    <?xml version="1.0"?> <configuration> <!--IIS经典模式下使用--> <system.web&g ...

  10. 运算符 swift

    1nil聚合运算符 nil coalescing operator a ?? b ==>a!=nil ? a! : b 要求: 1a是一个可选类型 2b必须和a解包后类型一致 var userN ...