频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
js之异步加载解析
2018-09-12 15:54:45      个评论      
收藏   我要投稿

注册送白菜38

1.JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来传输的)
(1)XML和HTML:XML和HTML都是脚本语言,都是由标签标签的形式的,XML可以自定义标签,HTML不行
(2)过去以XML这种语言的格式来传输数据,如下,利用标签名和内容表示数据名和数据值

liu/name>
20


但是现在的传的数据格式是json也就是对象格式。里面有什么就写什么,但是为了和对象区分,特定规定出一种json的格式就是让属性名必须加双引号
但是传的不可能直接是json,其实传送给后台,和后台传给咱们的也是字符串,字符串里边是json。
2.JSON.parse(); string — >
JSON是个静态类像math一样,里面有很多函数
3.json JSON.stringify(); json — > string
例1:
var deng = {
name:"deng",
age:20,
}
var deng1 = JSON.stringify(deng);
//JSON.stringify --> "{"name":"deng","age":20}"
//JSON.parse(deng1) --> {name: "deng", age: 20}

118.异步加载js
1.浏览器有时间线的问题,首先我们输入网址的时候,先将这个页面请求过来,再一行一行加载。
在一行一行解析的过程中,html和css是并行一起解析的,html解析的时候会形成domTree的东西,css会形成cssTree,就像这种

上面的注册送白菜网html部分就会形成下面的树domTree(二叉树),深度优先原则,还有一个domTree的解析完毕,并不一定意味着domTree的加载完毕
document
html
head body
p
strong span
同样css也会有一个对应的树(和domTree节点对应的),然后两颗大树拼在一起,就会形成渲染树randerTree,渲染树大致就是,假如domTree中的p标签,渲染树中就有这个p多高多宽什么样的等
然后才开始绘制页面
那么问:什么时候算是把一个节点挂到这个树上面去呢,是把图片下载完了,再把img挂到树上去,还是读到img标签就挂上去呢?
答:不着急下载,系统读到img标签了,就会挂到树上去,这就叫注册送白菜网的解析。
所以是先解析再下载,先把这个东西解析,再同时开启一个线程,异步的去下载这个东西
那么:
\
<script type="text/javascript">
</script>
把javascript放在这些下面好处就是,这些东西刚刚解析完毕之后,javascript就可以操作他们了,没必要等他们下载完之后,所以更快一点
而window触发load事件之后,那么就要等到这个页面所有的图片,文字等信息全部下载完之后,也就是,这个页面所有自动的过程全部完事,就等着注册免费送38体验金无需申请交互体验了,window.onload才能执行,所以效率是最低的
但是也有好处:就是,等到页面所有加载完事了,再显示。但是决对不可以将主程序放在window.onload中
当renderTree真正形成完之后,渲染引擎才会真正的绘制页面,按照render每条规则绘制页面

2.
reflow(重排/重构):当利用js更改html以致会改变domTree,然后render,这叫做reflow(重排)这种效率是最低的,尽量避免,造成重拍的原因有dom节点的删除,添加,dom节点的宽高变化,位置变化,display:none -->block,offsetWidth,offsetLeft
repaint(重绘):只要是改变了,renderTree都会重新构建,不过是基于什么重新构建,若是基于CSS背景颜色的,不会全改变,会改变那个对应的一部分,影响比较小,重绘的是一部分,不是所有。也会浪费效率,但是浪费的小,可以接受
3.js加载的缺点:加载工具方法(就像初始化什么的)没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染工作
(1)js和html和css不能同时加载是因为js会更改html。js是单线程一个原因是因为,它可以修改页面,要是多线程,一个线程增加节点,另一个线程是删除节点,到底听哪个不知道
要是写多个js包的话,那么风险会越大,因为要是其中一个出问题了,整个页面就会废掉,因为js有阻断页面的作用,所哟
4.有些工具需要按需加载,用到再加载,不用不加载。

119.异步加载js三种方式(接118)
1.defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用
写了defer,这个javascript就不会阻塞下面文档的执行了,可以和html,css一起执行
例1:当属性名等于属性值的时候,就写个属性名就行,系统可以识别,但还是按标准写,全写了。
<script type = text/javascript src="tool.js" defer="defer"></script><==><script type = text/javascript src="tool.js" defer></script>
例2:不仅是外部文件可以异步加载,写成注册送白菜网块也是可以异步加载的,当然不能又src,里面又写注册送白菜网的

<*往下这三行也可是异步加载*>
<script type = text/javascript defer="defer">
var a = 123;
</script>

2.aysnc 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script标签里
asynchronous(异步) javascriptt and xml -->ajax
例1:这样可以但是不能将js写在里面,不像上一个,
<script type="text/javascript" aysnc="aysnc">
</script>
总结:defer是ie用的 aysnc是非ie浏览器用的,当然有些ie的高版浏览器也是可以用的,defer全部解析完才会被执行,aysnc是加载完就可以执行,defer里面除了可以引入外部js文件,也可以让内部的js文件变为异步的,但是aysnc只能加载外部js文件
问:我要是想要任何浏览器都能实现这种异步加载,怎么办?
要是写在一起会崩溃、冲突,要是写两条语句的话,会产生注册送白菜网覆盖,注册送白菜网重叠,注册送白菜网冲突等的问题,所以解决方法如下,也是最常用的一种方法
3.创建script标签,插入到DOM中,加载完毕之后callback
灯塔模式:创建一个img标签,然后这个img标签作为一个预加载的东西,不去加载到页面,把src里面的值复制过来之后,会将img的东西加载过来,形成一个预加载,以后再用的时候就方便了,再拿缓存就可以了。
例1:实现了异步加载的过程,当然也依赖于另外一个script标签(外边那个)
<script type="text/javascript">
var script = document.createElement('script');
script.type="text/javascript";
script.src="yinrujs.js"; /*这句执行完系统就会下载这个地址里的东西了,就会开启一个线程异步的下载里面的东西了,而且要是注册送白菜网只写了这么多的话,永远都不会执行,只会下载*/
document.head.appendChild(script);/*当你把这个script标签插入到页面里之后才会执行这个东西,才会解析这个脚本,否则什么也不干,*/
</script>
例2:
var script = document.createElement(&注册送白菜3839;script&注册送白菜3839;);
script.type="text/javascript";
script.src="yinrujs.js";
document.head.appendChild(script);
test(); //test函数在yinrujs文件中
//第一行创建,第二行设置,第三行下载,下载需要发送请求,然后等请求响应完之后,等待请求回归资源的过程,
//在发生过程中就已经把下面的那几行执行完了,因为程序执行是非常快的,并且这个加载还是异步加载的,不会阻塞程序,
//所以可能当下面执行test的时候,那个文件还没下载完,所以报错
4.onload当上面那个例子中文件下载完了就会触发onload事件
例1:
<script type="text/javascript">
var script = document.createElement('script');
script.type="text/javascript";
script.src="yinrujs.js";
document.head.appendChild(script);
script.onload = function(){
test();
}
</script>
//并且onload兼容性非常好,Safari Chrome firefox,opera,都是兼容的,然而ie就script身上没有onload标签
4.ie的script身上状态码:script.readyState,这个属性一开始有值 script.readyState="loading",它会根据script标签加载的进度去动态的改变里面的值,当script标签加载完之后,里面的值会变为"complete"或者"loaded"
当状态码改变的时候会触发onreadystatechange 这个时间就是监听状态码的改变
script.onreadystatechange = function(){
if(script.readyState=="complete"||script.readyState == "loaded"){
test();
}
}

5,回调函数:当满足一定条件才执行的函数叫做回调函数,回调函数有个名字叫做callback,就像上例中的test。
6.兼容性写法最终版
问题1:
就是当处理的特别快的话,那么那个readyState瞬间就变为complete了,那么onreadystatechange就不会触发了,
因为绑定之前就已经变为最终状态了,就不会在变化了,所以onreadystatechange就不会再执行了,
所以解决方法就是将src放在后面,这样状态一定就会改变,因为在后面才会开始下载文件。
问题2:
当执行函数的时候,要是直接写loadscript(&注册送白菜3839;yinrujs.js&注册送白菜3839;,test);会报错,因为这个时候还没有加载文件还没有执行函数体,不知道test是什么,所以会报错,
解决方法就是,写匿名函数,函数引用读的时候不会执行里面,只有在执行时才会执行里面的注册送白菜网,然后callback就是函数引用,执行时候执行test
loadscript(&注册送白菜3839;yinrujs.js&注册送白菜3839;,function(){
test();
});

js文件:
function test(){
console.log(&注册送白菜3839;a&注册送白菜3839;);
}
完整版1:
<script type="text/javascript">
function loadscript(url,callback){
var script = document.createElement('script');
script.type="text/javascript";
if(script.ready){
script.onreadystatechange = function(){
if(script.readyState=="complete"||script.readyState == "loaded"){
callback();
}
}
}
else{
script.onload = function(){
callback();
}
}
script.src=url;
document.head.appendChild(script);
}
loadscript('yinrujs.js',function(){
test();
});
</script>
完整版2:eval将里面的字符串当作注册送白菜网来执行,但是不让用eval,不建议使用
<script type="text/javascript">
function loadscript(url,callback){
var script = document.createElement('script');
script.type="text/javascript";
if(script.ready){
script.onreadystatechange = function(){
if(script.readyState=="complete"||script.readyState == "loaded"){
eval(callback);
}
}
}
else{
script.onload = function(){
eval(callback);
}
}
script.src=url;
document.head.appendChild(script);
}
loadscript('yinrujs.js',"test()");
</script>
完整版3:
<script type="text/javascript">
function loadscript(url,callback){
var script = document.createElement('script');
script.type="text/javascript";
if(script.ready){
script.onreadystatechange = function(){
if(script.readyState=="complete"||script.readyState == "loaded"){
tools[callback]()
}
}
}
else{
script.onload = function(){
tools[callback]();
}
}
script.src=url;
document.head.appendChild(script);
}
loadscript('yinrujs.js',"test");
</script>
js文件:
var tools = {
test : function(){
console.log(&注册送白菜3839;a&注册送白菜3839;);
},
demo : function(){

}
}

上面的形式其实很复杂的形式,因为:
正常情况下如果只是想异步加载一个js,只是想加载一个工具库的话,也可以用这个方法,只是没有必要传回调函数callback
在里面这么写,然后监控它,什么时候这个函数执行完毕,发送信号,当有这个信号的时候在随便调用函数就可以了,如果针对库里的某些方法,去按需加载,按需执行
可以将callback更改,你可能觉得加载完之后要调用一系列方法,那可以传个数组进去,然后在里面修改注册送白菜网,执行数组

点击复制链接 与好友分享!回本站首页
相关TAG标签 js 异步加载 解析
上一篇:常见的JavaScript框架和库解析
下一篇:ES6数组新特性解析(map,filter,forEach,reduce)
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站