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加载成功后,执行另一方法,这个方法是依托在加 ...
随机推荐
- Cocopod上更新上传自己的开源框架供别人下载
为了更方便的集成第三方框架有了cocopods 的, 当我们有了相对比较好的框架的时候如何更新到cocopods 供他人参考呢? 下面我一步一步带大家开源自己的框架. 第一步 把自己的框架更新到git ...
- java中String类型变量的赋值问题
第一节 String类型的方法参数 运行下面这段代码,其结果是什么? package com.test; public class Example { String str = new String( ...
- EF保存平面数据到SqlServer
前言 公司开展一个项目,需要根据客户手机定位获取周围内的精准广告,具体是管理员在地图上绘制多边形的广告范围,落在范围内的客户就看到此广告.下面将我的实现方法简单叙述一下,以供有相同需求的朋友参考. E ...
- 分布式人工智能标记语言（DAIML）示例
DAIML(Distributed Artificial Intelligence Markup Language)是用于分布式人工智能系统中智能语言的标记库.DAIML主要分为Patte ...
- asp.net下载文件几种方式
测试时我以字符流的形式下载文件,可行,前几个仅作参考 protected void Button1_Click(object sender, EventArgs e) { /* 微软为Respo ...
- “耐撕”团队 2016.04.05 站立会议
1. 时间: 20:10--20:25 共计15分钟. 2. 成员: Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:ht ...
- maven_创建quickstart模板时异常
错误信息: Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart:1.1 from an ...
- jeecms内容显示条数
1.按照1.2.3.4.5顺序显示 <div class="index-news"> [@cms_channel id='1'] <h2><span& ...
- codeforces 720A：Closing ceremony
Description The closing ceremony of Squanch Code Cup is held in the big hall with n × m seats, arran ...
- POJ2288 Islands and Bridges
Description Given a map of islands and bridges that connect these islands, a Hamilton path, as we al ...