文档章节

JSON,异步加载(学习笔记)

Mrs_CoCo
 Mrs_CoCo
发布于 2018/04/23 22:33
字数 1480
阅读 80
收藏 2

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信)

JSON是静态类(不需要构造),类似于Math,内部有各种函数

     1).JSON.parse();string->json (解析成对象属性和属性值,可以进行调用)

    2).JSON.stringify(); json->string

例:

以前的书写格式

<student>

    <name></name>

    <age></age>

</student>

现在的书写格式(正常的格式是属性名:属性值。属性名的双引号可加可不加。)

json

var obj={

   "name": “json”,   // ""必须加

    "age": 12;

}

json.stringify(obj);

-->变成字符串的json格式:{"name":"json","age":"12"}

json.parse(obj);

-->后台传回来的数据解析成对象object {name:"json",age:13},供我们使用和调用属性

下面百度从后台传回来的数据(例):

jQuery11020012640901382223513_1524493123691({"q":"","p":false,"bs":"蒋奥","csor":"0","status":770,"s":[]});

   浏览器先识别html代码,形成DOM树(),绘制domtree的时候遵循深度优先原则(先看左侧head,然后继续看head内部有什么东西,知道head没有别的东西,返回去继续看body,body下面的div,继续div内部的东西,然后再是和div同级别的span等....)。

 domTree

                 html

head                           body

title  meta                         div span string

                                                            em

解析代码的时候,比如遇到<img src=""/>,是先加载src内部的东西,然后继续解析呢?还是先解析完img之后继续解析下一个呢?

      一边下载,并且继续解析后面的,最后是解析要比页面加载要快。DOM树解析完,表示DOM所有节点的解析完毕,不代表所有节点的加载完毕。所以,属于异步加载的过程。

     domTree树形成完之后,继续等cssTree的形成(系统根据Css生成类似于DOMtree的节点树),最后,形成randertree。

     domTee+cssTree = randerTree(渲染,绘制)->渲染引擎按照randerTree的规则进行绘制画面

    对DOM树的增删改(DOM节点的删除,添加,宽高变化,位置变化  ***例:1).display:none; =>display:block;2):offsetWidth,offsetLeft (特殊语法)注意:这个是查DOM节点的位置,但是randerTree是重新构建,重新渲染,然后取出宽,左距离的最新,实时的数据 3):repaint:重绘 重绘局部DOM节点的比如背景颜色,字体颜色之类 ***)的时候,就会影响画面的结构,randerTree就会重新构建(reflow:重排,重构->导致效率低下),就会重新绘画面。

________________________________________________________________________________________________________

异步加载js

js加载的特点:

   加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。

  有些工具方法需要按需加载,用到在加载,不用不加载。

  网页留白加载的是js,后续不会加载,导致整个页面容易瘫痪。

  js是会动态修改页面,所以不能够与html,css同时执行,加载。所以有的时候(),需要js的异步加载。

js异步加载的三种方案

  1.defer异步加载,但需要等到DOM文档全部解析完才会被执行。只有IE能用(IE9以下可以用),也可以将代码写到内部。// 要等到真整个文档解析完(DOMTREE构建完,发生在整个页面加载完之前)才会执行

例:

<script type="text/javascript" src="tool.js"/>

-->属于同步加载

<script type="text/javascript" src="tool.js" defer="defer"/> // 异步加载(凡是属性名,值一样,直接写属性名即可,系统自动会识别)

上述方法属于异步加载,可以与html,css并行加载,不会阻塞页面加载,互不影响。

  2.async(asychronous)异步加载,加载完脚本立即就执行,async只能加载外部脚本,不能把js写在script标签里。(W3C标准方法,非IE使用)

      例:<script type="text/javascript" src="tool.js" async="async"/>

       上述的1,2执行时也不阻塞页面

       asychronous javascript and xml-->ajax的缩写

     注意:

          defer:js代码可以写在其内部,也可以引用外部js文件

           async:只能加载外部js文件 

         那么,如何解决二者的缺点呢?参照方案3

  3.创建script,插入到DOM中,加载完毕后callBack.-->按需加载(异步加载)

        var script = document.createElement("script"); // 创建
        script.type="text/javascript"; // 设置
        script.src="tools.js"; // 下载js (预加载机制)下载的时候会发送一个请求,回归资源,需要一个过程,需要时间(在这个过程中,就会将后面的代码执行了),所以,如果直接调用js内部的函数,就有可能不会执行test()函数,需要用setTimeOut方法来控制,但是不能解决根本问题,因为资源下载时间根本无法预知。

        // document.head.appendChild(script); // 执行js

       // setTimeOut(function(){

        //      test();  // js内部函数

   //   },1000);

上述解决方案,可以使用onload事件

        // IE浏览器
        if (script.readyState) {
            script.onreadystatechange=function (){
                if (script.readyState == "complete" || script.readyState == "onload") {
                    test();
                }
            }
        // safari chrome firefox opera  (IE除外)
        } else {
            script.onload=function() {
                test();
            }
        }

     document.head.appendChild(script); // 执行js

  写一个共通的异步加载函数方法,可以直接调用,参照我的另外一篇博客:

https://my.oschina.net/korabear/blog/1803135

© 著作权归作者所有

下一篇: DOM结构树
Mrs_CoCo
粉丝 6
博文 56
码字总数 41045
作品 0
程序员
私信 提问
【文集】Unity中的异步编程技术

什么是异步编程?异步编程是指由于异步 I/O 等因素,无法同步获得执行结果时,在回调函数 中进行下一步操作,这个技术在游戏这种强调快速响应的应用中很重要,让我们一起看一个通用的介绍: Un...

CatherinePlans
2017/11/05
0
0
jqGrid学习笔记(一)

jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面,其官方网址为:http://www.trirand.com。 一、jqGrid特性: 基于...

Zero零_度
2015/09/21
67
0
Lungo 使用说明及心得 中文api —— JavaScript部分

前面总结了一篇Lungo基础标签的笔记,这篇将要记录在学习LungoJS时的用到的javacript方法和心得: Core 核心部分比较简单,从方法名字上面大概就能看出是做什么用的,本人使用的比较少 log(...

RocZhang
2013/09/17
3.8K
9
Tornado学习笔记(二)

我一直用python2.x,python2.x内置的字符编码方式是unicode,这就对中文的处理造成了一些困扰,尤其是在用tornado写json接口的时候,如果不做处理,出来的没有中文,都是x4d5f之类的东西。所...

Slaytanic
2015/07/13
0
0
Libgdx学习笔记:分享自己写的异步加载

从需求说起: 解析xml,json文件等耗时的操作,如果放到绘制线程,或者初始化里面,会导致画面卡顿一下,让人看起来不爽,这时候就想能不能异步加载一下。 查看Libgdx的AssetManager发现里面...

flyoahc
2015/01/19
415
0

没有更多内容

加载失败,请刷新页面

加载更多

js如何控制table中的某一行动态置顶

两行代码搞定: $('#'+item.roadCode).fadeOut().fadeIn();//获取到需要置顶的行 $(".table").prepend($('#'+item.roadCode)); 其中,fadeOut()方法 作用 --- 从可见到隐藏 如下: prepend(......

码妞
今天
4
0
四种解决Nginx出现403 forbidden 报错的方法

我是在在本地用虚拟机中通过yum安装nginx的,安装一切正常,但是访问时报403, 于是查看nginx日志,路径为/var/log/nginx/error.log。打开日志发现报错Permission denied,详细报错如下: 1....

dragon_tech
今天
3
0
获取RestResultResponse返回的值

Springboot项目,需要调其他服务的接口,返回值类型是RestResultResponse 打断点的结果集是这个 打印出来的getData(): [{id=3336b624-8474-4dd9-bd5b-c7358687c877, paraNo=104, para=Postpo...

栾小糖
今天
4
0
【小学】 生成10以内的加减法

#!/usr/bin/env python# coding: utf-8from random import randrange# 题目的最大数值R_MAX = 10# 生成的题目的数量R_PAGE = 70# 生成减法列表def get_sub_list():...

Tensor丨思悟
今天
11
0
JavaScript设计模式——适配器模式

  适配器模式是设计模式行为型模式中的一种模式;   定义:   适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修...

有梦想的咸鱼前端
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部