共计 823 个字符，预计需要花费 3 分钟才能阅读完成。
首发于：我的博客
前言
咱们 APP 中常常存在显示网页会有网页底部留有大量空白，显示网页速度要一两秒或者更久工夫的问题。
宽度获取问题
IOS 和安卓的问题是 IOS 的 webview 撑开之后没有方法从新放大，而 android 是能够的。所以这就要要求文档设置的文字宽度和图片高度问题要提前设置为比拟小的值，而后将其撑开。
比如说在获取宽度时，能够应用以下办法：
function initWidth() {
var innerWidth = window.innerWidth;
var scrollWidth = document.body.scrollWidth;
return (innerWidth < scrollWidth ? window.innerWidth : document.body.scrollWidth);
}而后是对 html 的默认 font-size 设置最小宽度。代码示例如下：
<html lang="zh" style="font-size: 0px;">webview 与原生交互
之前咱们是客户端注入类实例。然而当初咱们倡议应用 DSBridge 进行交互。这里有 Android 和 iOS 的文档链接。
图片懒加载
一般来说，为了缩小对流量的应用，咱们都会对图片进行懒加载解决。那么这个工夫可能会碰到一个问题，就是说对于如果图片都是高度特地短的图片，而后因为懒加载，导致图片总体的加载高度小于懒加载的高度，可能会造成页面的显示会有一段空白。
倡议默认将图片的默认高度变为 0，而后在 html 中存储图片宽高比例，而后在网页中通过计算比例来获取正确的图片高度。这样就不会造成显示的高度与理论的高度产生误差了。
webview 加载优化
为了加载 JS 的显示，咱们将以前的加载全副网页更改为在本地创立模板。每次加载时间接加载本地的网页模板。而后 JS 间接通过 ajax 间接申请网页动静内容进行渲染。这样极大的放慢了网页的展现速度。
流程图如下：
结尾
咱们具体做的优化策略就是这些了。通过优化之后，网页内容简直是秒开了。
正文完
发表至： javascript
2021-03-08
