关于页面加载时的时间消费，许多书中都做出了介绍，也提出了很多种方法。本文章就详细介绍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. MVC中用ajax提交json对象数组

    应用场景:在前端用ajax向服务器提交json对象数组,在controller的以对象数组作为函数的参数,提交的json数组直接转为服务器端的对象数组. 如: 要将json对象数组[{Id:1,Nam ...

  2. JavaWeb之 JSP:内置对象，EL表达式，JSP标签基础

    JSP的内置对象 什么是JSP的内置对象呢? 在JSP页面进行编程的时候,如果我们要使用一些对象,如:HttpSession,ServletConfig,ServletContext这些对象,如果每次 ...

  3. C 构造一个 简单配置文件读取库

    前言 最近看到这篇文章, json引擎性能对比报告 http://www.oschina.net/news/61942/cpp-json-compare?utm_source=tuicool 感觉技术 ...

  4. 菜鸟学习Spring——第一个例子

    一.概述 原来我们利用工厂来实现灵活的配置.现在利用Spring以后把这个交给了IoC容器管理.我们只要在XML文件上配上就可以了这样的话就节省了很多开发时间我们不需要知道后面的有多少只要动态的配上类 ...

  5. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  6. Ubuntu下编译内核

    一.下载源代码和编译软件的准备 下载内核源代码:http://www.kernel.org/ 注意,点击2.6.25内核的F版,即完整版. 如果你懒得去网站点联接,运行下列命令:  代码: $cd ~ ...

  7. Windows Phone动画

    从事Windows Phone开发已经有一段时间了,但是一直没有好好的静下心来梳理一下自己这段时间的知识,一是怕自己学问不到家,写不出那些大牛一般的高屋建瓴:二是以 前一直没有写博客的习惯:好了废话不 ...

  8. SCSF智能客户端学习笔记(一)

    什么是智能客户端 要了解智能客户端,首先要认识瘦客户端技术和胖客户端技术各自的优缺点. 对于前者,典型的应用就是使用浏览器,通过输入URL远程访问服务端,并向服务端发送命令,获取服务端的资源,然后在客 ...

  9. 解决SQLite数据库中文乱码问题

      关于SQLite中出现中文乱码的分析以及解决方案 我们在使用SQLite数据库时候,可能会发现,向数据库插入数据时候显示的是汉字,但通过SQLite读出来时却显示的乱码,这是因为SQLite数据库 ...

  10. 团队开发——Alpha版总结会议

    本组目前存在的问题: 1.在选题的时候,题目选的比较有难度,造成后期工作量较大,实现有难度(未能正确估计项目的难度). 2.最初规划时,设计的功能较多,但是技术水平达不到,导致目前完成功能较少. 3. ...