【HTML5移动端开发】[rem + 百分比布局] 加载抖动（高度不一致）解的决方法

解决移动端rem+百分比布局加载瞬间页面抖动（高度不一致）的方法

以下的内容和观点未经大牛级别验证，有错误的地方请大牛留言指教~！

移动端布局有很多种，这里我最常使用到rem+ 百分比的布局方式（高度/字体设置rem单位，宽度设置百分比）来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。

页面在加载未完成前会出现抖动的现象，虽然时间不算长，但是肉眼可见，必须解决（此处以750像素的设计图为例）——加载前后页面如下图所示：

可以看出 加载后所呈现的内容不一样~！

可以清楚的看到，加载未完成前的一小会儿，页面会出现一瞬间的崩塌现象。一开始没怎么在意这个问题，后来发现这样的页面的确影响视觉，视觉和心理，于是查了下资料，并未能找出很好的解决办法，后来自行研究了一下得到了如下几种办法，各有优缺点：

1.JS加载顺序与加载方法

页面加载顺序通常是"从上往下"加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好。于是乎，我们应当把计算字体的js放在body之前，如下所示：

推荐——原生写法(优化加载，加快body的显示)：

 <script type="text/javascript">
function resize() {
var htmlEle = document.documentElement;
                var htmlWidth = window.innerWidth;
                htmlEle.style.fontSize = 28 / 750 * htmlWidth + 'px';
        } resize();
    </script>

jQ写法（不利于加载，不过jquery.min.js体积也不算太大）：

2.小技巧——对body进行CSS处理

如果不像1一样，让js方法在页面加载到body之前就运行，又能保证加载完成前页面不错乱应该怎么做呢！ 
这里运用小技巧，利用css以及js的计时器等进行处理，先让body隐藏，在计算好html的font-size后再令其显示。其实按道理来说，这样的处理方式有点粗暴，但是也不是不可采用，方法如下：

1. 给html中的body添加行内样式 style="display:none", 先设置隐藏；

2. 计算js的方法在body之后添加，做到先加载网页文档；

3. 在计算font-size的js方法之后添加如下第二段showPage 的js

1毫秒的时间我们可以忽略不计

但是，这样的方法是有缺点的（至于存在多少问题，问题的大小，只能是一步步被发现）：body设置隐藏之后，body元素从页面中被移除，而之后的js在遍历一些元素等偶尔会出现一些问题，比如使用过swiper框架的朋友可以试下，在初始化swiper之前设置以上方法试试~！你会发现，swiper无法使用了，无妨，后续介绍其解决方法！

3.优化上面的小技巧——对body进行CSS处理

上述方法使用的display:none会有一定的问题，所以，大家不妨使用到display的表兄弟——visibility属性,方法与2  

几乎一样，如下：

1. 给html中的body添加行内样式 style="visibility:hidden",(就是替换display:none，其他不变) 先设置隐藏；

2. 计算js的方法在body之后添加，做到先加载网页文档；

3. 在计算font-size的js方法之后添加showPage 的js  (就是替换display:none，其他不变)。

visibility属性只是将元素隐藏，保留了其原本的位置，相当于它依然存在在页面上，只是隐身了~~~~！！！！！！！相比较2，风险就小多了~！

上述方法，大家都可以试试，如果大家有其他更好，更规范的方法也可以一起交流学习~！！！！！！！