时间:2021-05-26
Bigpipe介绍
Facebook首创的一种减少HTTP请求的,首屏快速加载的的异步加载页面方案。是前端性能优化的一个方向。
BigPipe与AJAX的比较
AJAX主要是XMLHttpRequest,前端异步的向服务器请求,获取动态数据添加到网页上。这样的往返请求需要耗费时间,而BigPipe技术并不需要发送XMLHttpRequest请求,这样就节省时间损耗。减少请求带来的另一个好处就是直接减少服务器负载。还有一个不同点就是AJAX请求前服务器在等待。请求后页面在等待。BIGPIPE可以前后端并行工作也带来了效率上的提升。
Bigpipe缺点
SEO问题。Facebook的动态展现内容主要是面向客户的个性页面。对于SEO的要求并不高。而如果把BIGPIPE技术用到淘宝上的话SEO的问题就会明显了,现在不确定百度对于这种动态页面的搜索支持度如何,其实在使用ANGULARJS动态绑定数据的时候也会有这方面的问题所以对于SEO有需求的页面需要慎重考虑是否使用BIGPIPE技术。(已知GOOGLE搜索对于ANGULAR的SEO有优化。)至于百度么-。-看下图就知道了
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技术的实现将会是前端可以独立完成的一个优化。提高首屏加载时间。并且提高整个网页的加载时间,对于浏览量的提升会带来一定效果的。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
AndroidListView异步加载图片错位、重复、闪烁分析以及解决方案,具体问题分析以及解决方案请看下文。我们在使用ListView异步加载图片的时候,在快
js异步加载的4种方式,点评开始。方案1:$(document).ready$(document).ready(function(){alert("加载完成!"
局部刷新页面、异步加载页面方案:1.在jsp页面需要刷新的地方增加一个控件2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容)3.将id为cours
本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下:几种加载js的方式同步加载异步加载延迟加载同步加载用的最多的一种方式,又称阻塞模式,会阻止浏览器的
最近研究了vue性能优化,涉及到vue异步组件和懒加载。一番研究得出如下的解决方案。原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件