onload时的异步加载

在说异步加载的时候,先把应用背景说一下!

我们平时使用最多的是同步加载,同步模式又称为阻塞模式!顾名思义,他会阻止浏览器的后续处理,停止后续一系列的解析,包括后续文件的加载,渲染,代码执行等等!

那既然同步模式有那么多弊端,为啥我们还要用它呢!其实是为了安全性考虑的,js之所以要同步执行,很多时候是考虑到输出document内容,修改dom,重定向等行为,所以默认同步执行才是最安全的!

那么我们也知道,有时候我们就是有这样的需求,希望页面先进行展示,其中的某些部分可以慢慢加载!这样用户体验会更加好,否则页面一直显示不出来,等加载也不是个事!

那么知道了同步加载的概念,其实异步加载就很简单了,反过来就是了!异步加载也叫非阻塞加载咯,不需要等加载完,后续的页面就可以进行处理了!

今天我主要是说一下一种异步加载的方式,就是onload时候的异步加载

(function() {
     function load(){
         var s = document.createElement(‘script‘);
         s.type = ‘text/javascript‘;
         s.async = true;
         s.src = ‘http://example.com/script.js‘;
         var x = document.getElementsByTagName(‘script‘)[0];
         x.parentNode.insertBefore(s, x);
     }
     if (window.attachEvent)
         window.attachEvent(‘onload‘, async_load);
     else
         window.addEventListener(‘load‘, async_load, false);
 })();

其中async属性是HTML5中新增的异步支持,这边是用到了匿名函数的用法!

window.attachEvent是用来给一个事件指派多个处理过程的!

window.addEventListener跟上面一样,只不过Mozilla/Firefox 不支持 attachEvent,只支持addEventListener!

时间: 2024-10-22 00:51:24

onload时的异步加载的相关文章

JS异步加载的几种方式

一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

Javascript 异步加载详解(转)

本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续

Javascript 异步加载详解

本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续

javascript异步加载详解(转)

本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续

[转载]Javascript 同步异步加载详解

http://handyxuefeng.blog.163.com/blog/static/4545217220131125022640/ 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性 一.同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yo

高性能网站优化-确保异步加载脚本时保持执行顺序

<高性能网站建设进阶指南> 脚本如果按照常规方式加载,不仅会阻塞页面中其他内容的下载,还会阻塞脚本后面所有元素的渲染.异步加载脚本可以避免这种阻塞现象,从而提高页面加载速度.但是性能的提升是要付出代价的.代码的异步执行可能会出现竞争状态.简单地说就是页面内部的脚本需要的标示符如果是在外部文件中定义的,而当外部文件异步加载的时候,如果没有保证外部文件和内部脚本执行顺序,很有可能会出现未定义标示符的错误 当异步加载的外部脚本与行内脚本之间存在代码依赖时,就需要通过一种保证执行顺序的方法来整合这两个

JSON、异步加载、时间线

JSON(其实他就是一个对象,但是和对象唯一不同的地方在与,我们常常在对象里给属性名不加双引号,但是,json必须给属性名加双引号) json是一种传输数据的格式 对象(属性名加不加双引号都行) var ob = { name:"yang", age:25; height:123 } json(属性名必须加双引号) var ob = { "name":"yang", "age":25; "height":1

使用Ajax异步加载页面时,怎样调试该页面的Js

前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析URL,把1.html异步加载到指定位置),不知道这样的框架叫什么名字. 那我们就会遇到一个问题,调试1.html的时候怎么办,通过浏览器掉出控制台找不到1.Html页面,无法加断点啊. 解决办法 在1.html 你所要调试位置加上一句代码  debugger;  就可以了,就是这么爽 可以调试了,可

实现异步加载js文件及加载完成后回调

模块化工具类实现方式 基于AMD.CMD模式的JS模块化管理工具越来越流行,这些工具通常只需在页面中加载对应的工具JS,其他JS文件都是异步加载的,比如RequireJS就可以象下面这样做. 首先在页面加载 <script data-main="scripts/main.js" src="scripts/require.js"></script> 然后工具会自动识别data-main属性值,并加载对应的JS文件,在main.js可以加载更多模