【高性能JavaScript】读书笔记 - 引入脚本(三) - 03
2017-03-14 21:29
483 查看
【简介】XHR异步请求JS脚本,再注入页面,只要在不产生跨域的情况下,也是个不错的选择。而推荐的无阻塞模式是先添加动态加载所需要的代码,然后加载或通过动态脚本或通过XHR,实现异步请求脚本。
通过发送一个GET请求,获取package.js文件,XHR对象请求到的脚本数据放在responseText中,然后通过DOM操作,将请求到的脚本数据放到script标签中。实际上,这一过程相当于创建一个内联脚本添加到了body标签的尾部。
这种方法的主要优点在于可以异步下载JavaScript代码,但不在下载完后立即执行,而是可以把脚本的执行推迟到需要使用的时候。它的局限性在于XHR不能做跨域请求(协议、域名或ip、端口中有任何一个不同,即为跨域),所以不能从CDN上下载JavaScript文件。
小结:
1. 将脚本放在页面底部,确保脚本执行前,页面已经渲染完成。
2. 合并脚本,减少script标签的数量和HTTP请求。
3. 对于需要先引入后执行的脚本,采用异步的无阻塞加载方式加载外链js脚本,引入后再执行后面程序。
附: 欢迎大家关注我的新浪微博 - 一点编程,了解最新动态 。
1. XMLHttpRequest脚本注入(XMLHttpRequest Script Injection)
第二种无阻塞加载脚本是通过XHR对象做脚本文件的异步请求,将请求到的脚本注入到页面中。<script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.open("get", "package.js", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // xhr.status校验HTTP状态码是否有效 // (2XX表示有效响应,304表示从缓存读取) if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "package.js"; script.text = xhr.responseText; document.body.appendChild(script); } } } xhr.send(null); </script>
通过发送一个GET请求,获取package.js文件,XHR对象请求到的脚本数据放在responseText中,然后通过DOM操作,将请求到的脚本数据放到script标签中。实际上,这一过程相当于创建一个内联脚本添加到了body标签的尾部。
<body> //代码.... <script type="text/javascript" src="package.js">function packageFun() { alert("成功加载"); }</script> </body>
这种方法的主要优点在于可以异步下载JavaScript代码,但不在下载完后立即执行,而是可以把脚本的执行推迟到需要使用的时候。它的局限性在于XHR不能做跨域请求(协议、域名或ip、端口中有任何一个不同,即为跨域),所以不能从CDN上下载JavaScript文件。
2. 推荐的无阻塞模式(Recommended Nonblocking Pattern)
先添加动态加载所需要的代码(在这个例子中,这段代码就是一个loadScript函数),然后加载初始化页面所需的剩下的代码。// 先加载后面动态加载所需要的代码 function loadScript(url, callback){ var script = document.createElement('script'); script.type = "text/javascript"; if (script.readyState) { // 判断是IE浏览器 alert("IE浏览器"); script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } } } else { // 判断是其他浏览器 alert("其他浏览器"); script.onload = function() { callback(); } } script.src = url; document.getElementsByTagName('head')[0].appendChild(script); } // 再加载剩余的代码 loadScript("the-rest.js", function(){ // Application.init()在the-rest.js中 Application.init(); });
小结:
1. 将脚本放在页面底部,确保脚本执行前,页面已经渲染完成。
2. 合并脚本,减少script标签的数量和HTTP请求。
3. 对于需要先引入后执行的脚本,采用异步的无阻塞加载方式加载外链js脚本,引入后再执行后面程序。
附: 欢迎大家关注我的新浪微博 - 一点编程,了解最新动态 。
相关文章推荐
- 【高性能JavaScript】读书笔记 - 引入脚本(一) - 01
- 【高性能JavaScript】读书笔记 - 引入脚本(二) - 02
- IE6 下JavaScript脚本引入未指定编码
- JavaScript基础_03样式引入与结构语句
- 《高性能 JavaScript》笔记(一):脚本加载和执行
- Jsp页面里引入一个javascript文件,在jsp的onclick里怎么添加脚本文件里的方法
- 【高性能JavaScript】读书笔记 - 数据存取(三) - 06
- 高性能JavaScript 读书笔记
- 《高性能 JavaScript》读书笔记(一)
- javascript:js脚本的3中引入方法
- 编写高性能的JavaScript-脚本的加载与执行(1)
- 编写高性能的JavaScript-脚本的加载与执行(2)
- 编写高性能的JavaScript 脚本的加载与执行
- 编写高性能的JavaScript 脚本的加载与执行
- 高性能JavaScript 读书笔记
- D 03_JavaScript引入方式和注解
- 编写高性能JavaScript (读书笔记)
- 初学javascript之引入javascript脚本代码到html中的4个方法
- 自动匹配引入Javascript脚本
- javaScript:是WEB上强大的脚本语言,入门案例,javascript的组成,引入方式