javascript 비동기 프로그래밍_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

javascript 비동기 프로그래밍_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:25 PM

비동기 프로그래밍

就好像排队，前面的人忙着忙着突然上厕所了，后面的人阻塞在这里，因此我们就需要让前面的人死到一边去，让后面的人跟进……AJAX就是这个概念，请求还在继续，但我们还可以做其他事。

javascript中实现这个功能的是来自BOM的一个函数setTimeout，但相关的DOM操作也提供了一系列实现。如XMLHttpRequest对象与script标签的onreadystatechange回调，image的onload与onerror回调，iframe的onload，DOM元素的事件回调，HTML5的跨域消息传送postMessage，QuickTime与flash对象的加载……

setTimeout的零秒延迟在前些年时间被国内宣扬得特别厉害，但setTimeout是所有延迟中最慢的，最少要花上10多毫秒，如果用setTimeout来开发特效，这特效会运行得比较慢。下面是一个性能测试：

<title>Async performance test</title> 
<meta charset="gb2312"> 
<style> 
pre { 
background-color: #eeeeee; 
padding: 20px; 
} 
div.test { 
margin: 20px; 
padding: 10px; 
border: solid black 1px; 
} 
</style> 
 
 
<div class="test"> 
<h3 id="setTimeout-slow-takes-about-sec">setTimeout (slow, takes about 10 sec)</h3> 
<pre class='brush:php;toolbar:false;'> 
function async(callback) { 
setTimeout(callback, 0); 
} 
</pre> 
<p> 
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> 
</p> 
</div>

<div class="test"> 
<h3 id="img-onerror-data-uri">img.onerror (data:uri)</h3> 
<pre class='brush:php;toolbar:false;'> 
function async(callback) { 
var img = new Image; 
img.addEventListener('error', callback, false); 
img.src = 'data:,foo'; 
} 
</pre> 
<p> 
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> 
</p> 
</div>

<div class="test"> 
<h3 id="script-onreadystatechange">script.onreadystatechange</h3> 
<pre class='brush:php;toolbar:false;'> 
function async(callback) { 
var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "javascript:"; 
script.onreadystatechange = function () { 
document.body.removeChild(script); 
callback(); 
} 
document.body.appendChild(script); 
} 
</pre> 
<p> 
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> 
</p> 
</div>

<div class="test"> 
<h3 id="script-onload-data-uri">script.onload (data:uri)</h3> 
<pre class='brush:php;toolbar:false;'> 
function async(callback) { 
var script = document.createElement('script'); 
script.onload = function() { 
document.body.removeChild(script); 
callback(); 
} 
script.src = 'data:text/javascript,'; 
document.body.appendChild(script); 
} 
</pre> 
<p> 
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> 
</p> 
</div>

<div class="test"> 
<h3 id="xhr-onreadystatechange-data-text-plain-foo">xhr.onreadystatechange (data:text/plain,foo)</h3> 
<pre class='brush:php;toolbar:false;'> 
function async(callback) { 
var xhr = new XMLHttpRequest; 
xhr.open('GET','data:text/plain,foo',true); 
xhr.onreadystatechange = function() { 
xhr.onreadystatechange = null; 
callback(); 
}; 
xhr.send(null); 
} 
</pre> 
<p> 
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> 
</p> 
</div>

<div class="test"> 
<h3 id="self-postMessage">self.postMessage</h3> 
<pre class='brush:php;toolbar:false;'> 
function async(callback) { 
var n = ++async.count; 
window.addEventListener('message',function(e){ 
if (e.data == n) { 
window.removeEventListener('message', arguments.callee,false); 
callback(); 
} 
},false); 
window.postMessage(n, location.protocol + "//" + location.host); 
} 
async.count = 0; 
</pre> 
<p> 
<input type="button" value="run" onclick="runtest(this.parentNode.parentNode)"> 
</p> 
</div>

var t = new Date, n = 1000, i = 0, flag = true; 
try { 
test(); 
} catch (e) {} 
setTimeout(function() {if (flag) p.innerHTML = 'failed'; flag = false}, 200);

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript函数异步编程：处理复杂任务的必备技巧Nov 18, 2023 am 10:06 AM

JavaScript函数异步编程：处理复杂任务的必备技巧引言：在现代前端开发中，处理复杂任务已经成为了必不可少的一部分。而JavaScript函数异步编程技巧则是解决这些复杂任务的关键。本文将介绍JavaScript函数异步编程的基本概念和常用的实践方法，并提供具体的代码示例，帮助读者更好地理解和使用这些技巧。一、异步编程的基本概念在传统的同步编程中，代码按

PHP中如何使用ReactPHP进行异步编程Jun 27, 2023 am 09:14 AM

随着Web应用程序变得越来越复杂，程序员不得不采用异步编程来处理大量请求和I/O操作。PHP：HypertextPreprocessor也不例外。为了满足这一需求，ReactPHP已经成为目前最受欢迎的PHP异步编程框架之一。在本文中，将讨论如何在PHP中使用ReactPHP进行异步编程。1.ReactPHP简介ReactPHP是一个基于事件驱动编程

如何在PHP中实现异步消息处理Jul 10, 2023 am 08:19 AM

如何在PHP中实现异步消息处理引言：在现代的Web应用程序中，异步消息处理变得越来越重要。异步消息处理可以提高系统的性能和可扩展性，并改善用户体验。PHP作为一种常用的服务器端编程语言，也可以通过一些技术来实现异步消息处理。在本文中，我们将介绍一些PHP中实现异步消息处理的方法，并提供代码示例。使用消息队列消息队列是一种解耦系统组件的方式，它允许不同的组件在

深入理解PHP8的新特性：如何高效使用异步编程和代码？Sep 11, 2023 pm 01:52 PM

深入理解PHP8的新特性：如何高效使用异步编程和代码？PHP8是PHP编程语言的最新主要版本，带来了许多令人兴奋的新特性和改进。其中最突出的特性之一是对异步编程的支持。异步编程允许我们在处理并发任务时提高性能和响应能力。本文将深入探讨PHP8的异步编程特性，并介绍如何高效地使用它们。首先，让我们了解一下什么是异步编程。在传统的同步编程模型中，代码按照线性的顺

如何使用PHP和ReactPHP实现异步编程May 11, 2023 pm 02:00 PM

随着互联网应用场景的不断发展，人们对Web应用的要求也越来越高。为了提高Web应用的性能和响应速度，异步编程已经成为现代Web应用开发不可或缺的一部分。PHP是一门广泛使用的Web开发语言，而ReactPHP则是一个基于PHP的异步编程框架。本篇文章将介绍如何使用PHP和ReactPHP实现异步编程。一、什么是异步编程？在编程中，同步和异步是两种常用的编程方

如何在Go语言中实现异步编程Jun 04, 2023 am 08:10 AM

随着互联网技术的不断发展，高并发高可用的需求越来越强烈。而异步编程是提高程序运行效率和响应能力的有效手段之一。Go语言作为一种新兴的编程语言，天生支持并发和异步编程，极大地方便了程序员的开发工作。本文将介绍如何在Go语言中实现异步编程。一、Go语言中的goroutineGo语言提供了goroutine机制，可以轻松地实现并发和异步操作。goroutine是一

前往Golang学习之Web服务端的异步编程模式Jun 24, 2023 am 10:52 AM

随着互联网技术的快速发展，Web服务端的开发成为了当前互联网行业的热门话题。而Golang作为一门新兴的编程语言，凭借其高效、并发的特性，也成为了Web服务端开发的首选语言之一。本文将会介绍GolangWeb服务端的异步编程模式，旨在帮助读者更好地掌握Golang在Web服务端开发中的应用。一、什么是异步编程模式异步编程模式是指程序的执行不是按照程序的顺序

Spring Boot与Kotlin协程的整合和异步编程Jun 22, 2023 pm 06:22 PM

随着现代Web应用的复杂性不断增加，尤其是在分布式系统和微服务等领域，异步编程已经成为了新的标配。SpringBoot是用于构建基于Spring框架的快速Web应用程序的工具，而Kotlin协程是一种基于协程的异步编程方式。在本文中，我们将讨论如何将它们整合起来，实现更高效的异步编程。Kotlin协程简介Kotlin语言是一种静态类型的编程语言，从1.3版

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.