AlloyTeam

AlloyTeam

Copyright © Tencent AlloyTeam. All Rights Reserved.
AlloyTeam 腾讯全端 AlloyTeam 团队 Blog
  • 首页
  • Web 开发
    • 前端资讯
    • HTML5
    • CSS3
    • JavaScript
    • Node.js
    • 移动 Web 开发
    • 用户体验设计
    • Web 前端优化
    • 资源工具
  • 移动开发
    • Android 开发
    • iOS 开发
    • 移动 Web 开发
  • Alloy 实验室
    • 作品
    • HTML5 游戏
  • Web 测试
  • 关于
    • 团队
    • Github
    • 留言
    • 友情链接
  • RSS
  • TAT.tennylv 移动 web 之滚动篇
    In Web开发 on 2017年04月14日 by TAT.tennylv view: 26,186
    5

    知识点 1: 移动 web 滚动问题

    在移动端,使用滚动来处理业务逻辑的情况有很多,例如列表的滚动加载数据,下拉刷新等等都需要利用滚动的相关知识,但是滚动事件在不同的移动端机型却又有不同的表现,下面就来一一总结一下。

    1. 滚动事件:即 onscroll 事件,形成原因通俗解释是当子元素的高度超过父元素的高度时且父元素的高度时定值 window 除外,就会形成滚动条,滚动分为两种:局部滚动和 body 滚动。
    2. onscroll 方法: 一般情况下当我们需要监听一个滚动事件时通常会用到 onscroll 方法来监听滚动事件的触发。
      如果在浏览器上调试这个方法在浏览器上很好用,但是如果跑在手机端就没有想象中的效果了。
    3. body 滚动:在移动端如果使用 body 滚动,意思就是页面的高度由内容自动撑大,body 自然形成滚动条,这时我们监听 window.onscroll,发现 onscroll 并没有实时触发,只在手指触摸的屏幕上一直滑动时和滚动停止的那一刻才触发, 采用了 wk 内核的 webview 除外。

      body 滚动
      局部滚动

    4. 局部滚动:在移动端如果使用局部滚动,意思就是我们的滚动在一个固定宽高的 div 内触发,将该 div 设置成 overflow:scroll/auto; 来形成 div 内部的滚动,这时我们监听 div 的 onscroll 发现触发的时机区分 android 和 ios 两种情况,具体可以看下面表格:
    5. 不同机型 onscroll 事件触发情况:

      body 滚动 局部滚动
      ios 不能实时触发 不能实时触发
      android 实时触发 实时触发
      ios wkwebview 内核 实时触发 实时触发
    6. wkwebview 内核: 这里说明一下关于 ios 的 wkwebview 内核是 ios 从 ios8 开始提供的新型 webview 内核,和之前的 uiwebview 相比,性能要好,具体大家可以自行查看关于 wkwebview 的相关概念。
    7. body 滚动和局部滚动 demo:这里我需要指出的是在采用 wkwebview 内核的页面中 scroll 是可以实时触发的,如果使用的是原本的 uiwebview 则不能够实时触发,手 q 目前使用的是 uiwebview 而新版微信使用的是 wkwebview,大家可以分别使用来尝试一下下面的 demo:
      局部滚动

      body 滚动

      分别用 ios 手 q 和微信和 android 手 q 体验会有不同的结果。

    知识点 2: 关于模拟滚动

    1. 有了上面介绍的关于滚动的知识,理解的模拟滚动就不难了。
    2. 正常的滚动:我们平时使用的 scroll,包括上面讲的滚动都属于正常滚动,利用浏览器自身提供的滚动条来实现滚动,底层是由浏览器内核控制。
    3. 模拟滚动:最典型的例子就是 iscroll 了,原理一般有两种:

      1). 监听滚动元素的 touchmove 事件,当事件触发时修改元素的 transform 属性来实现元素的位移,让手指离开时触发 touchend 事件,然后采用 requestanimationframe 来在一个线型函数下不断的修改元素的 transform 来实现手指离开时的一段惯性滚动距离。

      2). 监听滚动元素的 touchmove 事件,当事件触发时修改元素的 transform 属性来实现元素的位移,让手指离开时触发 touchend 事件,然后给元素一个 css 的 animation,并设置好 duration 和 function 来实现手指离开时的一段惯性距离。
    4. 这两种方案对比起来各有好处,第一种方案由于惯性滚动的时机时由 js 自己控制所以可以拿到滚动触发阶段的 scrolltop 值,并且滚动的回调函数 onscroll 在滚动的阶段都会触发。
    5. 第二种方案相比第一种要劣势一些,区别在于手指离开时,采用的时 css 的 animation 来实现惯性滚动,所以无法直接触发惯性滚动过程中的 onscroll 事件,只有在 animation 结束时才可以借助 animationend 来获取到事件,当然也有一种方法可以实时获取滚动事件,也是借助于 requestanimationframe 来不断的去读取滚动元素的 transform 来拿到 scrolltop 同时触发 onscroll 回调。
    6. 关于模拟滚动和正常滚动,两者在性能上差别还是比较明显的,下面时两个 demo,可以扫描体验一下:
      正常滚动

      模拟滚动

      衡量滚动是否流畅的指标 fps,我这边也统计了一下正常滚动和模拟滚动的 fps 数据:

      正常滚动

      模拟滚动

      模拟滚动的 fps 值波动较大,这样滚动起来会有明显的卡顿感觉,各位体验的时候如果滚动超过 10 屏之后就可以明显感觉到两着的区别。

      在使用模拟滚动时,浏览器在 js 层面会消耗更多的性能去改变 dom 元素的位置,在 dom 复杂层级深的页面更为高,所以在长列表滚动时还要使用正常滚动更好。

    知识点 3: 滚动和下拉刷新

    1. 下拉刷新的元素在页面顶部,正常浏览时不可见的。
    2. 当在页面顶部往下滚动时出现下拉刷新元素,当手指离开时收起。
    3. 以上两点时实现一个下拉刷新组件的基本步骤,结合我们上述关于滚动的描述,我们可以这样实现下拉刷新:

      方案 1:借助 iscroll 的原理,整个页面使用模拟滚动,将下拉刷新元素放在顶部,当页面滚动到顶部下拉时,下拉刷新元素随着页面的滚动出现,当手指离开时收回,此方案实现起来较为简单直接借助 iscoll 即可,但是使用了模拟滚动之后在正常的列表滚动时性能上不如正常滚动。
      方案 2:页面使用正常滚动,将下拉刷新元素放置在顶部 top 值为负值(正常情况下不可见),当页面处于顶部时下拉,这时监听 touchmove 事件,修改 scrollcontent 的 tranlateY 值,同时修改下拉刷新元素的 tranlateY 值,将两者同时位移来将下拉刷新元素显示出来,手指离开时(touchend)收回,这种方案满足了在正常列表滚动时使用原生的滚动节省性能,只在下拉刷新时使用模拟滚动来实现效果。
      方案 3:方案 2 的改良版,唯一不同是将下拉刷新元素和 scrollcontent 放在一个 div 里,将下拉刷新元素的 margintop 设为负值,在下拉刷新时,只需要修改 scrollcontent 一个元素的 tranlateY 值即可实现下拉,在性能上要比方案 2 好。
    4. 在采用了上述方案之后,还会有一个性能上的问题就是:当页面的列表过长,dom 元素过多时,在模拟滚动,下拉刷新这段时间内,页面也会有卡顿现象,这里采取了一个优化策略即:

      1) 列表较长时 dom 数量较多时,在触发下拉刷新的时机时将页面视窗之外的 dom 元素隐藏或者存放在 fragment 里面。
      2) 在刷新完成之后手指离开(touchend)时将隐藏的元素显示出来。
      3) 需要注意的是,隐藏和显示视窗外的元素这个操作在下拉刷新时只会执行一次,并且只有在下拉刷新时才会执行。

    AlloyPullRefresh

    1. 基于上述知识点,我写了一个下拉刷新组件,各位可以参考使用,如有问题,请多多指出!

    https://github.com/AlloyTeam/AlloyPullRefresh/

    继续阅读

  • TAT.dorsywang 剖析 Babel——Babel 总览
    In JavaScript,Web开发 on 2017年04月06日 by TAT.dorsywang view: 14,916
    1

    名词解释

    AST:Abstract Syntax Tree, 抽象语法树

    DI: Dependency Injection, 依赖注入

    ===============================================================

    Babel 的解析引擎

    Babel 使用的引擎是 babylon,babylon 并非由 babel 团队自己开发的,而是 fork 的 acorn 项目,acorn 的项目本人在很早之前在兴趣部落 1.0 在构建中使用,为了是做一些代码的转换,是很不错的一款引擎,不过 acorn 引擎只提供基本的解析 ast 的能力,遍历还需要配套的 acorn-travesal, 替换节点需要使用 acorn-,而这些开发,在 Babel 的插件体系开发下,变得一体化了

    继续阅读

  • TAT.dnt Omi 框架 Store 体系的前世今生
    In Web开发 on 2017年03月30日 by TAT.dnt view: 2,950
    1

    原文链接

    写在前面

    先说说 Store 系统是干什么的!为什么要造这样一个东西?能够给系统架构带来什么?

    当我们组件之间,拥有共享的数据的时候,经常需要进行组件通讯。在 Omi 框架里,父组件传递数据给子组件非常方便:

    • 通过在组件上声明 data-* 或者 :data-* 传递给子节点
    • 通过在组件上声明 data 或者 :data 传递给子节点(支持复杂数据类型的映射)
    • 声明 group-data 把数组里的 data 传给一堆组件传递(支持复杂数据类型的映射)

    注:上面带有冒号的是传递 javascript 表达式

    继续阅读

  • TAT.dnt Omi v1.0.3 发布 – 正式支持传递 javascript 表达式
    In Web开发 on 2017年03月22日 by TAT.dnt view: 2,416
    0

    原文链接

    写在前面

    Omi 框架可以通过在组件上声明 data-* 把属性传递给子节点。
    Omi 从设计之初,就是往标准的 DOM 标签的标准传递方式靠齐。比如:

    • 下划线自动转驼峰, data-page-index 传到子组件就变成 this.data.pageIndex
    • data-xx 传递到子节点全都变成字符串,如 data-page-index="1"到子节点中 this.data.pageIndex 就是字符串"1"

    继续阅读

  • TAT.yana 移动端输入框填坑系列(一)
    In Web开发 on 2017年03月21日 by TAT.yana view: 29,042
    25

    输入在移动端是一个很常用的功能,那么输入框必然是一个很重要的部分。然而,移动端输入框总会遇到各种各样的问题,无论是样式还是 ios 和 android 两端体验不一致都是很让我们头疼的问题,那么如何使移动 web 的输入框体验更贴近原生也成了一个需要我们多多思考和研究的问题。

    继续阅读

  • TAT.joeyguo 脚本错误量极致优化-监控上报与 Script error
    In Web开发 on 2017年03月20日 by TAT.joeyguo view: 5,640
    3

    原文地址

    在前端开发工作中,除了项目开发保质保量上线以外,项目的数据监控也应该配套起来,确保线上的正常运转。如上报 pv 监控项目是否正常运转;测速上报反应项目质量;脚本错误监控作为监控中重要一环,当页面发生报错的时候,通过上报错误信息,能及时发现存在问题,修复优化、减少损失。

    本文基于在手 Q 家校群前端脚本错误量优化的方案,致力于打造极致的脚本错误优化。

    继续阅读

  • TAT.dnt Omi v1.0 震撼发布 – 开放现代的 Web 组件化框架
    In Web开发 on 2017年03月20日 by TAT.dnt view: 3,045
    4

    原文链接

    写在前面

    Omi 框架经过几十个版本的迭代,越来越简便易用和强大。
    经过周末的连续通宵加班加点,Omi v1.0 版本终于问世。虽然版本遵循小步快跑、频繁迭代,但是 Omi 团队成员都有着克制之心,处女座占了半壁江山,所以 Omi 的 API 除了增量的 API,其他的历史 API 没有任何变化。

    • Github:https://github.com/AlloyTeam/omi

    废话不多说,这就为大家介绍到目前 1.0 版本为止,关于 Omi,你必须知道的点点滴滴。

    继续阅读

  • june01 png 的故事:获取图片信息和像素内容
    In Web开发 on 2017年03月16日 by june01 view: 9,131
    7

    前言

    现在时富媒体时代,图片的重要性对于数十亿互联网用户来说不言而喻,图片本身就是像素点阵的合集,但是为了如何更快更好的存储图片而诞生了各种各样的图片格式:jpeg、png、gif、webp 等,而这次我们要拿来开刀的,就是 png。

    简介

    首先,png 是什么鬼?我们来看看 wiki 上的一句话简介:

    Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression.

    也就是说,png 是一种使用无损压缩的图片格式,而大家熟知的另外一种图片格式——jpeg 则是采用有损压缩的方式。用通俗易懂的方式来讲,当原图片数据被编码成 png 格式后,是可以完全还原成原本的图片数据的,而编码成 jpeg 则会损耗一部分图片数据,这是因为两者的编码方式和定位不同。jpeg 着重于人眼的观感,保留更多的亮度信息,去掉一些不影响观感的色度信息,因此是有损耗的压缩。png 则保留原始所有的颜色信息,并且支持透明/alpha 通道,然后采用无损压缩进行编码。因此对于 jpeg 来说,通常适合颜色更丰富、可以在人眼识别不了的情况下尽可能去掉冗余颜色数据的图片,比如照片之类的图片;而 png 适合需要保留原始图片信息、需要支持透明度的图片。

    继续阅读

  • TAT.vorshen 教你用 webgl 快速创建一个小世界
    In Web开发 on 2017年03月15日 by TAT.vorshen view: 4,527
    3

    Webgl 的魅力在于可以创造一个自己的 3D 世界,但相比较 canvas2D 来说,除了物体的移动旋转变换完全依赖矩阵增加了复杂度,就连生成一个物体都变得很复杂。

    什么?!为什么不用 Threejs?Threejs 等库确实可以很大程度的提高开发效率,而且各方面封装的非常棒,但是不推荐初学者直接依赖 Threejs,最好是把 webgl 各方面都学会,再去拥抱 Three 等相关库。

    上篇矩阵入门中介绍了矩阵的基本知识,让大家了解到了基本的仿射变换矩阵,可以对物体进行移动旋转等变化,而这篇文章将教大家快速生成一个物体,并且结合变换矩阵在物体在你的世界里动起来。

    继续阅读

  • TAT.dnt Omi 应用 md2site-0.5.0 发布-支持动态 markdown 拉取解析
    In 资源工具 on 2017年03月15日 by TAT.dnt view: 1,463
    2

    写在前面

    Md2site 是基于 Omi 的一款 Markdown 转网站工具,使用简单,生成的文件轻巧,功能强大。

    • 官网:http://alloyteam.github.io/omi/md2site/
    • Github: https://github.com/AlloyTeam/omi/tree/master/md2site
    • 真实案例:http://alloyteam.github.io/omi/website/docs-cn.html

    在使用之前的版本的时候,你会发现体验非常好?为什么非常好?因为页面间的切换是无刷新!
    无刷新的原理就是,所有的 markdown 都会被 webpack 打包到 js 里,只要在 js 动态 require 就行。

    这样带来的一个问题便是:如果有海量的 markdown 的时候,首次加载的时间非常长。

    怎么解决?支持动态拉取和解析 markdown~~

    继续阅读

上页 1 ...6 7 8 9 10 11 12 13 14 15 ...60 下页
公众号:AlloyTeam
扫码关注
公众号:AlloyTeam
合作伙伴
HTML5梦工场
腾讯云
Coding
兄弟团队
  • 腾讯 ISUX
  • 腾讯 CDC
  • 腾讯游戏 TGideas
  • 百度前端 EFE
  • 百度前端 FEX
  • 淘宝前端团队 FED
友情链接
  • 印记中文
  • W3CTech
  • 前端观察
  • W3C Plus
  • Web 前端开发
  • V2EX
  • 蓝色理想
  • 云开发 CloudBase
  • HTML5中文学习网
  • 爱思资源网
  • 牛大拿_前端设计导航
  • 吕小鸣前端博客
  • 腾讯大学


Copyright ©  2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress.