README

Bigpipe 是由Facebook最初创建的功能：BigPipe：高性能的网页管道。其基本思想是将网页拆分为小的可重复使用的功能块，称为Pagelets，并将它们分离到Web服务器和浏览器中的各种执行阶段。这可以实现渐进式前端渲染，从而实现卓越的前端性能。

我们的库代码

大多数Web框架基于请求和响应模式，一个请求到达，我们处理模型的数据和输出。但在我们可以发布模型之前，我们必须等待所有数据在模型处理之前已经接收。当你收到第一批数据时，为什么不直接将其发送到浏览器，以便它可以开始下载所需的CSS、JavaScript并处理它们呢。

通过composer安装（推荐）

composer create-project wkeller/bigpipe-pipeline

使用方法

• addContent() （向某些DOM元素添加内容）
• addCss() （向页面头部添加CSS）
• addJS() （向页面底部添加JavaScript文件）
• addJsScript() （添加内联JavaScript内容）

一些工作示例

添加静态文本内容

// Initiate Pagelet (creates new div with ID)
$element = new Pagelet('static-text');

// Adding the text content inside of the DIV element
$element->addContent('Static text content inside of the "static-text" DIV element.');

// Priting Pagelet element
echo $element;

添加外部文件：可加载的文件：PHP、HTML等。

// Initiate Pagelet (creates new div with ID)
$element = new Pagelet('it-is-a-file');

// Adding the content of the file inside of the DIV element
$element->addContent('path/to/file/filename.php', true);

// Priting Pagelet element
echo $element;

添加CSS到头部

// Initiate Pagelet
$element = new Pagelet('css');
        
// Adding style files to the head
$pagelet->addCss([
  'path/to/file/style.css',
  'path/to/file/fonts.css'
]);

// Priting Pagelet element
echo $element;

将JavaScript文件添加到页面底部

// Initiate Pagelet
$element = new Pagelet('javascript');
        
// Adding JavaScript files to the footer
$pagelet->addJS([
  'path/to/file/jQuery.js',
  'path/to/file/script.js'
]);

// Priting Pagelet element
echo $element;

添加内联JavaScript内容

// Initiate Pagelet
$element = new Pagelet('javascript-inline');
        
// Adicionando javascript inline
$pagelet->addJsScript("$('static-text').innerHTML = 'Changing static content';");

// Priting Pagelet element
echo $element;

优先级

在BigPipe中，JavaScript资源比CSS和页面内容具有较低的优先级。因此，BigPipe不会在页面上的所有Pagelets显示之前开始下载任何Pagelets的JavaScript。

有了这个，你可以设置你要加载的Pagelets的优先级。假设你希望将你的页脚内容作为最后一个内容加载

// Initiate Pagelet
$element = new Pagelet('footer', null, 30);
        
// Adding JavaScript files to the footer
$pagelet->addJS(['path/to/file/footer.js']);

// Adding the text content inside of the DIV element
$element->addContent('Footer content goes here.');

// Priting Pagelet element
echo $element;

在这种情况下，footer的优先级将是30。所有在此数字之前的Pagelets都将首先加载。

贡献

想要为这个扩展做出贡献？最快的方式是在GitHub上打开一个pull request。

支持

如果你遇到任何问题或错误，请在GitHub上打开一个问题。需要帮助设置或想要定制此扩展以满足您的业务需求？请打开一个问题，如果我们的想法不错，我们将添加一个功能。