移动端吸顶、动画、浏览器层模型实战分析

问题归纳

1. 顶部通知公告条自动吸顶判断

2. 点击自动展开动画，兼容Android与ios

3. 页面中的图标与文字对齐（垂直居中对齐、水平居中对齐）

4. 移动端居中、间距自适配

5. h5页面自定义native顶部导航条

知识点归纳

• 惯性滑动的事件触发机制

• iscroll模拟滚动，滚动事件在安卓中未被触发

• requestAnimateFrame(fn)，优化动画性能

• position：sticky； 滚动浮屏显示

• transition：height 1s； 安卓卡顿

• box、flexbox、flex布局，兼容性差异

• rem移动端适配方案，font-size计算

• JSBridge h5与原声native的通信

展开收缩

在移动端要求实现点击后，展开或收缩内容区域，承载app在ios系统中使用的webkit 602.4.6内核，安卓中使用的U3 1.0.0.100内核。

尝试利用css3的动画效果，利用 transition：height .5s 进行高度过渡，但是该效果在安卓机上出现了明显的卡顿现象。

在硬件的配置上来说，用于测试的安卓机并不差，因此猜测出现卡顿现象的原因在于内核的渲染机制上。

主线程与合并线程

在浏览器中，包含这三个线程：

1. JS引擎线程

2. 事件触发线程

3. GUI渲染线程

其中GUI渲染与JS执行引擎是互斥的，也就是存在js执行阻塞界面渲染的情况。

在这三个线程之上，浏览器拥有两个重要的执行线程来渲染页面：

1. 主线程 （Main Thread）

2. 合并线程 （Compositor Thread）

主线程（Main Thread）主要负责Js的执行、布局样式的计算以及绘制（paint，将图像层的内容绘制到位图中），故应包含JS引擎和事件触发线程。

合并线程（Compositor Thread）利用GPU来绘制位图到屏幕以及对位图的显示进行计算判断，故应包含GUI渲染线程。

一个简单的滑动例子便能说明其中的区别。

用户在滑动时，合并线程将直接利用GPU对之前的位图进行计算和展示，并不需要主线程的参与，而若是绑定了事件处理器，则会如下图所示。

主线程会参与执行对应的事件处理函数，合并线程会等待函数执行完成后再继续工作，显示设备刷新频率一般在50~60，那么60fps是能够得到最佳的动画显示，也就是说处理函数必须是在 1000 / 60 = 16.67ms之内完成ÿ