BigPipe要点

最新推荐文章于 2022-03-18 09:35:19 发布

frivol

最新推荐文章于 2022-03-18 09:35:19 发布

阅读量634

点赞数

分类专栏： Web前端文章标签： Web前端

本文链接：https://blog.csdn.net/frivol/article/details/17469861

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BigPipe是facebook的研究科学家Changhao Jiang发明的一种快速加载网页的方法。

1. 页面分块（pagelet）

2. 服务端先输出给客户端一个不完整的框架性的HTML页面（没有结尾的</body>），里面有表示分块的占位符（比如空的div）

3. 服务端可以并发地生成每个pagelet的内容，每生成完一个立即flush回浏览器（flush的内容为JS），页面可以立即执行

3.1 生成JS而不是HTML，可以不必受页面顺序的限制，任何一个pagelet都可以先返回。

4. BigPipe对搜索引擎不友好，出于SEO的考虑，如果服务器判断user-agent为爬虫，或浏览器不支持JS，则用普通方式输出。

服务端代码例子如下：（来自：http://my.oschina.net/hanshubo/blog/130713）

在使用队列方面没有仔细斟酌，随便找一个过来，就用了。
注意一点，就是不要把 PrintWriter 的实例对象拿到多线程里去用，否则会出莫名其妙的异常。

import java.io.IOException;
import java.io.PrintWriter;
import java.util.concurrent.ArrayBlockingQueue;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class BigPipeServlet extends HttpServlet {

    private static ExecutorService executor = Executors.newFixedThreadPool(50);

    public void service(HttpServletRequest request, HttpServletResponse response) throws IOException {
        final ArrayBlockingQueue<String> q = new ArrayBlockingQueue<String>(6);

        for (int i = 0; i < 6; i++) {
            final int id = i + 1;

            executor.execute(new Runnable() {
                public void run() {
                    try {
                        Thread.sleep((int) (Math.random() * 10000));
                        q.put(pagelet("content" + id, "Wohooo" + id));
                    } catch (InterruptedException e) {
                    }
                }
            });
        }

        response.setContentType("text/html;charset=gb2312");
        PrintWriter out = response.getWriter();
        out.println("<html><head>"
                        + "<script type=\"text/javascript\">function arrived(id,text) { var b=document.getElementById(id); b.innerHTML = text; }</script>"
                        + "</head><body>" + "<div>Progressive Loading");
        content(out, "content1", "content2", "content3", "content4", "content5", "content6");
        out.println("</div>");

        for (int i = 0; i < 6; i++) {
            try {
                out.println(q.take());
                out.flush();
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }

        out.println("</body></html>");
    }

frivol

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BigPipe要点

BigPipe是facebook发明的一种快速加载网页的方法。1. 页面分块（pagelet）2. 服务端先输出给客户端一个框架性的HTML页面，里面有表示分块的占位符（比如空的div）3. 服务端可以并发地生成每个pagelet的内容，每生成完一个立即flush回浏览器（flush的内容为JS），页面可以立即执行3.1 生成JS而不是HTML，可以不必受页面顺序的限制，任
复制链接

扫一扫

专栏目录