javascript无阻塞加载脚本

简介: javascript无阻塞加载脚本1 脚本阻塞并行下载行内脚本通过script标签引入整段javascript:12345function displayMessage(msg){ alert(msg);}  外部脚本通过script的src属性把独立文件中的JavaScript引入:src属性定义了需加载的外部URL,如果缓存中有脚本文件,浏览器就从缓存中读取,否则就发送HTTP请求获取。

javascript无阻塞加载脚本
1 脚本阻塞并行下载
行内脚本通过script标签引入整段javascript:

1
2
3
4
5

function displayMessage(msg){
    alert(msg);

}

  外部脚本通过script的src属性把独立文件中的JavaScript引入:

src属性定义了需加载的外部URL,如果缓存中有脚本文件,浏览器就从缓存中读取,否则就发送HTTP请求获取。

浏览器在下载和执行脚本时出现阻塞的原因:1 document.write改变了页面 2 其中一个js依赖于另一个js(浏览器要确保要确保脚本在HTML文档中出现的顺序来执行;否则可能会出现竞争状态;可以按顺序执行,但不一定要按顺序下载)。

2 更好的运行脚本
  方案:1 把所有javascript内嵌到页面中(少量是可以的;由于通常页面大小和缓存能带来更多好处,因此推荐外部引入javascript)
  下面这些技术既可以避免因阻塞导致的减速影响,由拥有脚本的好处(可以并行运行脚本)。

   (1)XHR Eval。

   (2)XHR注入(XHR Injection)。

   (3)Script in Iframe。

   (4)Script Dom Element。

   (5)Script Defer。

   (6)document.write Script Tag。

   XHR Eval (XMLHttpRequest(XHR)从服务端获取脚本;当响应完成时,通过eval命令执行内容)

  缺点:通过MLHttpRequest获取的脚本必须部署在和主页面相同的域中。以下是XH Eval相关代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function(){

if ( xhrObj.readyState == 4 && 200 == xhrObj.status ){
  eval (xhrObj.responseText);
}

};
xhrObj.open("GET", 'A.js', true);//必须和主页面在·同一个域中
xhrObj.send("");

function getXHRObject() {

var xhrObj = false;
try{
  xhrObj = new XMLHttpRequest();
}
catch(e){
  var progid = ["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  for( var i = 0;i< progid.length; ++i){
    try{
      xhrObj =  new ActiveXObject(progid[i]);
    }
    catch(e){
      continue;
    }
    break;
  }
}
finally {
  return xhrObj;
}

}
  XHR注入(通过创建一个script的DOM元素,然后把XMLHttpRequest的响应注入script中执行javascript;通过XMLHttpRequest获取的内容必须部署在和主页面相同的域中。)XHRInjection代码如下:
1
2
3
4
5
6
7
8
9
10
11
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function (){

if (xhrObj.readyState == 4 ){
  var scriptElem = document.createElement("script");
  document.getElementsByTagName('head')[0].appendChild(scriptElem);
  scriptElem.text = xhrObj.responseText;
}

};
xhrObj.open ('GET', 'a.JS', true);
xhrObj.send('');
  Script in Iframe
  iframe URL和主页面同域。即使主页面同域,我们任然要修改javascript来创建他们之间的关联。

  方案一:

  //使用“frames”访问主页面上的iframe

  window.frames[0].createNewDiv();

  //使用“getElementById”访问主页面上的iframe

  document.getElementById('frame').contentWindow.createNewDiv();

  方案二:

  //ifame使用parent变量引用父页面:

  //在iframe中使用“parent”访问主页面

  function createNewDiv(){

    var newDiv = parent.document.createElemnent('div');

    parent.document.body.appendChild(newDiv);

  }  

  //iframe自身的消耗比较高

  Script Dom Element
  相对于在HTML中使用script标签下载脚本文件而言,该技术使用JavaScript动态地创建script DOM 元素并设置src属性,这只要两三行javascript代码就可以实现。

  var scriptElem = document.createElement('script');

  scriptElem.src = 'http://anydomain.com/A.js' ;

  document.getElementByTagName('head')[0].appendChild(scriptElem);

  //这种方式下载脚本不会阻塞其它组件。允许跨域获取脚本。外部脚本可以直接调用。

  //script DOM Element http://stevesouders.com/cuzillin/?ex=10010&title=Script+Dom+Element

  ,浏览器还有ScriptnDefer以及document.write ScriptTag 我这里就不一一介绍了。 

3、浏览器忙指示器
  浏览器忙指示器,让用户感知到页面还在加载。浏览器忙指示器包括:状态栏、进度条、标签页图标和光标。

  另外两个浏览器忙指示器是组赛渲染和阻塞onload事件。缺点:当使用SCRIPT SRC技术下载脚本时,浏览器停止渲染所有脚本后面的内容。通常页面的onload事件要等到所有页面下载完时才会触发。如果让状态栏等待更长时间,才显示“完成”,并且默认输入框取焦点,影响用户体验。(忙指示器是否出发,是所使用的技术和浏览器共同决定的)

4、确保(或避免)按顺序执行
  很多网页都包含多个有特定依赖顺序的脚本,它们会按照到达的顺序执行——最先到达,最先执行。这会导致竞争状态,进而导致未定义标识符错误。要想是浏览器按照顺序执行,而不是加载的顺序执行,可以使用Script Defer 和document.write ScriptTag保证脚本按照顺序执行。

  (脚本按照特定顺序执行并非总那么重要,有时候按照加载的顺序执行,可以快速的渲染页面。)

  不推荐使用document.write Script Tag技术。因为它只在部分浏览器中实现并行下载,而且还阻塞脚本之外所有其它资源的下载。Script Defer技术也只在部分浏览器中实现了并行下载。

  当脚本与主页面同域时,XHR Eval 、XHR 注入和Script in Iframe可以满足需求。但如果使用XHR Eval 或Script in Iframe技术,我们需要重构一部分脚本,而XHR注入和Script DOM Element技术可以直接使用现有的脚本文件,无需任何改动。

5、最佳方案
  根据项目需求·合理选择最佳的技术。有下面六种情况:

  有不同域、无序

  不同域,保持顺序

  同域、无序、无忙指示器

  同域、无序、有忙指示器

  同域、保持顺序、无忙指示器

  同域、保持顺序、由忙治时期

  开发者可以通过该函数来确保按最佳方案加载脚本,原理如下:

  function loadScript(url, bPreserverOrder, bShowBusy);
原文地址https://www.cnblogs.com/yaosusu/p/11275507.html

相关文章
|
2月前
|
JavaScript 前端开发 测试技术
使用Selenium执行JavaScript脚本:探索Web自动化的新领域
本文介绍了如何在Selenium中使用JavaScript解决自动化测试中的复杂问题。Selenium的`execute_script`函数用于同步执行JS,例如滑动页面、操作时间控件等。在滑动操作示例中,通过JS将页面滚动到底部,点击下一页并获取页面信息。对于只读时间控件,利用JS去除readonly属性并设置新日期。使用JS扩展了Selenium的功能,提高了测试效率和精准度,适用于各种自动化测试场景。
55 1
|
1天前
|
前端开发 JavaScript UED
由于JavaScript是单线程的,因此在处理大量异步操作时,需要确保不会阻塞UI线程
【5月更文挑战第13天】JavaScript中的Promise和async/await常用于处理游戏开发中的异步操作,如加载资源、网络请求和动画帧更新。Promise表示异步操作的结果,通过.then()和.catch()处理回调。async/await作为Promise的语法糖,使异步代码更简洁,类似同步代码。在游戏循环中,使用async/await可清晰管理资源加载和更新,但需注意避免阻塞UI线程,并妥善处理加载顺序、错误和资源管理,以保证游戏性能和稳定性。
10 3
|
3天前
|
JavaScript 前端开发 NoSQL
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
【5月更文挑战第11天】MongoDB 的 JavaScript 引擎允许在服务器端直接执行脚本,提升效率并实现定制化操作。脚本环境提供独立但与数据库关联的运行空间,引擎负责脚本的解析、编译和执行。执行过程包括脚本提交、解析、编译和执行四个步骤。掌握脚本逻辑设计和 JavaScript 语言特性对于高效利用这一功能至关重要。例如,通过脚本可以计算商品总销售额,增强数据库操作的灵活性。
【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
|
1月前
|
Web App开发 缓存 JavaScript
|
1月前
|
JavaScript
EasyUi js 加载数据进下拉框combobox
EasyUi js 加载数据进下拉框combobox
|
1月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
1月前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
11 0
|
1月前
|
JavaScript
惰性加载函数(js的问题)
惰性加载函数(js的问题)
|
2月前
|
JSON JavaScript 前端开发
JS逆向快速定位关键点之9大通用hook脚本
JS逆向快速定位关键点之9大通用hook脚本
|
2月前
|
JavaScript
js判断图片是否加载完成
js判断图片是否加载完成
28 0