浅谈webview

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

今天在学习跨端技术的时候，webview这个词一直出现，查阅资料后作此学习记录。

webview是什么？

WebView是一种在移动应用程序中嵌入Web内容的组件，允许您在移动应用程序中呈现和使用Web内容，而无需打开独立的Web浏览器。简单地说，WebView 是一种嵌入式浏览器，原生应用可以用它来展示网络内容。

可视化组件

webview只是一个可视化的组件，是作为原生APP的视觉部分。

用webview展示的内容是不需要存储在本地的，可以直接从服务器获取（从 http:// 或者 https:// 地址下载网络内容）。这确实给了开发人员很大的灵活性，并允许您在原生应用中显示Web应用，而不需要改变任何代码。

调用原生系统API

在WebView中运行的JS代码通常具有与原生应用中相同的能力，并且可以调用原生系统API。

与传统浏览器不同，WebView并不受沙箱限制，因此JS代码可以访问更多的功能和数据。这同时也带来了更高的安全风险，因此需要确保使用来自可靠源的内容。

因此，在webview中，JS代码可以跟原生应用代码相互通信，也可以调用原生API集成酷炫的系统级功能，如传感器、存储、日历、联系人等。

webview的精髓

webview其实只是一个在应用中设置好位置和大小的浏览器，而且不会放置任何花哨的UI。 在大多数情况下，除非你调用了原生API，否则不必在webview中专门测试web应用。

WebView与原生对比

在选择是否使用WebView还是原生开发时，需要考虑多个因素：

1. 开发效率：原生开发通常需要更多的开发时间和知识，但通常具有更快的运行速度和更低的延迟。相比之下，使用WebView可以快速开发和部署，但可能不如原生应用的性能和效率。
2. 技术栈：使用WebView通常需要更少的技术栈，因为JS和HTML是两种广泛使用的技术。相比之下，原生开发可能需要更多的技术栈，如Java或Swift。
3. 可维护性：原生应用通常更容易维护，因为代码可以直接访问原生系统。相比之下，使用WebView的代码可能不够灵活，因为它受到Web技术的限制。
4. 用户体验：原生应用通常提供更好的用户体验，因为它们可以更好地利用原生系统的功能。相比之下，使用WebView的应用可能不够流畅，因为它们受到浏览器的限制。

WebView的优化方向：

• WebView预创建和复用
• 渲染优化（JS、CSS、图片）
• 模板优化（拆分、预热、复用）
• 具体可以看这篇文章

参考博客：

• 链接：www.jianshu.com/p/3f1645168…，作者：颖小李
• 链接：juejin.cn/post/684490…，作者：子非