json,异步加载,回调函数

json文件格式

json文件格式传送的是对象
但是服务器接收以及发送的都是文本,Linux系统中飞的都是文本。。
json文件中的对象属性名都要双引号包裹起来,以区别一般js文件中的对象
后台接受到的是json的字符串形式

  • 一般使用JSON.stringify(jsonObj)方法,将json对象转换为字符串
  • JSON.parse(jsonStr) 转换为对象

浏览器页面的加载

randerTree绘制完 = 展示的效果
DOMTree的解析依据深度优先原则(纵向)
生成DOMTree的过程是一个HTML文件的解析过程,解析完毕,并不是加载(全部资源)完毕
异步过程,加载和解析
DOMTree + CSSTree = randerTree
randerTree形成以后才开始浏览器才会开始渲染页面

  • reflow 页面的重排(重构)

    • dom节点的增删改查,dom节点的宽高,位置,dispaly: noneoffsetWidth/offsetLeft 都会造成浏览器的页面重排(reflow)
    • 当然疑惑为什么查看一个元素的可视大小都会造成浏览器的reflow,这是因为浏览器会重新渲染以获得这个实时只读属性
  • repaint 重绘
    与重排(reflow)相比,只是改变(重新渲染)页面的一小部分,性能损耗不大,比如改变元素背景色这样的

异步加载js

js异步加载的三种方法:

  • defer="defer"
    属性名和属性值相等的,可以只写值。可以写在内部<script>标签内部
    该js文件会异步加载,等到整个DOMTree解析完成才(页面加载完成之前)开始依次执行,也就是DOMContentloaded,但是实际上他发生在webNavigation.onDOMContentLoaded事件之前~~~~
  • aysnc = "aysnc"
    异步加载不阻塞,但是只要js文件加载完就执行(也就是说js文件的执行顺序是不定的),aysnc只能加载外部脚本,不能把js写在script标签里面


  • 使用document.creatElement()创建一个script标签,为他添加src属性,浏览器会加载URL中的js文件,不过好像在浏览器中是查不到这个的加载的(灯塔模式)。
    然后把创建的这个节点对象添加到页面里面去就可以执行js脚本了

能加载的资源都有一个onload事件,但是IE的script对象上面没有onload事件(单单就是这个script没有这个事件)
但是script标签有readyState(属性)这个状态码,该状态码共有三个状态loading(加载)interactive(活动) complete(完成)
readyState值的改变触发script.onreadystatechange事件

满足一定条件才执行的函数,叫做回调函数(callback)

posted @ 2019-01-09 17:01 秦晓 阅读(...) 评论(...) 编辑 收藏

json,异步加载,回调函数相关推荐

  1. 模块化加载_webpack模块化原理-异步加载模块

    在上篇文章中,我们介绍了 webpack 同步加载模块的原理.这篇文章,我们来介绍一下 webpack 异步加载模块. 异步加载模块 还是先做一些准备工作. 首先定义一个依赖模块:math.js,ma ...

  2. Cocos2d-x教程(36)-多线程与异步加载

    欢迎加入Cocos2d-x 交流群:193411763 转载时请注明原文出处 :http://blog.csdn.net/u012945598/article/details/41312345 --- ...

  3. Cocos2d-x的多线程与异步加载实现详解

    Cocos2d-x是一个单线程循环的引擎,引擎通过每一帧之间更新游戏中各元素的状态,以保证它们之间互不干扰,这个过程中尽管看起来成程序像是 在并行运行,但实际上却是一个串行过程. 举例来说,在游戏进行 ...

  4. js回调与异步加载的用法

    以前还是菜鸟的时候(虽然现在依然很菜 -_-|| )对异步加载与回调函数的技术无比向往,但也一直没有使用过,这次因为页面逻辑太过复杂,一堆请求逻辑,如果还是用顺序请求,页面的速度... 领导又要挠头了 ...

  5. 使用EasyUI Tree异步加载JSON数据 生成树

    这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考 ...

  6. Android利用Volley异步加载(JSON和图片)完整示例

    android的json解析部分都在包org.json下,主要有以下几个类: JSONObject:可以看作是一个json对象,这是系统中有关JSON定义的基本单元,其包含一对儿(Key/Value) ...

  7. 网络图片异步加载(用到多线程(线程池),java回调机制,图片缓存,图片的动画)

    用线程池,回调,进行图片的异步加载,实现图片的缓存,并且以渐隐动画的方式显示出来 不必多说,线程池,回调,这些在java里面都算是非常重要的角色. 线程池: 线程池就是管理多线程的一个东西,在多线程的 ...

  8. Angular16 Angular整合zTree、异步加载节点数据

    1 前提准备 1.1 新建一个angular4项目 参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 1.3 参考博客 点击前往01    ...

  9. Jquery Ztree异步加载树

    1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...

最新文章

  1. 计算机编程书籍-Python金融大数据分析
  2. 不契合市场,Bitcoin SV愿景未必是给矿工的一个好选择
  3. Web开发中的相对路径和绝对路径
  4. 8、使用SELECTI...INTO OUTFILE导出表数据
  5. hdfs 操作 入门api
  6. How is HashMap return type handled to be converted to a json string
  7. JAVA基础之自定义容器实现
  8. Redis工作笔记-主从复制Replication
  9. 存档:命令行程序的路径参数不能有空格
  10. html有序列表和无序列表
  11. 百度之星冠军分享:AI图像赛事入门
  12. python爬取book118中的书籍
  13. Android逐帧动画的实现
  14. mappedBy作用
  15. xml配置service服务器文件路径,xml配置service服务器文件路径
  16. 微信时代的巨大冲击 QQ空间面临艰难转型
  17. 经典推荐:盛大架构师周爱民回顾职业历程,分享十项建议
  18. 程序员之间的战争 战场是用户电脑
  19. matlab实现降低图片的分辨率
  20. 【神奇的电报】CSP题目 C++实现

热门文章

  1. 001:数据分析概述
  2. 本地部署 Whisper 及 WhisperDesktop
  3. Java获取URL链接的文件类型
  4. 小米移动流量显示无服务器,小米移动电话卡详解!打电话、上网流量无敌
  5. 【王喆-推荐系统】(task3)Embedding基础(特征工程篇)
  6. 怎么发送采集数据到网站-http接口方式
  7. 移动互联网行业中最具潜力的20大酷模式
  8. ges resource dynamic和ges enqueues占用较高导致实例终止问题处理
  9. ARP欺骗攻击原理及其防御
  10. JDBC是什么有什么用......