在移动端微信内置浏览器 , overflow 的 hidden/scroll 的 switch 花销好大啊, 要 170+ms , 手机 CPU 骁龙 801

2017-08-11 23:27:36 +08:00
 deepkolos

手机上没有这个问题有, TIM 的内置浏览器 , 已测试遨游, 羽浏览器

微信版本 6.5.10

测试页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		*{
			padding:0px;
			margin:0px;
		}
		.outerBox {
			width:100vw;
			height:100vh;
			overflow: scroll;
		}
		.hidden {
			overflow: hidden!important;
		}
		.innerBox {
			width:200%;
			height:100%;
			background: url(blance.png);
		}
	</style>
</head>

<body>
	<ul class="outerBox">
		<li class="innerBox"></li>
	</ul>
</body>
<script>

	var $outerBox = document.querySelector('.outerBox')
		$innerBox = document.querySelector('.innerBox');
        
	$outerBox.addEventListener('touchend',function(){
		$outerBox.classList.toggle('hidden');
	}, false);
</script>

</html>
2919 次点击
所在节点    前端优化
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/382323

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX