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页面
xal
|
Web App开发 JavaScript API
VSCode插件开发全攻略(七)WebView
更多文章请戳[VSCode插件开发全攻略系列目录导航](https://www.atatech.org/articles/121864)。 # 什么是Webview 大家都知道,整个VSCode编辑器就是一张大的网页,其实,我们还可以在`Visual Studio Code`中创建完全自定义的、可以间接和`nodejs`通信的特殊网页(通过一个`acquireVsCodeApi`特殊方
xal
3778 0
|
6天前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
14 0
|
6天前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
106 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)
|
6天前
|
人工智能 JavaScript 程序员
Fitten Code:在VSCode插件市场备受欢迎的原因是什么?
随着AI技术的不断发展,AI在编写代码方面的能力也日益强大。充分利用AI的能力能够显著提高代码编写的效率和质量。今天我将向大家介绍一款备受瞩目的AI代码神器——Fitten Code,让我们一同揭开它神秘的面纱!
317 3
|
6天前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
20 0
|
6天前
VSCode插件分享--免费的ER工具
VSCode插件分享--免费的ER工具
19 0
|
6天前
|
JavaScript 开发工具 git
【Vscode】 Vscode常用插件
【Vscode】 Vscode常用插件
59 0