MIP 组件可见性优化

[xuexb]

MIP 整个的组件遵循可见加载原则，当元素在屏幕可见范围内时才会触发元素的 firstInviewCallback 回调，但目前 MIP 组件元素被隐藏或者祖先元素被隐藏时，代码逻辑判断有误导致认为该元素是可见状态，从而直接加载了元素，导致资源浪费。

mip/src/dom/rect.js

Lines 165 to 174 in fc2e20a

	/**
	* Whether two rect object are overlapped.
	* @param {Object} rect1
	* @param {Object} rect2
	* @return {boolean}
	*/
	overlapping: function (rect1, rect2) {
	return rect1.top <= rect2.bottom && rect2.top <= rect1.bottom
	&& rect1.left <= rect2.right && rect2.left <= rect1.right;
	}

常见的场景有：

1. 被隐藏的标签 Tab 组件
2. 被隐藏的弹出层

示例链接：https://m.idongde.com/18d6bf8565b1Aeb2.shtml

[Honohonoho]

bug场景重现：当被隐藏的标签 Tab 组件中有很多mip-img组件时(隐藏状态)，页面第一次加载会请求所有的图片，导致http请求数过多，不利于性能优化，可以修复这个bug吗？

[xuexb]

修复方案：修改可见性状态需要判断元素的 width、height 和 display，参考：Zepto 。

但这将导致目前很多组件在默认下隐藏元素，在操作（如点击切换、延迟显示等）页面时，没有触发 scroll 或者 resize 事件时，元素将不可见，这个影响面很大，有2种方案可以解决：

1. 修改所有涉及到隐藏元素的组件，在交互操作之后主动触发页面视图刷新（viewport.trigger('refresh')），这是理想状态，但组件量比较大。
2. 由视图统一绑定事件来触发刷新，但可能有漏网之鱼，如元素是在 ajax 异步内设置到页面，绑定的事件如：
   • 在移动端绑定 touchend 事件刷新视图
   • 在 PC 端绑定 click 事件刷新视图

方案这块 @harttle @schoeu @oott123 关注下。

[xuexb]

召唤大神们来讨论，@VenyXiong

[harttle]

听起来需要沙盒，MIP有沙盒么？如果托管了所有 API 我们是知道更新时机的。

[Honohonoho]

来看看有进展吗 😄

[zphhhhh]

+1 看进展。

我们这边用 mip-img 也会偶然出现图片未加载的情况。顺便问下，MIP 规范禁止使用 <img> 标签推荐 <mip-img>，但因为上面的问题，我切换到了 <img> 也可以正常显示暂时未发现问题，请问这样的话除了懒加载的特性会有什么潜在问题吗？