JavaScript 멀티스레딩 페이지 1/2_javascript 기술 사용해 보기-JS 튜토리얼-php.cn

JavaScript 멀티스레딩 페이지 1/2_javascript 기술 사용해 보기

PHP中文网

풀어 주다： 2016-05-16 18:58:27

원래의

921명이 탐색했습니다.

지난 이틀 동안 ajax 작업을 많이 하다가 ajax의 캐시 문제를 발견했는데, 요청을 하다가 다른 작업을 하고 싶은 경우가 종종 있었습니다. 자바스크립트에서 멀티스레딩을 사용할 수 있는 방법이 없을까 궁금해서 온라인으로 검색한 결과 결과를 찾았습니다.

마법의 무기는 실제로 js 라이브러리인 Concurrent.Thread입니다. 사용 방법은
매우 간단합니다
Concurrent.Thread.create (f, a1, a2, ...) f는 호출하려는 함수이고, a1, a2는 함수의 매개변수입니다. 동시에 여러 스레드를 생성할 수 있으며 실행됩니다. 이 라이브러리는 Concurrent.Thread.stop() 등과 같은 다른 언어의 Thread 사용 방법과 유사하게 동시에 많은 방법을 제공합니다. 구체적으로 알아보려면 웹사이트에 가보세요.

<html> 
<body> 
<script type="text/javascript" src="Concurrent.Thread.Compiler.js"></script> 
<script type="text/javascript"> 
function hello ( ) { 
document.body.innerHTML += "H"; 
document.body.innerHTML += "e"; 
document.body.innerHTML += "l"; 
document.body.innerHTML += "l"; 
document.body.innerHTML += "o"; 
document.body.innerHTML += ","; 
document.body.innerHTML += " "; 
document.body.innerHTML += "w"; 
document.body.innerHTML += "o"; 
document.body.innerHTML += "r"; 
document.body.innerHTML += "l"; 
document.body.innerHTML += "d"; 
document.body.innerHTML += "!"; 
} 
Concurrent.Thread.create(hello); 
</script> 
</body> 
</html>

로그인 후 복사

저자 Daisuke Maki 번역가 Zhang Kaifeng
AJAX 기술을 사용하여 점점 더 많은 웹사이트가 개발되고 있지만, 복잡한 AJAX 애플리케이션을 구축하는 것은 여전히 어려운 문제다. 이러한 어려움의 주된 이유는 무엇입니까? 서버와의 비동기 통신 문제인가요? 아니면 GUI 프로그래밍 문제입니까? 일반적으로 이 두 가지 작업은 데스크톱 프로그램으로 완료되는데, 동일한 기능을 수행할 수 있는 AJAX 애플리케이션을 개발하는 것이 왜 그렇게 어려운가요?
AJAX 개발의 어려움
간단한 예를 통해 이 문제를 이해해 보겠습니다. 모든 기사 정보를 서버에서 한꺼번에 불러오는 것이 아니라, 사용자 요청에 따라 서버와 상호 작용하여 각 기사의 정보를 동적으로 불러올 수 있는 트리 구조의 게시판 시스템(BBS)을 구축한다고 가정해 보겠습니다. 각 기사에는 시스템에서 고유 식별자로 사용할 수 있는 ID, 포스터 이름, 기사 내용, 모든 하위 기사의 ID를 포함하는 배열 정보 등 4가지 관련 속성이 있습니다. 먼저, 기사 정보를 불러올 수 있는 getArticle()이라는 함수가 있다고 가정합니다. 이 함수가 전달받은 인자는 로딩할 기사의 ID이며, 이를 통해 서버로부터 기사 정보를 얻을 수 있다. 반환되는 객체에는 기사와 관련된 4가지 속성(id, name, content 및 children)이 포함되어 있습니다. 루틴은 다음과 같습니다.

function ( id ) { 
var a = getArticle(id); 
document.writeln(a.name + " 
" + a.content); 
}

로그인 후 복사

그러나 동일한 기사 ID로 이 함수를 반복적으로 호출하려면 서버와의 반복적이고 도움이 되지 않는 통신이 필요하다는 것을 알 수 있습니다. 이 문제를 해결하려면 캐싱 기능이 있는 getArticle()과 동일한 getArticleWithCache() 함수 사용을 고려할 수 있습니다. 이 예에서 getArticle()에 의해 반환된 데이터는 전역 변수로만 저장됩니다:

var cache = {}; 
function getArticleWithCache ( id ) { 
if ( !cache[id] ) { 
cache[id] = getArticle(id); 
} 
return cache[id]; 
}

로그인 후 복사

이제 읽은 기사가 캐시되었으므로 backgroundLoad() 함수를 고려해 보겠습니다. 위에서 언급한 캐싱 메커니즘을 사용하여 모든 기사 정보를 로드합니다. 그 목적은 독자가 기사를 읽을 때 배경에서 모든 하위 기사를 미리 로드하는 것입니다. 기사 데이터가 트리 구조로 되어 있기 때문에 트리를 순회하고 모든 기사를 로드하는 재귀 알고리즘을 쉽게 작성할 수 있습니다.

function backgroundLoad ( ids ) { 
for ( var i=0; i < ids.length; i++ ) { 
var a = getArticleWithCache(ids[i]); 
backgroundLoad(a.children); 
} 
}

로그인 후 복사

backgroundLoad ()函数接收一个ID数组作为参数，然后通过每个ID调用前面定义过的getArticldWithCache()方法，这样就把每个ID对应的文章缓存起来。之后再通过已加载文章的子文章ID数组递归调用backgroundLoad()方法，如此整个文章树就被缓存起来。
到目前为止，一切似乎看起来都很完美。然而，只要你有过开发AJAX应用的经验，你就应该知晓这种幼稚的实现方法根本不会成功，这个例子成立的基础是默认 getArticle()用的是同步通信。可是，作为一条基本原则，JavaScript要求在与服务器进行交互时要用异步通信，因为它是单线程的。就简单性而言，把每一件事情（包括GUI事件和渲染）都放在一个线程里来处理是一个很好的程序模型，因为这样就无需再考虑线程同步这些复杂问题。另一方面，他也暴露了应用开发中的一个严重问题，单线程环境看起来对用户请求响应迅速，但是当线程忙于处理其它事情时(比如说调用getArticle())，就不能对用户的鼠标点击和键盘操作做出响应。
如果在这个单线程环境里进行同步通信会发生什么事情呢？同步通信会中断浏览器的执行直至获得通信结果。在等待通信结果的过程中，由于服务器的调用还没有完成，线程会停止响应用户并保持锁定状态直到调用返回。因为这个原因，当浏览器在等待服务器响应时它不能对用户行为作出响应，所以看起来像是冻结了。当执行 getArticleWithCache()和backgroundLoad()会有同样的问题，因为它们都是基于getArticle()函数的。由于下载所有的文章可能会耗费很可观的一段时间，因此对于backgroundLoad()函数来说，浏览器在此段时间内的冻结就是一个很严重的问题——既然浏览器都已经冻结，当用户正在阅读文章时就不可能首先去执行后台预加载数据，如果这样做连当前的文章都没办法读。
如上所述，既然同步通信在使用中会造成如此严重的问题，JavaScript就把异步通信作为一条基本原则。因此，我们可以基于异步通信改写上面的程序。 JavaScript要求以一种事件驱动的程序设计方式来写异步通信程序。在很多场合中，你都必须指定一个回调程序，一旦收到通信响应，这个函数就会被调用。例如，上面定义的getArticleWithCache()可以写成这样：

var cache = {}; 
function getArticleWithCache ( id, callback ) { 
if ( !cache[id] ) { 
callback(cache[id]); 
} else { 
getArticle(id, function( a ){ 
cache[id] = a; 
callback(a); 
}); 
} 
}

로그인 후 복사