json 异步加载js

JSON
JSON是一种传输数据的格式 (以对象为样板,本质上就是对象,但用途有区别,对象就是本地有的,json是用来传输的)
JSON.parse(); string—>json
JSON.stringify(); json–>string
异步加载js
js加载的缺点:
加载工具方法没必要阻塞文档,过多js加
载会影响页面效率,一旦网速不好,那么整
个网站将等待js加载而不进行后续渲染等工作.
有些工具方法需要加载,用到再加载,不用不加载.
javascript异步加载的三种方案
1.defer异步加载,但要等到dom文档全部解析完
才会被执行.只有IE能用,也可以将代码写到内部.
2.async异步加载,加载完就执行,async只能加载
外部脚本,不能把js写在script标签里.(w3c标准IE9以上都可用)
1与2执行时也不阻塞页面
3.创建script,插入到DOM中,加载完毕后callBack,
loadScript callback createElement readyState complete loaded lools onload appendChild
js加载时间线
1.创建Document对象,开始解析web页面.解析HTML元素和他们的文本内容后添加Element对
象和Text节点到文档中阶段document.readyState=‘loading’.
2.遇到link外部css,创建线程加载,并继续解析文档
3.遇到script外部js,并且没有设置async.defer,浏览器加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析
4.遇到scrip外部js,并且设置有async,defer,浏览器创建线程加载,并继续解析文档.
对于async属性的脚本加载完成后立即执行,.(异步禁止使用document.write())
5.遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档.
6.当文档解析完成,document.readyState=‘interactive’
7.文档解析完成后,所有设置有defer的脚本会按照顺序执行.(注意async的不同,但同样禁止使用document.write()
8.document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段
9.当所有async的脚本加载完成并执行后,img等 加载完成后,document.readyState=‘complete’,window对象触发load事件
10.从此以异步响应方式处理用户输入,网络事件等.

function loadScript(url,callback ) {
            var script=document.createElement('script');
            script.type="text/javascript";
            if (script.readyState){//IE
                script.onreadystatechange=function () {
                    if (srcipt.readyState=="complete"||srcipt.readyState==loaded){
                        tools[callback]();
                    }
                }
            }else {
                    script.onload=function () {
                    tools[callback]();
                    }
            }
            script.src=url;
            document.head.appendChild(script);
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值