Nodejs는 bigpipe 비동기 로딩 페이지를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Nodejs는 bigpipe 비동기 로딩 페이지를 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:18 PM

nodejs비동기 로딩

빅파이프 소개

HTTP 요청을 줄이고 첫 화면을 빠르게 로드하는 Facebook 최초의 비동기 로딩 페이지 솔루션입니다. 프론트엔드 성능 최적화를 위한 방향입니다.

BigPipe와 AJAX 비교

AJAX는 주로 XMLHttpRequest입니다. 프런트 엔드는 서버에 동적 데이터를 가져와 웹 페이지에 추가하도록 비동기적으로 요청합니다. 이러한 왕복 요청에는 시간이 걸리며 BigPipe 기술은 XMLHttpRequest 요청을 보낼 필요가 없으므로 시간이 절약됩니다. 요청 감소의 또 다른 이점은 서버 로드가 직접적으로 감소한다는 것입니다. 또 다른 차이점은 서버가 AJAX 요청 전에 대기한다는 것입니다. 페이지가 요청 후 대기 중입니다. BIGPIPE는 프런트 엔드와 백 엔드에서 병렬로 작동할 수 있어 효율성도 향상됩니다.

빅파이프의 단점

SEO 문제. Facebook의 동적 디스플레이 콘텐츠는 주로 고객 중심의 개인화된 페이지입니다. SEO에 대한 요구 사항은 높지 않습니다. 그리고 Taobao에서 BIGPIPE 기술을 사용하면 Baidu가 이러한 동적 페이지 검색을 얼마나 잘 지원하는지 잘 모르겠습니다. 실제로 ANGULARJS를 사용하여 데이터를 동적으로 바인딩할 때도 이러한 문제가 발생합니다. , SEO가 필요한 페이지에서는 BIGPIPE 기술을 사용할지 여부를 신중하게 고려해야 합니다. (GOOGLE 검색은 ANGULAR의 SEO에 최적화된 것으로 알려져 있습니다.) Baidu의 경우 -. -아래 사진을 보시면 알 수 있습니다

NODEJS 구현

bigpipe.js 페이지에서 가져온 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>
<div id="test1">loading......</div>
<div id="test2">loading......</div>
<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 기술의 구현은 프론트엔드가 독립적으로 완성될 수 있는 최적화가 될 것입니다. 첫 번째 화면 로딩 시간을 개선합니다. 그리고 전체 웹 페이지의 로딩 시간을 개선하면 조회수를 늘리는 데 일정한 효과가 있을 것입니다.

성명

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

관련 기사

Vercel是什么？怎么部署Node服务？May 07, 2022 pm 09:34 PM

Vercel是什么？本篇文章带大家了解一下Vercel，并介绍一下在Vercel中部署 Node 服务的方法，希望对大家有所帮助！

node.js gm是什么Jul 12, 2022 pm 06:28 PM

gm是基于node.js的图片处理插件，它封装了图片处理工具GraphicsMagick（GM）和ImageMagick（IM），可使用spawn的方式调用。gm插件不是node默认安装的，需执行“npm install gm -S”进行安装才可使用。

火了！新的JavaScript运行时：Bun，性能完爆NodeJul 15, 2022 pm 02:03 PM

今天跟大家介绍一个最新开源的 javaScript 运行时：Bun.js。比 Node.js 快三倍，新 JavaScript 运行时 Bun 火了！

nodejs中lts是什么意思Jun 29, 2022 pm 03:30 PM

在nodejs中，lts是长期支持的意思，是“Long Time Support”的缩写；Node有奇数版本和偶数版本两条发布流程线，当一个奇数版本发布后，最近的一个偶数版本会立即进入LTS维护计划，一直持续18个月，在之后会有12个月的延长维护期，lts期间可以支持“bug fix”变更。

聊聊Node.js中的多进程和多线程Jul 25, 2022 pm 07:45 PM

大家都知道 Node.js 是单线程的，却不知它也提供了多进（线）程模块来加速处理一些特殊任务，本文便带领大家了解下 Node.js 的多进（线）程，希望对大家有所帮助！

node爬取数据实例：聊聊怎么抓取小说章节May 02, 2022 am 10:00 AM

node怎么爬取数据？下面本篇文章给大家分享一个node爬虫实例，聊聊利用node抓取小说章节的方法，希望对大家有所帮助！

深入浅析Nodejs中的net模块Apr 11, 2022 pm 08:40 PM

本篇文章带大家带大家了解一下Nodejs中的net模块，希望对大家有所帮助！

怎么获取Node性能监控指标？获取方法分享Apr 19, 2022 pm 09:25 PM

怎么获取Node性能监控指标？本篇文章来和大家聊聊Node性能监控指标获取方法，希望对大家有所帮助！

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.