完美解决JS文件页面加载时的阻塞问题


Posted in Javascript onDecember 18, 2016

关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法。本文章就详细介绍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文件页面加载时的阻塞问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中使用timer示例
May 08 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
教你一步步用jQyery实现轮播器
Dec 18 #Javascript
Angular.js实现注册系统的实例详解
Dec 18 #Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 #Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 #Javascript
纯js实现悬浮按钮组件
Dec 17 #Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 #Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 #Javascript
You might like
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
python SVD压缩图像的实现代码
2019/11/05 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python定义一个函数的方法
2020/06/15 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
《桥》教学反思
2014/04/09 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
宿舍标语大全
2014/06/19 职场文书
追悼会家属答谢词
2015/09/29 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP