对于Javascript加载的解析-js教程-PHP中文网

这篇文章主要介绍了关于对于javascript加载的解析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

1. 浏览器加载

(1) 同步加载

在网页中，浏览器加载js文件的方式是通过

//内嵌脚本

//加载外部脚本

立即学习“Java免费学习笔记（深入）”；

（2）异步加载

为了解决这一问题，ES5中采用了DOM方法，动态加载JavaScript脚本文件。

function loadScript(url) {    
var script = document.createElement("script");
    script.type="text/javascript";
    script.src=url;
    document.body.appendChild(script);
}

这种方式通过创建一个新的

这样不会造成页面阻塞，但会有另一个问题，如果其他脚本文件依赖于它，此时无法保证此脚本什么时候能够载入完毕。

另一种加载方式是利用defer和async属性，使脚本异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。defer和async的区别是: defer要等到整个页面在内存中正常渲染结束（DOM结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完成，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。即defer是渲染完再执行，async是下载完就执行。另外，如果有多个defer脚本，会按照它们在页面中出现的顺序加载，而多个async脚本是不能保证加载顺序的。

IE9及以下版本在延迟实现方面存在一些相当糟糕的错误，导致执行顺序无法保证。如果你需要支持

如何选用defer和async。如果使用的script是个模块，并且不依赖任何其它script文件时使用async；如果该脚本依赖其它script或则被其它script依赖，就使用defer；倘若脚本文件很小且被一个async script依赖，就使用内嵌script把该文件放在所有async script前面。

另外一种方法是onload事件的异步加载。

(function(){
    if(window.attachEvent) {
        window.attachEvent("load", asyncLoad);
    } else if(window.addEventListener) {
        window.addEventListener("load", asyncLoad);
    } else {        window.onload = asyncLoad;    }  
    var asyncLoad = function() {
        var script = document.createElement("script");
        script.type="text/javascript";
        script.async = true;
        script.src = ('https:'==document.location.protocol ? 'https://ssl' :  'http:www') + '.baidu.com/demo.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(script, s);
    };
)();

这种方法是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件的触发问题。

由于Javascript的动态性，还有很多异步加载方法：XHR Injection、XHR eval、Script In Iframe、document.write("

jQuery图片内容展开-收缩选项卡

jQuery图片内容展开/收缩选项卡，点击图片会出现对应的文字解说。兼容主流浏览器，php中文网推荐下载！使用方法： 1、head区域引用以下文件

相关专题

php文件怎么打开

打开php文件步骤：1、选择文本编辑器；2、在选择的文本编辑器中，创建一个新的文件，并将其保存为.php文件；3、在创建的PHP文件中，编写PHP代码；4、要在本地计算机上运行PHP文件，需要设置一个服务器环境；5、安装服务器环境后，需要将PHP文件放入服务器目录中；6、一旦将PHP文件放入服务器目录中，就可以通过浏览器来运行它。

2887

2023.09.01