完美解决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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
layui实现三级联动效果
Jul 26 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 debug 安装技巧
2011/04/30 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
IBatis持久层技术
2016/07/18 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
餐饮部总监岗位职责范文
2014/02/13 职场文书
幼儿园新年寄语
2014/04/03 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Python中glob库实现文件名的匹配
2021/06/18 Python
Java数据结构之链表相关知识总结
2021/06/18 Java/Android