移动端吸顶、动画、浏览器层模型以及相关总结

总结

问题归纳

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 / 6