解决JS文件页面加载时的阻塞

关于页面加载时的时间消费，许多书中都做出了介绍，也提出了很多种方法。本文章就详细介绍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，并加载到指定元素中。

functiontest() {oDiv= document.createElement('div');oDiv.style['width'] = '100px';oDiv.style['height'] = '100px';oDiv.style['background'] = 'black';document.getElementById('header').appendChild(oDiv);
}
test();

页面使用该JS文件

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head><title></title><styletype="text/css">*{margin:0;padding:0;}</style>
</head>
<body><divid="header"style=" height:150px; background-color:Red;"></div><divid="init"><scripttype="text/javascript">//Ajax获取字符串
functionAjax(Method,url,funcSucc,funcFalse) {if(XMLHttpRequest)varoAjax= newXMLHttpRequest();else{varoAjax= newActiveXObject('Microsoft.XMLHTTP');}oAjax.open(Method, url,true);oAjax.send();oAjax.onreadystatechange= function() {if(oAjax.readyState== 4) {if(oAjax.status== 200) {varstr=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>

转载于:https://www.cnblogs.com/JhoneLee/p/3458238.html

解决JS文件页面加载时的阻塞相关推荐

vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
html js页面加载前执行,Javascript代码在页面加载时的执行顺序介绍
一.在HTML中嵌入Javasript的方法 1.直接在Javascript代码放在标记对之间 2.由标记的src属性制定外部的js文件 3.放在事件处理程序中,比如: 点击我 4.作为URL的主体, ...
html页面展示大括号,vue 防止页面加载时看到花括号的解决操作
如下所示: [v-cloak]{ display:none } v-cloak v-text v-html v-cloak用于大段 v-text用于单个标签 v-html用于带有标签的处理补充知识: ...
Javascript在页面加载时的执行顺序
一.在HTML中嵌入Javasript的方法直接在Javascript代码放在标记对<script>和</script>之间由<script />标记的src属 ...
Javascript在页面加载时的执行顺序(转载）
原文:http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/ 一.在HTML中嵌入Javasript的方 ...
html加载状态,js等待页面加载完成
页面加载完成后等待一段时间在执行js的方法,时间例如方法: function test(){return 1;} 页面加载完毕事件: window.onload = function(){ setTi ...
加载页面就触发ajax,AJAX post方法，有时会在页面加载时触发，有时不会
我对AJAX有一个奇怪的问题,我在页面加载时使用AJAX POST方法返回对象地图. 我正在调试该过程,有时会调用该方法,并且Java Servlet有时会运行. 我正确地包含了JS导入,其他jQue ...
django里面的css无法加载,django使用admin后台，一部分 css和js文件无法加载-无法打开文件...
解决使用admin功能时, 一部分 css和js文件无法加载原因是由settings.py修改debug = true 为 debug =false 引起的, 1.在settings.py添加如下 ...
chromium禁用ajax,页面加载时，jQuery AJAX不会在Chrome / Chromium中启动
| 场景:我拥有的是一个上传表单,该表单使用nginx uploadProgress模块报告上传进度.下面的代码在Firefox中可以正常工作,但是使用Chrome和Chromium时,页面加载时 ...

解决JS文件页面加载时的阻塞

解决JS文件页面加载时的阻塞相关推荐

最新文章

热门文章