当前位置:首页 » 网页前端 » 前端项目中的异步
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端项目中的异步

发布时间: 2022-10-01 16:19:44

前端异步刷新问题

这个问题我前段时间也在网上找了下,你可以看看 http://bbs.csdn.net/topics/392062631 ,也是div里加载刷新页面

Ⅱ 前端总线内存异步什么意思

内存异步是指
只提高内存运行频率 加速内存运行效率
而不改变总线频率的一种技术
注:提高总线频率是超频 而内存异步技术不是超频,只是让内存发挥出最大效能

Ⅲ js如何异步执行方法

functionmyThread(callback){

returnsetTimeout(1000*10,function(){

$("#div").append("<p>hello</p>");//10秒后在div中加一个行,然后在执行callback函数

callback();

});

}

用回调函数

functionA(fun){

vartemp=100;

temp=temp*temp;

window.setTimeout(function(){

fun(temp);

},0);

alert("a函数:"+temp);

}

functionB(r){

alert("b函数"+r);

}

A(B);//调用

Ⅳ JS中的异步操作有哪些

JS中的异步操作:
1、定时器都是异步操作
2、事件绑定都是异步操作
3、AJAX中一般我们都采取异步操作(也可以同步)
4、回调函数可以理解为异步(不是严谨的异步操作)

Ⅳ 如何选择和评价前端ajax异步渲染与后端mvc渲染

1、到今天,几乎没人会禁掉js。
2、php生成全部代码,肯定比只生成框架,然后ajax要快。原因是,两种情况下,你的网线传输的数据K数基本是一样的,如果js执行innerHTML的话,会修改dom,造成重绘和重排,代价比较大。即使php只负责框子,但一般php项目都是使用了模板引擎的,即使提供框子也需要动用模板引擎,那么模板引擎处理框子和处理全部内容,是几乎感觉不出时间区别的。如果数据量大,那么ajax的优势是可以分段下载数据,这样就显得比php快。
3、忽略php比ajax快这种情况,它们的区别就是看使用场合,而且没有必须的规则,所以不要太较真。
ajax永远是跟“安全”的“频繁更新”的“格式的批量数据”以及“数据缓存”相关,而且用户没有欲望看旧的数据,也就是说,用户没兴趣、没必要点后退键,看老数据。因为ajax默认不支持后退键,如果想实现后退,需要做大量的工作。
也就是说:
A、如果抓的数据是敏感的,那么不要ajax,不敏感的话就可以ajax。如果抓的不是格式的批量数据,而是别的东西,比如抓了一条视频地址,即然只有一条,没必要ajax。如果预判用户会查阅大量的数据,那么用ajax先抓一批数据(或者首批数据用php输出),然后后台慢慢悠悠的再继续抓其他数据,然后缓存起来,这时候用ajax。
B、如果你的页面呈现完毕之后处于数据静止状态(不进行数据频繁更新),那就肯定是用php。(如果页面显示了当天日期,昨天是15日,今天是16日,也认为是数据静止。如果在某个位置显示了你的用户名,也认为是数据静止。)
C、如果你的页面呈现完毕之后不处于数据静止状态,也就是说在你观看页面的几十秒期间内,服务器数据库就有了大批量的数据更新,而且你有必要马上看到这些更新,那么就用ajax。或者说你的页面打开之后可能需要保持半小时、一小时不关闭,而且要随时看到数据更新,那肯定要用ajax。
从上述我的理论来讲,笼统说,你的公司内部网站,大量利用php,加上一丢丢的ajax,就对了。
关于分页,有人说用ajax来获取分页信息,岂不是美哉?这里道理其实是一样的,列表可以视为格式的批量数据,而且缓存有利于翻页,所以可以ajax。但是有可能列表页更新很慢,几天几周才新增一条,那又可以考虑php。所以这次就看情况而定。
如果一个网页展示了不算多的三四十条批量数据,今天是这些数据,明天仍是这些数据,没变过,这时候尽管符合“格式的批量数据”,但也推荐php,不推荐ajax。所以我才说,公司内网,可以大量用php。

对于php生成了html的情况,那就跟php无关了,如果一个html页面内的数据总要更新,当然ajax,没疑问。

Ⅵ java web 项目中如何实现异步方式分页啊

使用struct里面的dojo插件撒,不明白在hi我

Ⅶ 怎样用JS实现异步转同步

源起

小飞是一名刚入行前端不久的新人,因为进到了某个大公司,俨然成为了学弟学妹眼中'大神',大家遇到js问题都喜欢问他,这不,此时他的qq弹出了这样一条消息

"hi,大神在吗?我有个问题想问,现在我们的代码里面有这样的东西,可是得不到正确的返回结果

1234567functiongetDataByAjax () {return$.ajax(...postParam)}vardata = getDataByAjax()if(data) {console.log(data.info)}

"哦,你这里是异步调用,不能直接获得返回值,你要把if语句写到回调函数中",小飞不假思索的说到,对于一个‘专业’的fe来说,这根本不是一个问题。
“可是我希望只是改造getDataByAjax这个方法,让后面的代码成立。”
“研究这个没有意义,异步是js的精髓,同步的话会阻塞js调用,超级慢的,但是你要一再坚持的话,用async:true就好了”
“不愧是大神,我回去立刻试一试,么么哒”

两天后,她哭丧着脸登上了qq
“试了一下你的方法,但是根本行不通,哭~~”
“别急,我看看你这个postParam的参数行吗”

123456{...dataType:'jsonp',async:true...}

"这是一个jsonp请求啊,老掉牙的东西了,,jsonp请求是没有办法同步的"
“我知道jsonp请求的原理是通过script标签实现的,但是,你看,script也是支持同步的呀,你看tags/attscriptasync.asp”
“额,那可能是jquery没有实现吧,哈哈”
“大神,你能帮我实现一个jsonp的同步调用方式嘛,拜托了(星星眼)”
虽然他有点奇怪jquery为什么没有实现,但是既然w3school的标准摆在那里,码两行代码又没什么,

loadJsonpSync = (url) => {varresult;window.callback1 = (data) => (result = data)lethead = window.document.getElementsByTagName('head')[0]letjs = window.document.createElement('script')js.setAttribute('type','text/javascript')js.setAttribute('async','sync')// 这句显式声明强调src不是按照异步方式调用的js.setAttribute('src', url)head.appendChild(js)returnresult}

额,运行起来结果竟然是undefined!w3cshool的文档竟然也不准,还权威呢,我看也不怎么着,小飞暗自想到。

“刚才试了一下,w3school文档上写的有问题,这个异步属性根本就是错的”
“可是我刚还试过一次这个,我确认是好的呀”

12<script src="loop50000 && put('frist').js"></script><script src="put('second').js"></script>

(有兴趣的同学可以实现以下两个js,并且加上async的标签进行尝试。)
“这个,我就搞不清楚了”,小飞讪讪的说到
对方已离线

抽象

关于这个问题,相信不只是小飞,很多人都难以解答。为什么ajax可以做到同步,但jsonp不行,推广到nodejs上,为什么readFile也可以做到同步(readFileSync),但有的库却不行。
(至于script的async选项我们暂时避而不谈,是因为现在的知识维度暂时还不够,但是不要着急,下文中会给出明确的解释)
现在,让我们以计算机科学的角度抽象这个问题:

我们是否可以将异步代码转化为同步代码呢?(ASYNCCALL => SYNCCALL)

既然是抽象问题,那么我们就可以不从工程角度/性能角度/实现语言等等等方面来看(同步比异步效率低下),每增加一个维度,复杂程度将以几何爆炸般增长下去。

首先,我们来明确一点,==在计算机科学领域==同步和异步的定义

同步(英语:Synchronization),指对在一个系统中所发生的事件(event)之间进行协调,在时间上出现一致性与统一化的现象。在系统中进行同步,也被称为及时(in time)、同步化的(synchronous、in sync)。--摘自网络
异步的概念和同步相对。即时间不一致,不统一

明确了这一点,我们可以借助甘特图来表示同步和异步

注意看我们标红的地方,如果你完成了小测验1,就会得到和这张图一致的顺序

==同步执行的代码片段必然在异步之前。==

所以,无论从理论还是实际出发,我们都不得不承认,在js中,把异步方法改成同步方法这个命题是水月镜花

哦对了,最后还需要解释一下最开始我们埋下的坑, 为什么jsonp中的async没有生效,现在解释起来真的是相当轻松,即document.appendChild的动作是交由dom渲染线程完成的,所谓的async阻塞的是dom的解析,而非js引擎的阻塞。实际上,在async获取资源后,与js引擎的交互依旧是push taskQueue的动作,也就是我们所说的async call

推荐阅读: 关于dom解析请大家参考webkit技术内幕第九章资源加载部分

峰回路转

相信很多新潮的同学已经开始运用切了async/await语法,在下面的语法中,getAjax1和console之间的具有同步的特性

1234asyncfunction() {vardata = await getAjax1()console.log(data)}

讲完了event loop和异步的本质,我们来重新审视一下async/await。
老天,这段代码亲手推翻了==同步执行的代码片段必然在异步之前。== 的黄金定律!
惊不惊喜,意不意外,这在我们的模型里如同三体里的质子一样的存在。我们重新审视了一遍上面的模型,实在找不到漏洞,找不到任何可以推翻的点,所以真的必须承认,async/await绝对是一个超级神奇的魔法。
到这里来看我们不得不暂时放弃前面的推论,从async/await本身来看这个问题
相信很多人都会说,async/await是CO的语法糖,CO又是generator/promise的语法糖,好的,那我们不妨去掉这层语法糖,来看看这种代码的本质, 关于CO,读的人太多了,我实在不好老生常谈,可以看看这篇文章,咱们就直接绕过去了,这里给出一个简易的实现
/5800210.html

functionwrap(wait) {variteriter = wait()const f = () => {const { value } = iter.next()value && value.then(f)}f()}function*wait() {varp = () =>newPromise(resolve => {setTimeout(() => resolve(), 3000)})yieldp()console.log('unlock1')yieldp()console.log('unlock2')console.log('it's sync!!')}

终于,我们发现了问题的关键,如果单纯的看wait生成器(注意,不是普通的函数),是不是觉得非常眼熟。这就是我们最开始提出的spinlock伪代码!!!
这个已经被我们完完全全的否定过了,js不可能存在自旋锁,事出反常必有妖,是的,yield和*就是表演async/await魔法的妖精。
generator和yield字面上含义。Gennerator叫做生成器,yield这块ruby,python,js等各种语言界争议很大,但是大多数人对于‘让权’这个概念是认同的(以前看到过maillist上面的争论,但是具体的内容已经找不到了)

扩展阅读---ruby元编程 闭包章节yield(ruby语义下的yield)

所谓让权,是指cpu在执行时让出使用权利,操作系统的角度来看就是‘挂起’原语,在eventloop的语义下,似乎是暂存起当时正在执行的代码块(在我们的eventloop里面对应runPart),然后顺序的执行下一个程序块。
我们可以修改eventloop来实现让权机制

小测验2 修改eventloop使之支持yield原语

至此,通过修改eventloop模型固然可以解决问题,但是,这并不能被称之为魔法。

和谐共存的世界

实际上通过babel,我们可以轻松的降级使用yield,(在es5的世界使用让权的概念!!)
看似不可能的事情,现在,让我们捡起曾经论证过的
==同步执行的代码片段必然在异步之前。== 这个定理,在此基础上进行进行逆否转化

==在异步代码执行之后的代码必然不是同步执行的(异步的)。==

这是一个圈子里人尽皆知的话,但直到现在他才变得有说服力(我们绕了一个好长的圈子)
现在,让我们允许使用callback,不使用generator/yield的情况下完成一个wait generator相同的功能!!!

functionwait() {const p = () => ({value:newPromise(resolve => setTimeout(() => resolve(), 3000))})letstate = {next: () => {state.next = programPartreturnp()}}functionprogramPart() {console.log('unlocked1')state.next = programPart2returnp()}functionprogramPart2() {console.log('unlocked2')console.log('it's sync!!')return{value: void 0}}returnstate}

太棒了,我们成功的完成了generator到function的转化(虽然成本高昂),同时,这段代码本身也解释清楚了generator的本质,高阶函数,片段生成器,或者直接叫做函数生成器!这和scip上的翻译完全一致,同时拥有自己的状态(有限状态机)

推荐阅读 计算机程序的构造和解释 第一章generator部分
小测验3 实际上我们提供的解决方式存在缺陷,请从作用域角度谈谈

其实,在不知不觉中,我们已经重新发明了计算机科学中大名鼎鼎的CPS变换
Continuation-passing_style

最后的最后,容我向大家介绍一下facebook的CPS自动变换工具--regenerator。他在我们的基础上修正了作用域的缺陷,让generator在es5的世界里自然优雅。我们向facebook脱帽致敬!!egenerator

后记

同步异步 可以说是整个圈子里面最喜欢谈论的问题,但是,谈来谈去,似乎绝大多数变成了所谓的‘约定俗称’,大家意味追求新技术的同时,却并不关心新技术是如何在老技术上传承发展的,知其然而不知其所以然,人云亦云的写着似是而非的js。

==技术,不应该浮躁==

PS: 最大的功劳不是CO,也不是babel。regenerator的出现比babel早几个月,而且最初的实现是基于esprima/recast的,关于resprima/recast,国内似乎了解的并不多,其实在babel刚刚诞生之际, esprima/esprima-fb/acron 以及recast/jstransfrom/babel-generator几大族系围绕着react产生过一场激烈的斗争,或许将来的某一天,我会再从实现细节上谈一谈为什么babel笑到了最后~~~~

Ⅷ vue前端异步与页面渲染问题:怎样让子异步函数完成后页面再渲染

异步加载完成后 调用ui线程的handle来sendMessage 在handle的dispatchMessage中处理消息,做progressBar的隐藏处理

Ⅸ nodeJS中,异步的具体实现者是什么

在现在的项目开发中,任何一个大型项目绝对不是简简单单的采用一个种语言和一种框架,因为每种语言和框架各有优势,与其死守一个,不与取各家之所长,依次得到一个高性能、搞扩展的产品。

对于一个.NET开发者,尤其是主要从事Web开发的.NET程序员,个人觉得有必要学习一门性能优越的Web平台开发语言。一个开发者不能简简单单的只学习一门语言,思维应该开阔,从各个方面去看待同样的一个问题,这样或许会得到另一番效果和见解,个人认为应该学习一下其他的语言,这样有利于我们对比语言的优势和缺点,例如java、nodejs、python等等。对于Nodejs这个JavaScript平台,个人觉得.NET程序员有必要学习一下,因为学习NodeJS有助于我们构建一个高性能的Web平台。

NodeJS具有事件驱动、非阻塞I/O等特点,可以很好的处理I/O操作。Node面向网络且擅长并行I/O,能够有效地组织起更多的硬件资源。

这篇博客就来简单的介绍一下NodeJS的异步I/O特点。

一.NodeJS概述:

要学习一个语言或者平台,我们首先应该知道其定义,依据定义来扩展我们的学习思路。Node的定义:”一个大奖在Chrome JavaScript运行时上的平台,用于构建高速、可伸缩的网络程序。NodeJS作为一个异步事件驱动的JavaScript运行时,旨在构建可扩展的网络应用程序。“有关nodejs的背景介绍和安装方法,这里就没有必要介绍了,因为对于nodejs的安装是比较简单,所以在这里赘述就有些显得浪费时间。

学习完Node的定义特点,可能很多人都会好奇这个平台的适用场景是什么,以便在实际的项目开发中应用,不然学习这个就没有意义。主要的应用场景:前后端编程语言环境统一;高性能I/O用于实时应用;并行I/O使得使用者可以更高效地利用分布式环境;并行I/O有效利用稳定接口提升Web渲染能力;云平台的支持;游戏开发(这可能是很多开发者在意的,毕竟现在的游戏开发火热程度已经到了无以附加的地步);工具类应用,与较多的工具方法,使得开发效率大大的提升。

NodeJS异步I/O模型的基本要素:事件循环、观察者、请求对象、I/O线程池这四个共同构成。接下来我们具体了解一下这些知识。

二.NodeJS异步I/O解析:

对于Nginx服务器,很多人都是比较的熟悉,Nginx采用纯C编写而成,用于做Web服务器,在反向代理和负载均衡等服务方面有很好的优势。Node与Nginx服务器有着相似的地方,都是采用事件驱动。

浏览器中JavaScript在单线程上执行,而且还与UI渲染共用一个线程,JavaScript在执行的时候UI渲染和响应应是出于停滞状态。(如果脚本执行的时间超过100毫秒,用户就会感到页面卡顿)。遇到这些情况,我们就会想到异步的方式消除这些等待的问题,对于异步和同步的概念就不做介绍了。

=接下来我们具体的来了解一下NodeJS的事件驱动和非阻塞I/O这些特点,了解这些对于我们更好的学习NodeJS开发和构建高性能的Web平台有更加深远的意义。

1.I/O操作概述:

I/O操作对于任何一个开发者来说都不会陌生,现在我们就简单的谈一下NodeJS的I.O操作。I/O操作分为:单线程串行依次执行;多线程并行执行。这两种方式各有优势和缺点,多线程的代价在于创建线程和执行期线程上下文切换的开销较大,并且多线程面临锁、状态同步的问题。单线程安装顺序执行,在执行中任何一个稍慢都会导致后续执行代码阻塞。对于任务的串行执行(概念上类似于同步执行)和任务的并行执行的描述有如下图:

varconfig=require('./config.json');
varfs=require("fs");
varhttp=require('http');
varurl_mole=require("url");

http.createServer(function(request,response){
varkey=url_mole.parse(request.url).query.replace('key=','');
switch(request.method){
case'GET'://
fs.readFile(config.dataPath+key,'utf8',function(err,value){
if(err){
//ReturnFileNotFoundiffilehasn'tyetbeencreated
response.writeHead(404,{'Content-Type':'text/plain'});
response.end("Thefile("+config.dataPath+key+")doesnotyetexist.");
}else{
//Ifthefileexists,
varsorted=value.split(config.sortSplitString).sort().join('');
response.writeHead(200,{'Content-Type':'text/plain'});
response.end(sorted);
}
});
break;
case'POST'://
varpostData='';
request
.on('data',function(data){
postData+=data;
})
.on('end',function(){
fs.appendFile(config.dataPath+key,postData,function(err){
if(err){
//Returnerrorifunabletocreate/appendtothefile
response.writeHead(400,{'Content-Type':'text/plain'});
response.end('Error:Unabletowritefile:'+err);
}else{
//,return"success"response
response.writeHead(200,{'Content-Type':'text/plain'});
response.end('success');
}
});
});
break;
default:
response.writeHead(400,{'Content-Type':'text/plain'});
response.end("Error:BadHTTPmethod:"+request.method);
}
}).listen(config.serverPort);

console.log('synchronousserverisrunning:',config.serverPort);

四.总结:

这篇博文是个人初次尝试NodeJS的一个小总结,如有写的不好还望大家多多的包含和指正。对于程序员来说,需要做的就是一直不停的学习,无论是否是自己主要从事的语言,对于学习多种语言,可以更加有助我们了解编程,对于一个开发者来说,最终的就是思想,因为语言的特性和框架的应用,一个熟练的编程者学习起来并不是难事,难就难在我们对于语言和框架的设计理念的理解。