如何减少前端异步请求的数量

发表于 5年以前 | 总阅读数：993 次

开发模式

在前端开发中，一条很重要的优化原则就是减少HTTP请求数。但在实际开发中，有时候不得不用大量的异步请求。这里的异步请求所指的都是页面加载时的，之后用户操作过程中所发生的异步请求并不影响加载的速度。

在百度这边，由于FE需要写模板。所以很多时候有些功能如果有接口了，RD同学就要你使用异步接口。但异步接口使用多了就会影响页面的性能。比如说百度空间个人中心在页面加载时差不多要处理10个异步请求。这个数量是非常大的。如果减少这些异步请求的数量成为了优化的重点之重。

实现方案

目前想到一条比较可行的实现方案是通过一个公用的代理页面，前端在处理时将这些异步请求分组去处理。代理页面获取到打包的URL，然后服务器端去请求，最后将合并后的数据输出。

在服务器端去请求，由于数据是服务器对服务器的，数据网络传输时间可以忽略不计。

实现代码

if (typeof Space == 'undefined') window.Space = {};
    Space.asynJs = function() {
        var _isStart = false,
            stack = [];

        function start() {
            if (_isStart) {
                throw new Error('asynJs request is start.');
                return false;
            }
            _isStart = true;
            for (var i = 0, len = stack.length; i < len; i++) {
                if (!stack[i]) continue;
                //如果该组只有一条记录，就不用走通用代理了。
                if (stack[i].length == 1) {
                    baidu.sio.callByServer(decodeURIComponent(url));
                } else {
                    var url = 'url[]=' + stack[i].join('&url[]=');
                    baidu.page.loadJsFile('http://hi.baidu.com/st/asynproxy.php?' + url);
                }
            }
        }

        function load(url, group) {
            group = group | 0;
            !stack[group] && (stack[group] = []);
            stack[group].push(encodeURIComponent(url));
        }
        return {
            load: load,
            start: start
        }
    }()

该实现方式就是提供了2个方法load和start，load用于填充要请求的异步接口，start在页面底部启动请求。因为页面一般都分成头，中，尾3个部分，所以start方法可以在尾部文件里直接调用就可以了。

Space.asynJs.load('http://pageurl1', 1)
    Space.asynJs.load('http://pageurl2', 1)
    Space.asynJs.load('http://pageurl3', 2)
    //在页面最底部启动请求
    Space.asynJs.start();

PHP端的实现

<?php
     //url is array
    $urls = $_GET['url'];
    //经过白名单过滤后的URL
    $urls = apply_domain_filter($urls);
    //实例化Curl类
    $curl = new Curl();
    $contents = array();
    //这里实现的时候可以使用并发处理
    foreach($urls as $url){
    //需要配置对应URL的transmit
    //请求时带上传递过来的Cookie
    $contents[] = $curl->get($url, $_COOKIE);
    }
    echo join(';', $contents);
    ?>

额外的收益

目前一些框架(tangram)里domready时执行一些函数时并没有提供函数排序的功能，这样就不能实现重要的异步请求先加载不重要的请求后加载的功能。目前百度空间app平台这边实现方式是通过setTimeout延时来执行。如果设置的时间较短，各个浏览器表现的不一样。如果设置的时间比较长，有会影响页面加载的时间。

通过现在的这种方式后，不光实现了异步接口分组的功能，同时实现了重要的先加载，不重要的后加载。先加载的东西只要第二个参数传值小一些就可以了。