无阻塞加载js,防止因js加载不了影响页面显示的问题


Posted in Javascript onDecember 18, 2016

浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞。

而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术。

Dynamic Script Elements 动态脚本元素

DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的<script>元素可以非常容易的通过标准DOM创建:

var script = document.createElement ("script"); 
script.type = "text/javascript"; 
script.src = "file1.js";  
document.body.appendChild(script);

新的<script>元素加载file1.js源文件。此文件当元素添加到页面后立刻开始下载。此技术的重点在于:无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程。

当文件使用动态脚本节点下载时,返回的代码通常立即执行(除了Firefox和Opera,它们将等待此前的所有动态脚本节点执行完毕)。

大多数情况下,我们希望调用一个函数就可以实现Javascript文件的动态下载。下面的函数封装实现了标准实现和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 { //Others 
    script.onload = function(){ callback(); 
   };  
  } 
  script.src = url; 
  document.getElementsByTagName("head")[0].appendChild(script);  
 } 
 
loadScript("file1.js", function(){ //调用 
  alert("File is loaded!");  
});

此函数接受两个参数:Javascript文件的Url和一个当Javascript接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步src属性,并将javascript文件添加到head。

动态脚本加载是非阻塞Javascript下载中最常用的模式,因为它可以跨浏览器,而且简单易用。

以上这篇无阻塞加载js,防止因js加载不了影响页面显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript继承之为什么要继承
Nov 10 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
JS实现的几个常用算法
Nov 12 Javascript
详解Node.js开发中的express-session
May 19 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 #Javascript
纯js实现悬浮按钮组件
Dec 17 #Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 #Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 #Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 #Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 #Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 #Javascript
You might like
分享最受欢迎的5款PHP框架
2014/11/27 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python三方库之requests的快速上手
2019/03/04 Python
Python地图绘制实操详解
2019/03/04 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
应届生学校辅导员求职信
2013/11/07 职场文书
大专学生推荐信范文
2013/11/19 职场文书
商务专员岗位职责
2013/11/23 职场文书
毕业证丢失证明
2014/01/15 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
R9700摩机记
2022/04/05 无线电