데이터 불러오는 bigpipe
2932 단어 소박하다
데이터 불러오는 bigpipe
오늘 페이지에 불러오는 공유를 듣고 빅파이프 모드가 떠올랐습니다. 오늘 관련된 정보를 적어 주세요.
1. 기존 페이지 로드 모드:
사용자가 링크를 눌렀습니다. 서버에 요청을 보냈습니다. 서버가 요청을 받고 페이지에 필요한 모든 자원을 통합한 후 HTTP Response에서 클라이언트에게 전송합니다.브라우저는 데이터를 받고 렌더링을 해석하며 페이지를 보여줍니다. 이것은 단일 라인의 과정입니다.즉, 서버가 데이터를 조직할 때 브라우저는 대기 상태이고 브라우저는 페이지를 렌더링할 때 서버는 유휴 상태이며 자원 낭비이다.인터넷에서 본 생동감 넘치는 예: 식당에 가서 밥을 먹고 네 개의 요리를 주문했다.전통적인 로드 모드, 즉 요리사가 요리를 모두 볶은 후에야 테이블에 내놓는다.
2.bigpipe 로드 모드:
페이지는 몇 개의 모듈로 나뉘어져 있다. 페이지는 서버가 데이터 조직을 할 때도pagelet을 단위로 하고 한 단위의 데이터를 조직하면 클라이언트로 밀어붙이고 클라이언트가 렌더링하여 불러온다.이렇게 하면 서버 측과 브라우저 측이 모두 유휴 상태에 있지 않을 것이다.바로 아까의 예: 요리사가 요리를 하나 볶으면 하나를 내놓는다.
기본 원리를 이해하고 구체적인 실현을 보면 마이크로박을 예로 들 수 있다.
<script>STK && STK.pageletM && STK.pageletM.view({"pid":"pl_business_enterpriseWeiboNew","js":[],"css":[],"html":""})</script>
이것을 예로 들다.pageletM.view 이 방법에서 우리는 구체적으로 실현될 때 패스워드에 대응하는 id를 전달해야 한다는 것을 알 수 있다. 나는 줄곧 id가 html에서 어떤 표지부의 역할을 해야 한다고 생각했다.여기서 그는 어떤 모듈의 id를 표지부로 하고 대응하는 모듈의 html과 css를 조직한다.
구체적인 이 방법은 아직 모색해야 한다. 인터넷에서 유사한 데모를 찾았다.
(function ($) {
//pagelets holder
var pagelets = {};
//bipipe
var bigpipe = function () { this._init.apply(this, arguments); };
bigpipe.prototype = {
_init: function () { },
add: function (let) {
pagelets[let['Name']] = let;
$.getJSON(let['Url'], function (data) {
$('#' + let['Target']).append(let['Template']
.replace('${name}', data['name'])
.replace('${description}', data['description']));
});
}
}
window.client = new bigpipe();
})(jQuery);
저는 오랫동안 jquery를 사용하지 않았습니다. 인터넷에 있는 이 demo는 대략적인 사고방식을 추측할 수 있을 뿐입니다. 다음은 php와 js 두 가지 측면에서 bigpipe의 구체적인 실현을 연구하려고 합니다. 틀림없이 js를 위주로 할 것입니다.