nodejs가 페이지를 비동기적으로 로딩하는 bigpipe를 구현하는 방법
이 글은 페이지의 비동기 로딩을 구현하기 위해 nodejs와 결합된 솔루션을 공유합니다. 이는 또한 향후 프런트엔드 성능 최적화를 위한 방향이기도 합니다.
Bigpipe를 소개합니다
HTTP 요청을 줄이고 첫 화면을 빠르게 로드하는 Facebook 최초의 비동기 로딩 페이지 솔루션입니다. 프론트엔드 성능 최적화를 위한 방향입니다.
BigPipe와 AJAX의 비교
AJAX는 주로 XMLHttpRequest입니다. 프런트 엔드는 서버에 비동기적으로 동적 데이터를 가져와 웹 페이지에 추가하도록 요청합니다. 이러한 왕복 요청에는 시간이 걸리며 BigPipe 기술은 XMLHttpRequest 요청을 보낼 필요가 없으므로 시간이 절약됩니다. 요청 감소의 또 다른 이점은 서버 로드가 직접적으로 감소한다는 것입니다. 또 다른 차이점은 서버가 AJAX 요청 전에 대기한다는 것입니다. 페이지가 요청 후 대기 중입니다. BIGPIPE는 프런트 엔드와 백 엔드에서 병렬로 작동할 수 있어 효율성도 향상됩니다.
빅파이프의 단점
SEO 문제. Facebook의 동적 디스플레이 콘텐츠는 주로 고객 중심의 개인화된 페이지입니다. SEO에 대한 요구 사항은 높지 않습니다. 그리고 Taobao에서 BIGPIPE 기술을 사용하면 Baidu가 이러한 동적 페이지 검색을 얼마나 잘 지원하는지 잘 모르겠습니다. 실제로 ANGULARJS를 사용하여 데이터를 동적으로 바인딩할 때도 이러한 문제가 발생할 것입니다. , SEO가 필요한 페이지에서는 BIGPIPE 기술을 사용할지 여부를 신중하게 고려해야 합니다. (GOOGLE 검색은 ANGULAR의 SEO에 최적화된 것으로 알려져 있습니다.) 바이두의 경우 -. - 아래 그림을 보세요
NODEJS 구현
js가 소개하는 bigpipe.js 페이지
var Bigpipe=function(){
this.callbacks={};
}
Bigpipe.prototype.ready=function(key,callback){
if(!this.callbacks[key]){
this.callbacks[key]=[];
}
this.callbacks[key].push(callback);
}
Bigpipe.prototype.set=function(key,data){
var callbacks=this.callbacks[key]||[];
for(var i=0;i<callbacks.length;i++){
callbacks[i].call(this,data);
}
}app.js 서버 코드
var express = require('express');
var path = require('path');
var http = require('http');
var ejs = require('ejs');
var app = express();
app.set('port', process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, 'public')));
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.get('/index.html', function (req, res) {
res.render('index', { title: "测试" }, function (err, str) {
res.write(str)
})
var Pagelets_list ={
pagelet1:false,
pagelet2:false
}
var data = {is: "true"};
function is_end(Pagelets) {
Pagelets_list[Pagelets]=true;
for (x in Pagelets_list) {
if(!Pagelets_list[x]){
return;
}
}
res.end();
return;
}
function Pagelets(Pagelets) {
res.write('<script>bigpipe.set("' + Pagelets + '",' + JSON.stringify(data) + ');</script>');
is_end(Pagelets)
}
setTimeout(function(){Pagelets("pagelet1");},1000);
setTimeout(function(){Pagelets("pagelet2");},3000);
});
http.createServer(app).listen(3000);index.html 프론트엔드 코드
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>zchq88-bigpipe</title>
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p id="test1">loading......</p>
<p id="test2">loading......</p>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.0-rc.0/angular.min.js"></script>
<script src="/js/bigpipe.js"></script>
<script>
var bigpipe=new Bigpipe();
bigpipe.ready('pagelet1',function(data){
$("#test1").html("test1 ready");
})
bigpipe.ready('pagelet2',function(data){
$("#test2").html("test2 ready");
})
</script>
</body>
</html>요약
사실 Bigpipe 기술의 구체적인 구현에는 서버 코드의 협력이 필요하다고 생각합니다. 개발 중에는 기능이 20%, 최적화가 작업량의 80%를 차지하는 경우가 많습니다. 개발보다 더 어렵습니다. 전체 스택에 대한 이해도 필요합니다. 그래서 지금은 프론트엔드와 백엔드를 분리하는 중간 레이어인 nodejs가 개인적으로 더 합리적이라고 생각하는 솔루션입니다. 프론트엔드와 백엔드가 nodejs의 중간 계층 분리를 완성한다면 Bigpipe 기술의 구현은 프론트엔드가 독립적으로 완성될 수 있는 최적화가 될 것입니다. 첫 번째 화면 로딩 시간을 개선합니다. 그리고 전체 웹 페이지의 로딩 시간을 개선하면 조회수를 늘리는 데 일정한 효과가 있을 것입니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
node.js가 fs 모듈을 기반으로 시스템 파일과 디렉터리를 읽고 쓰는 방법에 대해
postgreSQL에 연결하고 데이터 작업 수행하는 Node.js 소개
위 내용은 nodejs가 페이지를 비동기적으로 로딩하는 bigpipe를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7503
15
1377
52
78
11
52
19
19
54
nodejs는 백엔드 프레임워크인가요?
Apr 21, 2024 am 05:09 AM
Node.js는 고성능, 확장성, 크로스 플랫폼 지원, 풍부한 생태계, 개발 용이성 등의 기능을 제공하므로 백엔드 프레임워크로 사용할 수 있습니다.
nodejs를 mysql 데이터베이스에 연결하는 방법
Apr 21, 2024 am 06:13 AM
MySQL 데이터베이스에 연결하려면 다음 단계를 따라야 합니다. mysql2 드라이버를 설치합니다. mysql2.createConnection()을 사용하여 호스트 주소, 포트, 사용자 이름, 비밀번호 및 데이터베이스 이름이 포함된 연결 개체를 만듭니다. 쿼리를 수행하려면 Connection.query()를 사용하세요. 마지막으로 Connection.end()를 사용하여 연결을 종료합니다.
nodejs 설치 디렉토리에 있는 npm과 npm.cmd 파일의 차이점은 무엇입니까?
Apr 21, 2024 am 05:18 AM
Node.js 설치 디렉터리에는 npm과 npm.cmd라는 두 가지 npm 관련 파일이 있습니다. 차이점은 다음과 같습니다. 확장자가 다릅니다. npm은 실행 파일이고 npm.cmd는 명령 창 바로 가기입니다. Windows 사용자: npm.cmd는 명령 프롬프트에서 사용할 수 있으며, npm은 명령줄에서만 실행할 수 있습니다. 호환성: npm.cmd는 Windows 시스템에만 해당되며 npm은 크로스 플랫폼에서 사용할 수 있습니다. 사용 권장사항: Windows 사용자는 npm.cmd를 사용하고, 기타 운영 체제는 npm을 사용합니다.
nodejs와 java 사이에 큰 차이가 있나요?
Apr 21, 2024 am 06:12 AM
Node.js와 Java의 주요 차이점은 디자인과 기능입니다. 이벤트 중심 대 스레드 중심: Node.js는 이벤트 중심이고 Java는 스레드 중심입니다. 단일 스레드 대 다중 스레드: Node.js는 단일 스레드 이벤트 루프를 사용하고 Java는 다중 스레드 아키텍처를 사용합니다. 런타임 환경: Node.js는 V8 JavaScript 엔진에서 실행되는 반면 Java는 JVM에서 실행됩니다. 구문: Node.js는 JavaScript 구문을 사용하고 Java는 Java 구문을 사용합니다. 목적: Node.js는 I/O 집약적인 작업에 적합한 반면, Java는 대규모 엔터프라이즈 애플리케이션에 적합합니다.
nodejs는 백엔드 개발 언어인가요?
Apr 21, 2024 am 05:09 AM
예, Node.js는 백엔드 개발 언어입니다. 서버 측 비즈니스 로직 처리, 데이터베이스 연결 관리, API 제공 등 백엔드 개발에 사용됩니다.
nodejs와 npm의 관계는 무엇입니까?
Apr 21, 2024 am 06:09 AM
Node.js는 JavaScript 런타임 환경이고 npm은 패키지 관리자입니다. 두 가지가 함께 작동하여 개발자는 JavaScript로 서버 측 프로그램을 작성하고, 타사 모듈을 사용하고, 모듈을 쉽게 관리할 수 있습니다.
nodejs를 mycat에 연결하는 방법
Apr 21, 2024 am 06:16 AM
Node.js에서 MyCAT을 연결하는 단계: mycat-ts 종속성을 설치합니다. 연결 풀을 생성하고 호스트, 포트, 사용자 이름, 비밀번호 및 데이터베이스를 지정합니다. SQL 쿼리를 실행하려면 쿼리 메서드를 사용하세요. 연결 풀을 닫으려면 close 메소드를 사용하십시오.
nodejs는 어떤 프로젝트에 적합합니까?
Apr 21, 2024 am 05:45 AM
Node.js는 다음 프로젝트 유형에 적합합니다. 네트워크 및 서버 애플리케이션 이벤트 중심 애플리케이션 실시간 애플리케이션 데이터 집약적 애플리케이션 명령줄 도구 및 스크립트 경량 마이크로서비스
