这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇完美解决 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,并加载到指定元素中。
- 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 文件页面加载时的阻塞问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0518/329435.html