搜索
首页web前端H5教程淘宝的HTML5页面,为什么要把默认滚动给禁了?

仅仅就是为了做模拟native的下拉刷新吗?

回复内容:

其实是得不偿失的,前端很难想象浏览器为了网页滚动的流畅性做了多少优化,才能达到稳定60fps的效果,而JS控制的滚动就意味着放弃了这些优化,并且还要加上额外的JS/DOM/CSS开销。

一些浏览器常见的滚动优化:

1,预判滚动的方向,预先生成不可见区域纹理;
2,异步光栅化,延迟光栅化;
3,延迟甚至停止内核网页重绘/重排版;
4,线程优先级调整,任务优先级调整;

----

补充浏览器处理滚动的一些其它优势:

1,浏览器处理触屏事件比使用JS处理响应更及时;
2,浏览器一般使用OS本身的惯性滚动算法,更符合用户的使用体验;
3,浏览器可以记录页面的滚动位置,在前进后退或者后台被杀重启后可以自动恢复页面的位置;

如果需要了解更多浏览器渲染的知识,可以阅读我的文章:
How Rendering Work (in WebKit and Blink) 淘宝的前端是渣,看下天猫淘宝商品页的源代码就知道,要多难看有多难看。最近一年有改善,不知道是哪个部门主导的。 不仅是 Web 端,也有一些其他的客户端之类的 view(视图) 选择自己实现滚动效果,而屏蔽掉浏览器、view 组件的默认滚动。

自己实现滚动,可以让 view 有更丰富的动作和效果,也为其增加了更多的可控制能力(参数化、函数化)。

但是,自定义组件和动作会有更多的麻烦:
1. 兼容性无法保证。许多自定义的内容只在有限的平台和设备上测试过,在一些未测试的设备和平台上,可能存在 Bug、性能差、不稳定或者表现不一致等诸多问题。
2. 丢失了通用的默认行为。举个例子:浏览器打开页面时,可以滚动到 URL 中 #abc 对应的页面中 ID 为 abc 的元素,如果你的页面是单页应用,但子页面跟 URL 无关,那这种滚动(或单页应用中的切换子页面)行为就丢掉了。类似的例子还有很多,都是坑。

如果没有能力保证兼容性,并实现或保留通用的默认行为,还是不要自定义。 在我手机上巨卡,安卓uc浏览器 忘记安卓4.0还是4.1了,ajax载人的东西滚蛋有bug,烦死人 当你有足够开发能力的时候,自己实现滚动好处多多,
1.微调参数,例如滚动速度,惯性,越界回弹距离,时间,android的webview是没有自带回弹的
2.更多的功能,例如下拉刷新,实现更好看的滚动条
3.防止一些问题,比如单页app拉动出页面边界
自己只有用到过这些 ios在滚动的时候会禁js,可能是因为这个原因吧
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何使用视口元标记来控制移动设备上的页面缩放?如何使用视口元标记来控制移动设备上的页面缩放?Mar 13, 2025 pm 08:00 PM

本文讨论了使用视口元标记来控制移动设备上的页面缩放,重点是宽度和初始尺度之类的设置,以获得最佳响应和性能。

如何将音频添加到我的HTML5网站上?如何将音频添加到我的HTML5网站上?Mar 10, 2025 pm 03:01 PM

本文解释了如何使用< audio>元素,包括用于格式选择的最佳实践(MP3,OGG Vorbis),文件优化和JavaScript控件用于播放。 它强调使用多个音频f

如何使用HTML5和JavaScript创建互动游戏?如何使用HTML5和JavaScript创建互动游戏?Mar 10, 2025 pm 06:34 PM

本文使用JavaScript详细介绍了创建Interactive HTML5游戏。 它涵盖了游戏设计,HTML结构,CSS样式,JavaScript逻辑(包括事件处理和动画)以及音频集成。 必需的JavaScript库(Phaser,Pi

如何使用地理位置API处理用户位置隐私和权限?如何使用地理位置API处理用户位置隐私和权限?Mar 18, 2025 pm 02:16 PM

本文讨论了使用GeOlocation API管理用户位置隐私和权限,并强调要求权限,确保数据安全性并遵守隐私法律的最佳实践。

如何将HTML5表单用于用户输入?如何将HTML5表单用于用户输入?Mar 10, 2025 pm 02:59 PM

本文解释了如何创建和验证HTML5表格。 它详细介绍了>元素,输入类型(文本,电子邮件,编号等)和属性(必需,模式,最小,最大)。 HTML5的优势比旧方法形成

如何使用HTML5页面可见性API检测页面何时可见?如何使用HTML5页面可见性API检测页面何时可见?Mar 13, 2025 pm 07:51 PM

本文讨论了使用HTML5页面可见性API来检测页面可见性,提高用户体验并优化资源使用情况。关键方面包括暂停媒体,减少CPU负载以及基于可见性变化管理分析。

如何将HTML5拖放API用于交互式用户界面?如何将HTML5拖放API用于交互式用户界面?Mar 18, 2025 pm 02:17 PM

本文介绍了如何使用HTML5拖放API来创建交互式用户界面,详细介绍了使元素可拖动的步骤,处理关键事件并通过自定义反馈来增强用户体验。它还讨论了一个常见的陷阱

如何使用HTML5 Websockets API进行客户端和服务器之间的双向通信?如何使用HTML5 Websockets API进行客户端和服务器之间的双向通信?Mar 12, 2025 pm 03:20 PM

本文解释了HTML5 Websockets API,用于实时双向客户服务器通信。 它详细详细介绍了客户端(JavaScript)和服务器端(Python/Flask)的实现,以应对可伸缩性,状态管理,一个挑战

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版