澳门777娱乐官方 通讯企业 使用的也是我们常见的性能优化方案澳门pt777网址:,接下来我们看看Sonic这个开源库到底是一个什么样的实现原理

使用的也是我们常见的性能优化方案澳门pt777网址:,接下来我们看看Sonic这个开源库到底是一个什么样的实现原理



摘要VasSonic取名于Sony动漫形象音速小子,是TencentQQ会员
VAS团队研究开发的叁个轻量级的高品质的Hybrid框架,潜心于进步页面首屏加载速度,完美支持静态直出页面和动态直出页面,包容离线包等方案。二〇一七年4月8日正式开源!基本介绍VasSonic取名于Sony动漫形象音速小子,是TencentQQ会员
VAS团队研究开发的一个轻量级的高质量的Hybrid框架,静心于进步页面首屏加载速度,完美支持静态直出页面和动态直出页面,宽容离线包等方案。这几天QQ会员、QQ购物、QQ钥匙包、企鹅电子竞赛等业务曾经在行使,平均日均PV在1.2亿以上,况兼这一个数字还在急忙增进。接入VasSonic后第二次张开药方可在带头化应用程式的时候相互诉求页面能源,而且存有边加载边渲染的力量。非第2回展开时,应用程式能够连忙加载上次开荒动态缓存在本地的页面资源,然后动态刷新页面。Tencent手提式有线电话机QQ通过VasSonic框架使得页面首屏耗时平均低于1S以下。使用前后相比(BlackBerry奥迪Q59机器,3G条件State of Qatar使用Sonic情势前:使用Sonic方式后:VasSonic成效特色近年来VasSonic框架是市道上援助但是完善的Hybrid框架,完美适用于静态直出页面和动态直出页面。具备以下几大特点:飞快:VasSonic通过中间层运行子线程并发拉取页面主能源和流式拦截的方法,补助内核边加载边渲染,弱化终端早先化进程耗费时间的熏陶,同不平日候对页面进行动态缓存和增量更新,收缩页面对互连网数据传输的依附,极速升高H5页面包车型大巴加载速度。省流量:VasSonic援救动态缓存页面内容,通过顾客端和服务端听从一定的格式规范,每一遍央求仅要求回到变动的数目块数据,大大降低响应数据传输。突出的客户体验:通过预推送以至动态缓存页面,VasSonic先加载当地缓存页面,客户能够急迅见到内容,纵然在无网络场景下,还是可以来看首屏内容,让H5页面包车型地铁体验越来越雷同原生。易用:VasSonic框架来自TencentVAS团队超越一年的优化提速总括,它是一站式技术方案,能够飞快在Android和iOS平台上连片使用,并且后台补助Node.js和PHP平台一键安排,无须繁杂配置流程。源码托管地址
started with AndroidGetting started with iOSGetting started with
Node.jsGetting started with PHPDemo下载Hereis the Android sample
demo.Hereis the iOS sample demo.

源码托管地址

https://github.com/Tencent/vassonic

4、参考

https://github.com/Tencent/VasSonic/blob/master/sonic-android/docs/Sonic%20Quick%E6%A8%A1%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86.md

感激阅读,有如何难题,能够给本人留言

SessionID

各样sessionID独一钦定了贰个SonicSession,sessionID的转移准绳如下:

NSString *sonicSessionID(NSString *url)
{
    if ([[SonicClient sharedClient].currentUserUniq length] > 0) {
        return stringFromMD5([NSString stringWithFormat:@"%@_%@",[SonicClient sharedClient].currentUserUniq,sonicUrl(url)]);
    }else{
        return stringFromMD5([NSString stringWithFormat:@"%@",sonicUrl(url)]);
    }
}

各类url都能独一的明确一个sessionID,供给注意的是,算md5的时候并非直接拿乞求的url来算的,而是先通过了sonicUrl的函数的拍卖。通晓sonicUrl对url的管理推动大家询问VasSonic的session管理机制。

其实sonicUrl做的职业比较轻易。

  • 对此平日的url来讲,sonicUrl会只保留scheme、host和path,url其余部分的退换不会成立新的session
  • 新增了sonic_remain_params参数,sonic_remain_params中间钦点的query参数区别会创设新的session。

举栗表达:

// output: @"https://www.example.com"
sonicUrl(@"https://www.example.com")

// output: @"https://www.example.com"
sonicUrl(@"https://www.example.com:8080") 

// output: @"https://www.example.com"
sonicUrl(@"https://www.example.com/?foo=foo")  

// output: @"https://www.example.com/path"
sonicUrl(@"https://www.example.com/path?foo=foo")

// output @"https://www.example.com/path/foo=foo&"
sonicUrl(@"https://www.example.com/path?foo=foo&bar=bar&sonic_remain_params=foo")

sonicUrl的代码也比较轻松,这里就不贴了,风乐趣的同校能够参见这里sonicUrl实现。

看叁个开源库,作者平日会摸清楚其类档案的次序关系,从总体把握其组件,然后在抽茧剥丝。不然会像走入二个迷宫,有种“只在那山中,神龙见首不见尾”的痛感。

VasSonic成效特色

如今VasSonic框架是市道上帮衬但是完备的Hybrid框架,完美适用于静态直出页面和动态直出页面。

全体以下几大特点:

快速:VasSonic通过中间层运维子线程并发拉取页面主能源和流式拦截的不二诀窍,扶助内核边加载边渲染,弱化终端初阶化进程耗费时间的熏陶,同期对页面进行动态缓存和增量更新,减弱页直面网络数据传输的依据,极速提高H5页面的加载速度。

省流量:VasSonic扶持动态缓存页面内容,通过顾客端和服务端遵守一定的格式标准,每趟央求仅需求回到变动的多少块数据,大大裁减响应数据传输。

美好的客商体验:透过预推送甚至动态缓存页面,VasSonic先加载本地缓存页面,顾客能够相当的慢看见内容,纵然在无网络场景下,仍旧能来看首屏内容,让H5页面包车型客车体验越来越相像原生。

易用:VasSonic框架来自TencentVAS团队超越一年的优化提速总计,它是一条龙化解方案,能够火速在Android和iOS平台上连片使用,何况后台接济Node.js和PHP平台一键铺排,无须繁杂配置流程。

(4)SonicJavaScriptInterface的实现

以此类依照本人景况,假若用了jsbridge等库,则那个类不用完成。

缓存管理

SonicSession依照要求响应头中cache-offline回来的仓库储存计谋的不平等会有两样的管理,Sonic定义了如下两种离线存款和储蓄的攻略。

/**
 * 存储但不刷新页面
 */
#define SonicHeaderValueCacheOfflineStore  @"store"
/**
 * 存储而且刷新页面
 */
#define SonicHeaderValueCacheOfflineStoreRefresh   @"true"
/**
 * 不存储但刷新页面
 */
#define SonicHeaderValueCacheOfflineRefresh  @"false"
/**
 * Sonic模式关闭,并在接下来6个小时内不再使用
 */
#define SonicHeaderValueCacheOfflineDisable   @"http"

当SonicSession在发起倡议之后要求管理地点有缓存和尚未缓存三种情状。

1. SonicURLProtocol

来看SonicURAV4LProtocol那个类,大家登时就能够联想到Foundation库的NSU讴歌MDXLProtocol类,客商能够因此子类化NSUEnclaveLProtocol类来对上层的UWranglerLRequest诉求做阻止,并依照本人的须求处境做定制化响应管理。具体介绍详见iOS
开辟中动用 NSUCR-VLProtocol 拦截 HTTP
诉求。SonicU翼虎LProtocol利用那一个原理来对UIWebView的央浼进行拦阻,完结自定义页面数据加载和缓存。

SonicUTiggoLProtocol有多少个入眼的方法:

+ (BOOL)canInitWithRequest:(NSURLRequest *)request
{    
 NSString *value = [request.allHTTPHeaderFields objectForKey:SonicHeaderKeyLoadType];
 if (value.length != 0 && [value isEqualToString:SonicHeaderValueWebviewLoad]) {
     NSString * delegateId = [request.allHTTPHeaderFields objectForKey:SonicHeaderKeyDelegateId];
     if (delegateId.length != 0) {
         NSString * sessionID = sonicSessionID(request.URL.absoluteString);
         SonicSession *session = [[SonicEngine sharedEngine] sessionWithDelegateId:delegateId];
         if (session && [sessionID isEqualToString:session.sessionID]) {
             return YES;
         }
       ...
     }
 }
 return NO;
}

其一措施重写了NSU普拉多LProtocol类的不二诀窍,主要过滤须求拦截的诉求,唯有那一个法子重返YES大家才具够世袭三番六回的管理。通过那个主意的实现里面举办倡议的过滤,筛选出webView的互联网央浼举办拍卖的号令。约等于央浼头中富含key值SonicHeaderKeyLoadType对应的值为SonicHeaderValueWebviewLoad的NSU昂科威LRequest要求被拦截。

紧接着会依照央求头中的delegate去SonicEngine中找找SonicSession,假若找到了对应的SonicSession,接下去会对这些request举办阻挠。
那么SonicSession是如何时候被早先化并登记到SonicEngine中的呢?前边大家会实行讲明。

上面我们后续看第4个方法,代码如下:

- (void)startLoading 
{    
 NSThread *currentThread = [NSThread currentThread];

 NSString *sessionID = [self.request valueForHTTPHeaderField:SonicHeaderKeySessionID];

 __weak typeof(self) weakSelf = self;

 [[SonicEngine sharedEngine] registerURLProtocolCallBackWithSessionID:sessionID completion:^(NSDictionary *param) {

     [weakSelf performSelector:@selector(callClientActionWithParams:) onThread:currentThread withObject:param waitUntilDone:NO];

 }];
}

本条点子是在伏乞开端的时候,会被实践。这里做的主要操作是挂号了回调,也正是哀求截至再次来到结果后作出相应的操作。主题操作是回调了callClientActionWithParams,约等于大家将在展现的第五个格局,代码如下:

 - (void)callClientActionWithParams:(NSDictionary *)params
{
   SonicURLProtocolAction action = [params[kSonicProtocolAction]integerValue];
   switch (action) {
       case SonicURLProtocolActionRecvResponse:
       {
           NSHTTPURLResponse *resp = params[kSonicProtocolData];
           [self.client URLProtocol:self didReceiveResponse:resp cacheStoragePolicy:NSURLCacheStorageNotAllowed];
       }
           break;
       case SonicURLProtocolActionLoadData:
       {
           NSData *recvData = params[kSonicProtocolData];
           if (recvData.length > 0) {
               [self.client URLProtocol:self didLoadData:recvData];
           }
       }
           break;
       case SonicURLProtocolActionDidSuccess:
       {
           [self.client URLProtocolDidFinishLoading:self];
       }
           break;
       case SonicURLProtocolActionDidFaild:
       {
           NSError *err = params[kSonicProtocolData];
           [self.client URLProtocol:self didFailWithError:err];
       }
           break;
   }
}

能够见到依据重临的比不上的Action作出相应的拍卖。这里最首要是把多少传回乞请发起者client(这里正是UIWebView),帮衬其准确渲染。

能够看出这一个类和大家日常使用相像,主要正是阻挡浏览器的乞请,然后自定义诉求得到数码重临给浏览器,实行渲染。

利用前后相比较(金立 Highlander9机器,3G情况卡塔尔(قطر‎

使用Sonic模式前:

使用Sonic模式后:

澳门pt777网址 1

(2) SonicRuntime 的实现

public class SonicRuntimeImpl extends SonicRuntime {

        public SonicRuntimeImpl(Context context) {
            super(context);
        }

        /**
         * 获取用户UA信息,这里的返回值会放在header的UserAgent中
         * @return
         */
        @Override
        public String getUserAgent() {
            return "";
        }

        /**
         * 获取用户ID信息,避免多个用户切换可能使用到相同的缓存
         * @return
         */
        @Override
        public String getCurrentUserAccount() {
            return "sonic-demo-master";
        }

        @Override
        public String getCookie(String url) {
            CookieManager cookieManager = CookieManager.getInstance();
            return cookieManager.getCookie(url);
        }

        @Override
        public void log(String tag, int level, String message) {
            switch (level) {
                case Log.ERROR:
                    Log.e(tag, message);
                    break;
                case Log.INFO:
                    Log.i(tag, message);
                    break;
                default:
                    Log.d(tag, message);
            }
        }

        @Override
        public Object createWebResourceResponse(String mimeType, String encoding, InputStream data, Map<String, String> headers) {
            WebResourceResponse resourceResponse =  new WebResourceResponse(mimeType, encoding, data);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                resourceResponse.setResponseHeaders(headers);
            }
            return resourceResponse;
        }

        @Override
        public void showToast(CharSequence text, int duration) {

        }

        @Override
        public void notifyError(SonicSessionClient client, String url, int errorCode) {

        }
        // 这里可以设置某个url是否为SonicUrl,如果指定为不是,则不会通过Sonic的方式加载url。
        @Override
        public boolean isSonicUrl(String url) {
            return true;
        }

        @Override
        public boolean setCookie(String url, List<String> cookies) {
            if (!TextUtils.isEmpty(url) && cookies != null && cookies.size() > 0) {
                CookieManager cookieManager = CookieManager.getInstance();
                for (String cookie : cookies) {
                    cookieManager.setCookie(url, cookie);
                }
                return true;
            }
            return false;
        }
        // 判断网络连接情况
        @Override
        public boolean isNetworkValid() {
            return true;
        }

        @Override
        public void postTaskToThread(Runnable task, long delayMillis) {
            Thread thread = new Thread(task, "SonicThread");
            thread.start();
        }

        @Override
        public File getSonicCacheDir() {
            if (BuildConfig.DEBUG) {
                String path = Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + "sonic/";
                File file = new File(path.trim());
                if(!file.exists()){
                    file.mkdir();
                }
                return file;
            }
           return super.getSonicCacheDir();
        }

        @Override
        public String getHostDirectAddress(String url) {
            return null;
        }
    }

缓存设计

话十分少说,接下去大家看看Sonic那几个开源库到底是三个什么的贯彻原理,首先给大家奉上Sonic的GitHub地址
点我

主干介绍

VasSonic取名于Sony动漫形象音速小子,是TencentQQ会员
VAS团队研究开发的四个轻量级的高质量的Hybrid框架,潜心于进步页面首屏加载速度,完美扶植静态直出页面和动态直出页面,宽容离线包等方案。近来QQ会员、QQ购物、QQ钱包、企鹅电子游艺比赛等事务已经在接受,平均日均PV在1.2亿上述,何况那些数字还在快捷拉长。

连接VasSonic后第叁回打开药方可在初步化APP的时候相互央求页面财富,何况具有边加载边渲染的技巧。非第一回打开时,APP能够火速加载上次开发动态缓存在本地的页面能源,然后动态刷新页面。腾讯手提式有线电话机QQ通过VasSonic框架使得页面首屏耗费时间平均低于1S以下。

(5)相关代码插入

第一是SonicEngine的初步化:

//这段代码可以放在Activity或者Application的onCreate方法中

if (!SonicEngine.isGetInstanceAllowed()) {
            SonicEngine.createInstance(new SonicRuntimeImpl(getApplication()), new SonicConfig.Builder().build());
        }

随着假如要扩充事情发生前的加载:

    SonicSessionConfig sessionConfig = new SonicSessionConfig.Builder().build();
    boolean preloadSuccess = SonicEngine.getInstance().preCreateSession(DEMO_URL, sessionConfig);

之后:

    sonicSession = SonicEngine.getInstance().createSession(url, sessionConfigBuilder.build());
            if (null != sonicSession) {
                sonicSession.bindClient(sonicSessionClient = new SonicSessionClientImpl());
            } else {
                // this only happen when a same sonic session is already running,
                // u can comment following codes to feedback as a default mode.
                throw new UnknownError("create session fail!");
            }
最后当webview相关代码书写完成后调用如下:

    if (sonicSessionClient != null) {
            sonicSessionClient.bindWebView(webView);
            sonicSessionClient.clientReady();
        } else { // default mode
            webView.loadUrl(url);
        }

VasSonic解决哪些难点

至于WebView为啥张开慢、加载慢,产业界已经有大多剖判了,结论也是相比较相像的,推荐美团点评工夫集团的WebView品质、体验剖判与优化,Tencent关于VasSonic的官方小说也可能有连带表明。

WebView加载慢的标题主要性汇聚在如下多少个阶段:

  1. WebView打开
  2. 页面能源加载
  3. 数据更新引致页面刷新

VasSonic的优化皆觉得了加快上述八个级次,其经历得以计算为七个方面。

  • WebView池:预先起头化WebView
  • 静态直出:服务端拉取数据渲染达成后,通过CDN加速访问
  • 离线预推:离线包方案
  • 互相加快:WebView的开辟和能源的号召并行
  • 动态缓存:动态页面缓存在顾客端,客商后一次展开的时候先张开缓存页面,然后再刷新
  • 状态抽离:为了进步体验,将页面分为静态模板和动态数据,达成部分刷新
  • 预加载:在张开页面早前将财富数量都打算好,升高页面张开的进度

能够算得特别完美了,具体细节能够参照Tencent祭出大招VasSonic,让您的H5页面首屏秒开!。

上述优化的宗旨本被害者要涉嫌多少个地方:

  • WebView池
  • 缓存设计
  • 能源央求和WebView抽离设计
  • 动静抽离设计

上边结合代码来探视VasSonic是何许落到实处这么些优化点的。

未雨有备无患策动粮草先行干活:
从github
VasSonic
clone最新代码,张开sonic-iOS目录下的SonicSample。

多年来在研读Vas
Sonic的源码,Sonic是一款轻量级的高质量Hybrid框架,由TencentQQ会员组织开荒,专一于进步H5页面首屏加载速度。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图