作者：创新互联 文章来源：网站建设部 点击数： 更新时间：2017-09-22
网站建设好了页面特别美观，看着也忒舒坦。但美中不足的是每刷新一下页面就要闪下出个白底，页面先是往右边移动了下，在显示右边的滚动条，页面又往左边移动。时间很短人眼看着有点累不舒服。
我们要怎么处理这个闪下页面颤抖、颠簸抖动呢？
测试了N多个浏览器，
发现在IE8和Chrome会抖动，是右边滚动条的原因
影响出来这种原因有点多，我们先来分析：
1、页面高度在浏览器中渲染问题，显示器高度 大于 网页内容呈现高度时右边的滚动条就要显示出来。这里页面中比如有个js要执行耗时有1，2秒。在往下执行加载内容 网页高度就 大于 显示器高度了，右边的滚动条就展显出来了。问题就出来了这1，2秒钟的时间页刷新一下就要闪下抖动下。
解决方法
如页面中间插入了js 建议把js放到html代码的head中去，不要放到的中间都可以。
要是js位置调整了还要抖动，应改就是js代码中有多次读或写某些元素的高度。
如
// 读
var h1 = element1.clientHeight;
// 写（无效布局）
element1.style.height = (h1 * 2) + 'px';
// 读（触发布局）
var h2 = element2.clientHeight;
// 写（无效布局）
element2.style.height = (h2 * 2) + 'px';
// 读（触发布局）
var h3 = element3.clientHeight;
// 写（无效布局）
element3.style.height = (h3 * 2) + 'px';
解决方法
把读的代码放在一起，写的代码放在一起就OK了。
// 读
var h1 = element1.clientHeight;
// 读（触发布局）
var h2 = element2.clientHeight;
// 读（触发布局）
var h3 = element3.clientHeight;
// 写（无效布局）
element1.style.height = (h1 * 2) + 'px';
// 写（无效布局）
element2.style.height = (h2 * 2) + 'px';
// 写（无效布局）
element3.style.height = (h3 * 2) + 'px';
这有点小问题，在实际网站建设开发中可能没这么简单。代码就必须要分散在不同地方执行，才能达到实现效果。就要解耦代码，控制好执行顺序。
window.requestAnimationFrame函数。类似于setTimeout(fn, 0)，使用它来安排所有dom写操作在一步一步执行。保留所有dom读操作在当前同步状态。
// 读
var h1 = element1.clientHeight;
// 写
requestAnimationFrame(function() {
element1.style.height = (h1 * 2) + 'px';
});
// 读
var h2 = element2.clientHeight;
// 写
requestAnimationFrame(function() {
element2.style.height = (h2 * 2) + 'px';
});
这样就把代码封装好了。重点是requestAnimationFrame来延迟DOM写操作。减少多次写。灵活下写同时也可以把读放进去哦。
FastDom轻量库能让DOM的读/写操作捆绑在一起，具体方法百度看说明文档了。
说到这可以大家都有点晕了。上面的一步一步来要网页刷新一下页面要颤抖闪下，布局颠簸抖动了还没解决那就直接用这个方法吧！
html{overflow-y:scroll;}
就一句css样式，简单很实用。
意思是不管网页高度，把右边的滚动条位置始终先留出来。
网站内容该不该让他复制 :上一篇网站常经被挂马，要怎样处理 :下一篇