vscode的webview性能优化总结

简介: vscode的webview性能优化总结

1、首次加载需耗时,但是在此加载的应该是缓存的页面,再调用的时候直接显示出来,不要重新渲染:

if (MyDemo.myPanel != undefined) {
            try {
                this.getHtmlForWebview();
                MyDemo.myPanel.reveal(vscode.ViewColumn.Active);
                return;
            } catch (error) {
                consoleEx.debug(error);
                consoleEx.debug("webview is colsed");
            }
        }
        MyDemo.myPanel = vscode.window.createWebviewPanel(MyDemo.viewType, "Comment", column, {
            enableScripts: true,
            retainContextWhenHidden: true,
            localResourceRoots: [
                vscode.Uri.file(path.join(this._extensionPath, "media"))
            ]
        });
        this.getHtmlForWebview();

2、将页面加载放到前面,页面包含的数据往后延迟待页面显示了再发送过来。在webview的js界面初始化函数中通过postMessage()发消息给后台,让后台在把数据过来。

3、通过webpack打包,将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求,提升webview加载性能。

相关文章
|
9月前
|
Android开发
vscode的webview页面
vscode的webview页面
|
Android开发
Webview性能优化-小结
Webview性能优化-小结
762 0
xal
|
Web App开发 JavaScript API
VSCode插件开发全攻略(七)WebView
更多文章请戳[VSCode插件开发全攻略系列目录导航](https://www.atatech.org/articles/121864)。 # 什么是Webview 大家都知道,整个VSCode编辑器就是一张大的网页,其实,我们还可以在`Visual Studio Code`中创建完全自定义的、可以间接和`nodejs`通信的特殊网页(通过一个`acquireVsCodeApi`特殊方
xal
3998 0
|
API Android开发 数据安全/隐私保护
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
解决android webview 加载http url 失败 net::ERR_CLEARTEXT_NOT_PERMITTED 错误
1285 0
|
8月前
|
Web App开发 移动开发 前端开发
52. 【Android教程】网页视图:WebView
52. 【Android教程】网页视图:WebView
127 1
|
7月前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
182 0
|
Android开发 iOS开发 UED
Android webView 实现阻尼回弹效果
iOS webView默认滑动到顶部或者底部的时候,还可以继续通过手指拉扯滑动,松手后回弹;而Android webView默认是不行的,要实现跟iOS一样的效果,就需要自定义webView。
626 0
|
9月前
|
JavaScript 前端开发 Android开发
android开发,使用kotlin学习WebView(详细)
android开发,使用kotlin学习WebView(详细)
586 0
|
定位技术 Android开发
[√]Android webview的url scheme
[√]Android webview的url scheme
574 0

热门文章

最新文章