无阻塞加载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 相关文章推荐
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
jQuery实现跨域
Feb 03 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
ES6 async、await的基本使用方法示例
Jun 06 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
php学习笔记之基础知识
2014/11/08 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
json跟xml的对比分析
2008/06/10 Javascript
javascript事件问题
2009/09/05 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
tab栏切换原理
2017/03/22 Javascript
vue cli 全面解析
2018/02/28 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
解决vue scoped scss 无效的问题
2020/09/04 Javascript
用vue写一个日历
2020/11/02 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python中的类与类型示例详解
2019/07/10 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
linux系统都有哪些运行级别
2012/04/15 面试题
销售简历自我评价
2014/01/24 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
个人借款担保书
2014/04/02 职场文书
档案保密承诺书
2014/06/03 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2015大学生实训报告
2014/11/05 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技