在以前，如果要禁止移动端设备的触摸屏上，手指缩小放大的功能，都会想到使用viewport 来处理。...此外，对 document 处理了滚轮事件后，因为该事件会传播冒泡，所以需要注意页面上其他的子元素——如果有滚动条之类的，需要在子元素上阻止冒泡，不然后滚动会失效。...css 处理 只要在页面上使用css样式 touch-action: none，就能禁止web在手机或平板上的缩放了。...用于设置触摸屏用户如何操纵元素的区域，允许你在触控时控制滚动操作。 例如，浏览器内置的缩放功能。 这样做的好处还有，它可以允许你自己实现这些手势。...笔记本触摸板双指滑动，将响应滚轮事件，因此可以监听该事件，禁止触摸板手指缩放界面。 但需要注意滚轮默认事件，如会导致子元素滚动失效，这时候就要在子元素上阻止相同事件冒泡。
速览 Flutter 1.12发布 V8 发布 8.0 版本，内存占用量大幅下降 WICG引入了展现锁定，实现更快的Web渲染 Firefox 71 发布 360 加入 Ecma 参与 JavaScript...Flutter 1.12 的 master、dev 和 beta 都提供了改进的 Web 支持。...JavaScript 引擎 V8 团队在官宣推出 8.0 版本。这次更新的重点主要集中在错误修复及性能改善上，正式的版本将在数周后随着谷歌 Chrome 80 稳定版一起发布。...” Firefox 71 发布 ? Firefox 71 现已正式发布。该版本添加了许多新的开发人员工具功能，其中包括 Web 套接字消息检查器，控制台多行编辑器模式，登录事件以及网络面板全文搜索。...可方便地在较长的代码段上进行迭代 网络面板的新资源阻止功能可以模拟跟踪保护，安全性，服务中断和不良连接的影响，以进行更可靠的测试 在美国，DevTools的新增功能面板中的每个版本都可以找到更多功能和改进
也都实现了这个事件，当用户通过鼠标滚轮与页面交互，在垂直方向上滚动页面时(无论向上还是向下)，就会触发mousewheel事件，这个事件可以在任何元素上触发，最终会冒泡到document（IE8）或window...，当用户向后滚动鼠标滚轮时，wheelDelta是-120的倍数。...e = EventUtil.getEvent(e); alert(e.wheelDelta); }); 如上代码，我不是在document对象或者window对象上，而是在页面btn元素上触发的...支持一个为DOMMouseScroll的事件，也是在鼠标滚轮滚动时触发，与mousewheel事件一样，但是他的有关鼠标滚轮信息保存在detail属性中，当鼠标向前滚动时，这个属性值是-3的倍数，当鼠标滚轮向后滚动时...，这个属性值是3的倍数；也可以给DOMMouseScroll事件使用在任何元素上，且这个事件会冒泡到window对象上，因此我们可以这样添加滚轮信息的代码如下： EventUtil.addHandler
于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。...滚轮事件及兼容问题概要 在鼠标上，除了点击、拖拽等事件，当然也少不了滚轮事件了，但是比较有意思的一点是，平常大家碰到兼容问题首先想到了IE这个万年背锅侠，但是这次还真不是，火狐别树一帜的凑了一回热闹。...1.在滚轮事件中，火狐的的滚动事件是DOMMouseScroll，而其它浏览器是mousewheel，这一点是要仔细留意的。 2.在事件对象的兼容中。...首先，我们需要明白我们的滚轮是作用在谁的身上，根据实际需求来进行事件绑定，当我们鼠标移入可视区时，会触发滚轮事件，在移出可视区时则清除滚轮事件，接下来进行具体代码操作。...} if (e.detail滚动时 Judge = true; } } } 完整实现代码 完整的实现代码在之前实现滚动条的基础代码上添加
从那时起，我们的重点就转移到了利用 web 平台的最新功能来实现快速、无卡顿的性能表现，提高 Flutter 在各个平台的行为一致性，并彻底修复那些在 web 上感觉不自然的场景。...在过去的这个季度，我们增加了自动化测试，以确保 web 引擎和框架的正确性。我们增加了 Chrome 中的屏幕截图测试，以确保我们在修改代码的过程中保持渲染的一致性和正确性。...最近，我们在 Flutter web 支持中优化了静态内容的滚动，也就是说，内容不是延迟加载 (lazily loaded)，而是全部在同一帧中呈现。这应该会使滚动性能更符合传统的 web 体验。...在去年的 Flutter Interact 大会上，我们宣布新的 Gallery 范例应用可以在 web 上通过 Flutter 运行。...我们知道，最终的选择将决定我们在 web 上构建、布局和绘制 Flutter widget 的能力。
万恶的滚轮事件 滚轮事件的支持可谓是乱七八糟，规律如下： IE6-11 chrome mousewheel wheelDetla 下 -120 上 120 firefox DOMMouseScroll...detail 下3 上-3 firefox wheel detlaY 下3 上-3 IE9-11 wheel deltaY 下40 上-40 chrome wheel deltaY 下100 上-100...问题一：Firefox，Chrome、Safari和IE9都是通过非标准事件的pageX和pageY属性来获取web页面的鼠标位置的。...在火狐中，与event.x 等效的是 event.pageX。event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。...鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 问题三：scrollTop为滚动条向下移动的距离，所有浏览器都支持document.documentElement
1.1 Flutter是什么 1.1.1 Flutter简介 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，一份代码可以同时生成iOS和Android两个高性能...Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序，并且兼容滚动行为、排版、图标等方面的差异。...这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。...但Flutter亦可支持Web开发（Flutter for web）和PC开发，本书的示例和介绍主要是基于iOS和Android平台的，其它平台读者可以自行了解。...原生性能Flutter包含了许多核心的widget，如滚动、导航、图标和字体等，这些都可以在iOS和Android上达到原生应用一样的性能。
区别在于：Flutter Web 重写了 dart:ui 层（黄色部分），利用 DOM、Canvas 对齐了 Flutter Native 的 UI 渲染能力，使得 Flutter 编写的 UI 能够在现代浏览器上正常展示...（1）各平台实现能在 Web 侧对齐的场景，如埋点库 埋点库无论在 Native 端还是在 Web 端都是使用公司统一提供的 SDK，在 API 设计上具有天然的一致性，因此我们完全有能力在 Plugin...Flutter Web 自身实现了一套页面滚动机制，在页面滚动过程中，会频繁的创建 Canvas，最终导致滚动性能问题，甚至引起页面 Crash。...为此，在加载部分我们对 Flutter SDK 增加了如下三方面的优化，以达到线上运行的标准，优化步骤如下图所示： image.png 优化步骤 资源文件 Hash 化 除了 web/index.html...以商家学院文章内容页为例，对比优化前后滚动 FPS ： image.png 优化前 FPS image.png 优化后 FPS 可以看到，Flutter Web 页面滚动性能已得到较大提升，足以应对大部分业务场景
而有些兼容性问题也可能是其它浏览器之间的差异，比如 Chrome 和 FireFox 对于鼠标滚轮事件对象的滚轮方向判断方式不同，Chrome使用 wheelDelta，而FireFox 则采用 detail...IE 上的滚轮事件名称是 mousewheel。微软的 Edge 浏览器实现了。...滚轮事件中有一个属性可以判断鼠标滚轴是向下滚动的还是向上滚动的，这个属性的值是一个数值。...除了 Firefox 之外，都是有这么一个属性来表示：wheelDelta，它的值通常是 120 或 -120，在 Chrome 中却是 150 和 -150。向上滚动是正值，向下滚动是负值。...Firefox 支持的 wheel 事件名称获取到的 detail 值好像判断不了滚轮滚动方向（其中有一个 deltaY，属性可做判断，大于零时表示向下滚动，小于零时表示向上滚动），使用 DOMMouseScroll
所以，不要难为别人，到最后其实是在难为你自己。至于为什么不爬PC端，原因是移动端较简单，很适合爬虫新手入门。有时间再写PC端吧！...环境介绍 Python3 Windows-10-64位 微博移动端 网页分析 以获取评论信息为例（你可以以自己的喜好获得其他数据）。...如下图： 在这里就会涉及到一个动态加载的概念，也就是我们只有向下滑动鼠标滚轮才会加载出更多的评论数据。这也是网页经常使用的方式。...接下来将鼠标滚轮缓慢向下滚动，在这个过程中就会弹出类似于上图的信息，也就是评论信息加载出来了。找到评论信息，应该会在第一条。...id=4160547165300149&page=3 将网址在火狐里面打开如下图： 上面的网址其实pages=3就代表第三页，所以只需模拟网址即可，pages=4,5,6。。。。
正文 我在Flutter vs Chromium 动画渲染的对比分析一文中对 Flutter 和 Web (Chromium) 的各种动画的理论性能优劣进行了分析，其中一个主要结论是，由于惯性滚动处理机制和光栅化机制的不同...，Web (Chromium) 的惯性滚动动画性能理论上要远远优于 Flutter。...) > Flutter (Android) 我们在不同设备上对上述业务页面在惯性滚动过程中进行 trace 的抓取，结合 Flutter 的代码对 trace 文件进行分析，了解 Flutter 渲染流水线在惯性滚动过程中各个环节的调度...Web (Chromium)，Flutter 在上述两方面都存在比较明显的劣势： img Flutter 需要依赖于 Relayout 来驱动惯性滚动动画，滚动容器内的元素在滚动过程中每一帧都需要 Relayout...Flutter 采用的以直接光栅化为主，间接光栅化为辅的同步光栅化机制，在合成输出过程中进行光栅化，光栅化的耗时会直接影响动画的性能。
环境介绍 Python3/Windows-10-64位/微博移动端 网页分析 以获取评论信息为例（你可以以自己的喜好获得其他数据）。如下图： ?...在这里就会涉及到一个动态加载的概念，也就是我们只有向下滑动鼠标滚轮才会加载出更多的评论数据。这也是网页经常使用的方式。...接下来就应该找到评论信息的真实网址，找到真实网址的方法就是打开浏览器的开发者工具，火狐/谷歌是F12键。打开如下： ? 打开以后点击网络，网络用来记录浏览器和服务器交换的信息。...接下来将鼠标滚轮缓慢向下滚动，在这个过程中就会弹出类似于上图的信息，也就是评论信息加载出来了。找到评论信息，应该会在第一条。如下图： ?...id=4160547165300149&page=3 将网址在火狐里面打开如下图： ? 上面的网址其实pages=3就代表第三页，所以只需模拟网址即可，pages=4,5,6。。。。
前言其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。...实现思路在js中，onmousewheel是鼠标滑轮滚动事件，可以通过这个事件触发来改变图片的大小，实现图片放大缩小功能。但是我们这里是vue所以使用的是：mousewheel。...如果滚轮旋转远离用户，则为正，否则为负。这意味着增量值符号不同于DOM级别3事件的符号车轮。但是，这些值的数量在不同浏览器之间的意义并不相同。详情见以下解释。...onmousewheelonmousewheel事件：会在鼠标滚轮滚动的时候被触发，对鼠标滚轮是否滚动进行判断，但是火狐浏览器不支持这个属性。...在页面有滚动条的时候，滚动条会随着鼠标滚轮滚动而滚动，这是浏览器的默认行为，可用return false来取消浏览器的默认行为。有火狐鼠标滚轮兼容问题。
Flutter的Web支持基于这些创新，提供了以应用程序为中心的框架，该框架充分利用了现代Web所提供的所有优势。...Flutter Plasma是由社区成员Felix Blaschke构建的演示，展示了使用Dart和Flutter构建复杂的Web图形体验的简便性，这些体验也可以在桌面或移动设备上本地运行。...我们一直在扩展Flutter，以提供最佳的Web平台。最近几个月，我们添加了文本自动填充功能，对地址栏URL和路由的控制以及PWA清单。...其次，微软正在继续扩大对Flutter的支持。除了正在进行的合作以在Flutter中提供高质量的Windows支持外，今天微软还将发布对Flutter引擎的支持，以支持新兴的可折叠Android设备。...请访问Flutter 2上的独立技术博客，以获取有关许多新功能和性能改进的信息，我们认为这将使现有的Flutter开发人员满意，并立即下载。 ?
环境介绍 Python3/Windows-10-64位/微博移动端 网页分析 以获取评论信息为例（你可以以自己的喜好获得其他数据）。...如下图： 在这里就会涉及到一个动态加载的概念，也就是我们只有向下滑动鼠标滚轮才会加载出更多的评论数据。这也是网页经常使用的方式。...接下来就应该找到评论信息的真实网址，找到真实网址的方法就是打开浏览器的开发者工具，火狐/谷歌是F12键。打开如下： 打开以后点击网络，网络用来记录浏览器和服务器交换的信息。...接下来将鼠标滚轮缓慢向下滚动，在这个过程中就会弹出类似于上图的信息，也就是评论信息加载出来了。找到评论信息，应该会在第一条。...id=4160547165300149&page=3 将网址在火狐里面打开如下图： 上面的网址其实pages=3就代表第三页，所以只需模拟网址即可，pages=4,5,6。。。。
此外，Flutter 2 还能够完美契合 Chrome、Firefox、Safari 以及 Edge 等网络浏览器，甚至可以被嵌入至汽车、电视与智能家居当中，借此带来最普遍、最具便携性的计算体验。...Flutter 为 Web 应用添助力 Flutter 2 当中最具份量的升级，当数对 Web 的生产质量支持能力。 Web 在早期发展阶段主要以文档为中心。...Flutter 的 Web 支持充分吸纳了上述创新优势，提供一套以应用程序为中心的框架体系，能够发挥现代 Web 提供的一切功能。...我们一直在扩展 Flutter 以构建起行业最佳的 Web 平台。最近几个月，我们引入了文本自动填充功能，对地址栏 URL 及路由的控制机制以及 PWA 清单功能。...首先是 Canonical，我们双方合作将 Flutter 引入桌面环境，借此 Canonical 工程师们贡献的代码支持 Flutter 在 Linux 上的开发与部署。
最近半年我们在探索基于 Flutter Web 体系的 Web-App 一体化架构，同期也在关注鸿蒙的适配，这两个部分目前在业务上都有比较大的进展：在 Web 领域，我们实现了美团已有的前端基建与 MTFlutter...2MTFlutter：Web-App 一体化实现 InfoQ：老师在前面提到，你们在 Flutter 上还做了很多新的尝试，除了在鸿蒙落地之外，还将 Flutter Web 落地到了 B 端。...是完全复用的；性能上我们经过 SDK 的优化定制后，Flutter Web 与现有 Web 项目在页面滚动上的指标差距已不大，可满足日常业务要求，首次加载的时间还有一定优化空间，我们也会持续对其进行探索...我们对编译流程进行了干预，补齐了这部分功能，使得项目能满足基本的投产要求 滚动性能问题：在 HTML 编译模式下，Flutter Web 实现了一套页面滚动机制，页面滚动过程中，会引起滚动区域中的 Canvas...陈航：3 月 4 日 Google 官方发布了 Flutter 2.0，至此我们可以说 Flutter 真正做到了以应用为中心，达成了全平台的支持。
Flutter和其他的跨平台解决方案的实现方式上有比较大的差异。 我们以React Native（下文简称RN）跨平台解决方案为例。...图一 React Native跨平台解决方案 Flutter却没有使用移动端平台提供各种UI组件，而是将UI组件的具体实现上移到Flutter的Framework层中，然后调用平台提供的底层绘制引擎来直接绘制在...但是和iOS、Android不同，浏览器并没有提供一套广泛使用、完备、高效的绘制接口，这就使得Flutter For Web和Flutter For Mobile在架构上还是有比较大的差别的。...Flutter web中的Cookie管理实际上是由浏览器来管理的，因此无法像客户端开发一样，自由设置cookie。...2.性能的优化 首先，需要减小编译后的JS包的大小，同时支持JS的拆包和分包加载等功能； 其次，需要进一步提升渲染效率，特别是在复杂页面的滚动时的渲染速度需要能达到60帧/秒。
关于Web设计的未来趋势，我相信很多文章都有涉及。下面就让我带你总结一下哪些才是真正的预言。 1.手势取代点击 还记得曾经是如何滚动网页的吗？...将鼠标移到屏幕的右边缘，然后拖动古代称为“滚动条”的玩意儿： ? 稍微专业点的可能会使用鼠标滚轮，光标键或触控板，这已经领先于大多数的用户了。 但是2015年，滚动比点击更受欢迎。...在移动设备上，你可以用你的手指随意滑动来滚动页面。精确点击目标实际上是很难的——这和我们在桌面上养成的习惯截然相反。 因此，我们希望越来越多的网站能够内置为滚动第一，点击第二个的设置。...虽然说将来web是否会扩张到类似于手表这样的装备上还是个未知数，但是，如果这个设想成真的话，那么我可以打赌以后将会成为手势的天下。...随着响应式设计的普及，我们使用更多的是网格和百分比。当然还是有一个区域依然坚守着像素：点阵图。 几乎所有的web都是构建在图像的基础上。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
