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加载性能。

相关文章
|
6月前
|
Android开发
vscode的webview页面
vscode的webview页面
|
Android开发
Webview性能优化-小结
Webview性能优化-小结
725 0
xal
|
Web App开发 JavaScript API
VSCode插件开发全攻略(七)WebView
更多文章请戳[VSCode插件开发全攻略系列目录导航](https://www.atatech.org/articles/121864)。 # 什么是Webview 大家都知道,整个VSCode编辑器就是一张大的网页,其实,我们还可以在`Visual Studio Code`中创建完全自定义的、可以间接和`nodejs`通信的特殊网页(通过一个`acquireVsCodeApi`特殊方
xal
3944 0
|
6月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
83 0
|
6月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
254 0
|
6月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
6月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
5月前
|
前端开发
VSCode中自带插件Emmet的用法
Emmet 是一个强大的工具,集成在 Visual Studio Code (VSCode) 中,可以大大提高编写 HTML 和 CSS 的效率。以下是如何使用 Emmet 插件的一些基本方法
94 4
|
5月前
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
下一篇
无影云桌面