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

Wesley13
• 阅读 644

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

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

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

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

例:

以前的书写格式

   

   

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

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="https://my.oschina.net//korabear/blog/1800039/>,是先加载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构建完,发生在整个页面加载完之前)才会执行

例: