这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇无阻塞加载 js, 防止因 js 加载不了影响页面显示的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来
浏览器加载静态资源和 js 的方式都是线性加载,所以一般情况可以将 js 放到 </body> 前,防止 UI 线程的阻塞。
而某些时候我们既希望 js 在整个网页的头部就加载,又担心 js 阻塞导致网站加载缓慢,就可以用到无阻塞加载 js 技术。
Dynamic Script Elements 动态脚本元素
DOM 允许我们使用 Javascript 动态创建 html 的几乎所有文档内容,一个新的
- 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 加载不了影响页面显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0527/329438.html