JS代码的加载
HTML页面中JS的加载原理：在加载HTML页面的时候，当浏览器遇到内嵌的JS代码时会停止处理页面，先执行JS代码，然后再继续解析和渲染页面。同样的情况也发生在外链的JS文件中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它，在这个过程中，页面的渲染和用户互交完全被阻塞。由于现代浏览器都允许并行下载JS文件，因此<script>标签在下载外部资源时不会阻塞其他的<script>标签。遗憾的是JS下载过程仍然会阻塞其他资源的下载。
加载JS代码优化：
(1)由于脚本阻塞页面其他资源的下载，因此推荐将所有<script>标签尽可能放到<body>标签底部，以尽量减少对整个页面下载的影响。
(2)个20KB的JS文件更快。
(3)通过无阻塞的方法来加载JS脚本。
无阻塞加载JS脚本：
(1)当动态创建script标签加载时，内嵌到标签内的代码通常立即执行(除了Firefox和Opera，它们将等待此前的所有动态脚本节点执行完毕)。
案例：动态加载JS文件(兼容IE和其他浏览器)。
function loadScript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE浏览器
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //其它浏览器
script.onload = function(){ callback() };
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
//按顺序动态加载多个JS脚本
loadScript("script1.js", function(){
loadScript("script2.js", function(){ alert("All files are loaded!") });
});
(2)创建一个XHR(XMLHttpRequest)对象用于下载JS文件，接着创建一个script标签将JS代码注入这个标签内。该方法优点是，你可以下载不立即执行的JS代码，由于代码返回在<script>标签之外，所有下载后不会自动执行，而且所有现代浏览器中都不会引发异常。限制是JS文件必须与页面放置在同一个域内，不能从CDN【CDN指“内容投递网络”】下载。
案例：通过XHR对象加载JS脚本
//url必须是js文件路径
function getJS(url){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send(null);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status == 200){
var script = document.createElement ("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
}
getJS('scripts/my.js');
JS代码的加载的更多相关文章
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...
- js文件代码未加载或者没有js效果
问题:在页面中js文件中的代码未加载或者没有任何效果. 原因: 成功引用了js文件,但无效果或者提示未加载该文档中的代码. 可能页面引用js文件的路径存在问题 解决: 重新检查你引用的js文件的路径是 ...
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
- js的动态加载、缓存、更新以及复用（四）
本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...
- js的动态加载、缓存、更新以及复用（三）
总体思路 1. 建立一个js服务,该服务实现通用js文件的加载.依赖.缓存.更新以及复用. 2. 各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载. 3. Js服务只提供通用的 ...
- js的动态加载、缓存、更新以及复用（二）
上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js.requrieJS.sea.js.lab.js等.这个开阔了眼界,以前只知道sea.js,省去了自己搜索 ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- js优化 ----js的有序加载
说到有序加载,我们先来说说js的无序加载: <script src="jquery/jquery-1.4.1.js" type="text/javascript&q ...
- 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
随机推荐
- LeetCode:Single Number II
题目地址:here 题目大意:一个整数数组中,只有一个数出现一次,其余数都出现3次,在O(n)时间,O(1)空间内找到这个出现一次的数 对于”只有一个数出现一次,其余数出现2次“的情况,很简单,只要把 ...
- idea 重写toString()模板，转成json格式
idea toString()模板,将对象toString()为json格式. 1. 2.点击新增 public java.lang.String toString() { final java.la ...
- 【WEB API项目实战干货系列】- 接口文档与在线测试(二)
上一篇: [WEB API项目实战干货系列]- Web API 2入门(一) 这一篇我们主要介绍如何做API帮助文档,给API的调用人员介绍各个 API的功能, 输入参数,输出参数, 以及在线测试 A ...
- php 利用socket发送GET，POST请求
作为php程序员一定会接触http协议,也只有深入了解http协议,编程水平才会更进一步.最近我一直在学习php的关于http的编程,许多东西恍然大悟,受益匪浅.希望分享给大家.本文需要有一定http ...
- Redis入门学习（一）——安装配置
最近马上要找实习了,听学长说他们公司里用了redis来解决缓存问题,在大三结束前来学习一下. 问:Redis是什么? 答:(官方)REmote DIctionary Server(Redis)是一个K ...
- jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()
<body> <div id="main"> <div id="hot" class="rightbar"&g ...
- HTML5——同步购物车
同步购物车,及打开两个或多个界面,选择购物时同步,让显示的内容一致,这样不至于购买出错. 核心:利用storage事件和localStorage本地存储实现 图片简单展示: <!DOCTYPE ...
- 第二节Unity3D开发环境安装（windows系统）
这一节准备安装开发环境. 1. 首先先下载软件包:http://pan.baidu.com/s/1imYVv 4.2版本2.下载完后,解压会看到两个文件(运行第二个安装包) 3.准备安装,这 ...
- Day10
会议讨论 628:今天是冲刺的最后一天了,好紧张好激动,我们组还有好些个功能没实现呢,感觉崩崩哒!还要实现选择不同的专业导入不同的课表呢. 601:在修改教师帐号信息的页面要有当密码格式.用户名格式等 ...
- javaEE规范和SSH三大框架到底有什么关系
转自博客:http://blog.csdn.net/bingjing12345/article/details/20641891 1994-2000 年是互联网的大航海时代. 请注意,下面的时间点及其 ...