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:Clone Graph
题目如下:实现克隆图的算法 题目链接 Clone an undirected graph. Each node in the graph contains a label and a list of ...
- vs2010 “SetScrollSizes”: 找不到标识符
SetScrollSizes是CScrollView的成员函数,你的view类必须从CScrollView派生
- SpringMVC重定向视图RedirectView小分析
目录 前言 RedirectView介绍 实例讲解 总结 前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不熟悉,那么请参考它的入门blog:http://www.cnbl ...
- Cocos2d-x中使用OpenGL ES2.0编写shader
这几天在看子龙山人的关于OpenGL的文章,先依葫芦画瓢,能看到些东西,才能慢慢深入了解,当入门文章不错,但是其中遇到的一些问题,折腾了一些时间,为了方便和我一样的小白们,在这篇文章中进行写补充. O ...
- jquery设置滚动条距离页面顶部的高度
//获取滚动条到顶部的垂直高度 $(document).scrollTop(); //获取滚动条到左边的垂直宽度 $(document).scrollLeft(); function clickFn( ...
- [wikioi1553]互斥的数（数学分析+散列/数学分析+二分）
题目描述 Description 有这样的一个集合,集合中的元素个数由给定的N决定,集合的元素为N个不同的正整数,一旦集合中的两个数x,y满足y = P*x,那么就认为x,y这两个数是互斥的,现在想知 ...
- javascript中数组Array的方法
一.常用方法(push,pop,unshift,shift,join)push pop栈方法,后进先出var a =[1,2,3];console.log(a.push(40)); //4 返回数组的 ...
- javascript继承(六)—实现多继承
在上一篇javascript继承—prototype最优两种继承(空函数和循环拷贝)(3) ,介绍了js较完美继承的两种实现方案,那么下面来探讨一下js里是否有多继承,如何实现多继承.在这里可以看看j ...
- jQuery应用之（一）使用jQuery选择器（荐）
如上文(地址)jQuery预先的javascript的编程,提供了计划所有css3下的标准选择器,开发者可以利用这些选择器轻松选择各种元素,供javascript使用. 重要的是jQuery对这些选择 ...
- HDU 1171 Big Event in HDU 多重背包二进制优化
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1171 Big Event in HDU Time Limit: 10000/5000 MS (Jav ...