网页优化-缓存并加载本地js，css等资源文件（有坑，内容中道出）

Posted 2023-02-26 xiaohuanqi

博客转移到：http://www.wangchengmeng.club/

现在很多项目中多变化的页面更希望使用H5来实现，方便快捷，且不需要时刻的去升级版本。但在体验上H5还是没有原生的好，在native和H5之间的交互，已经webview加载的速度上都有一定的弊端，优化的方案很多，今天尝试了一下将js css等资源文件缓存到本地，这样后续加载网页的时候速度上就会快一些。
当然，真正影响加载速度的有大概几个点：
1.网页中的诸多请求
2.js的执行已经css样式的渲染
3.图片等比较大的资源加载
4.网络等外界因素

今天就先解决第二点的优化，加载本地js css文件。

shouldOverrideUrlLoading(WebView view, String url)
这个方法大家都很熟悉，url拦截，也是native和H5交互的一个重点，主要是两端定义似有协议，拦截到是自定义的协议那么可以做对应的事情：

H5端：
    定义一个点击事件：
html：
<div>
    <button class="size" id="btn1" onclick="clickme()">button-1</button>
</div>
javascript：
   clickme =  function()  
      document.location = "js://webview?arg1=111&arg2=222";
    

android端：

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) 
            Uri uri = Uri.parse(url);
            //判断scheme 如果是私有定义的 拦截
            if (uri.getScheme()
                    .equals("js")) 
                if (uri.getAuthority()
                        .equals("webview")) 
                    //获取携带的参数
                    String arg1 = uri.getQueryParameter("arg1");
                    //TODO 拦截掉 做对应的客户端需要做的操作
                
                return true;
            
            return super.shouldOverrideUrlLoading(view, url);
        

除了shouldOverrideUrlLoading该方法以外还有一个方法叫shouldInterceptRequest，该方法是拦截H5资源加载的方法，在5.10以前是shouldInterceptRequest(WebView view, String url),后面被shouldInterceptRequest(WebView view, WebResourceRequest request)替代（如需仔细了解该方法咨询搜索）。今天的内容就主要是该方法中去操作。

再分享前，再分享自己踩过的一个很重要的坑，再本地测试的时候我是将js和css文件放在assert文件夹中的，且将Html文件也放在里面（为了方便），会有一个很重要的问题就是 shouldInterceptRequest该方法不会执行，具体是什么原因希望了解的人可以分享一下。然后我将html放入手机存储中就可以了。

1.一般再开发中H5 会有专门前端人员写（本地测试是自己写的）拿到前端的js和css文件后命好名放在asset文件夹中（如需要动态去下载另外，且名字一定和前端确定好，script标签中src路径名称相同）

2.然后当H5执行到js或者css的时候客户端会有拦截，直接加载本地的js和css文件，具体代码：

        @Nullable
        @Override
        public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) 
            //资源拦截 加载本地 js css 文件
            String path = request.getUrl()
                    .getPath();
            String fileName = request.getUrl()
                    .getLastPathSegment();

            try 
                if (path.endsWith(".js")) 
                    InputStream inputStream = getAssets().open(fileName);
                    return new WebResourceResponse("text/javascript", "utf-8", inputStream);
                 else if (path.endsWith("css")) 
                    InputStream inputStream = getAssets().open(fileName);
                    return new WebResourceResponse("text/css", "utf-8", inputStream);

                
             catch (Exception e) 
                e.printStackTrace();
            
            return super.shouldInterceptRequest(view, request);
        

其实也很简单，只是本地测试过程中踩了个坑，希望记录一下，有知道的可以请教一下。