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加载成功后,执行另一方法,这个方法是依托在加 ...
随机推荐
- iOS开发系列--音频播放（音效和音乐）播放本地的
音频 在iOS中音频播放从形式上可以分为音效播放和音乐播放.前者主要指的是一些短音频播放,通常作为 点缀音频,对于这类音频不需要进行进度.循环等控制.后者指的是一些较长的音频,通常是主音频,对于这些音 ...
- 你会swap吗，按值传递还是按引用？
问题 1.Java到底是按值传递(Call by Value),还是按引用传递(Call by Reference)? 2.如下面的代码,为什么不能进行交换? public CallBy swap2( ...
- js方式清空表单数据的两种方式
方法1:遍历页面元素 /* 清空FORM表单内容 id:表单ID*/ function ClearForm(id) { var objId = document.getElementByI ...
- 4、面向对象以及winform的简单运用（继承与多态、命名空间与类库）
继承 继承既子类与父类之间的关系.子类是父类的一种特例,子类拥有父类所没有的功能. 子类与父类之间的相互赋值——例: Parent p; Son c = new Son(); p = c; //正确, ...
- MVC4 code first 增加属性，对应自动修改列的方法笔记
VS工具>库程序包管理器>程序包管理控制台,然后输入以下命令 enable-migrations -contexttypename Mvc4Application1.Models.Movi ...
- 0505--鲜花售卖网之“NABCD模型”
一.NABCD 1) N (Need 需求)--(分析人:梁植淋) --简介 我们的鲜花售卖系统主要是给需要买花或者是养花的顾客提供一个购花平台,买花时通过位置识别给用户提供附近的花店购花,花店接到订 ...
- 作业一_随笔3_调研Android的开发环境的发展演变
调研某一移动应用/平台的开发环境的发展演变:Android 其实,一开始,我只知道,苹果手机用IOS系统,其他很多手机时候安卓系统.我百度知道Android开发主要是android studio和Ec ...
- Linux 进程管理器 supervixor
使用 supervisor 管理进程 http://www.cnblogs.com/smail-bao/p/5673434.html http://ju.outofmemory.cn/entry/20 ...
- zabbix_agent安装（Centos+Ubuntu）
Centos安装 安装依赖包 yum -y install mysql-devel libcurl-devel net-snmp-devel 添加用户 groupadd zabbix use ...
- hdu3535 混合背包
分三种情况. 至少取一种 那可以直接取 或者从上一种情况来取.dp[i][k]=max(dp[i][k],dp[i-1][k-a[j].c]+a[j].v,dp[i][k-a[j].c]+a[j].v ...