• 首页
• 服务器租用
• 企业邮箱
• 虚拟主机
• 网站程序
• 营销推广
• 网站建设
• 域名注册
• 前端开发
• 网站备案

• 当前位置：创新互联 >> 常见问题 >> 网站建设 >> 网站维护 >> 网页刷新一下页面要颤抖闪下，布局颠簸抖动了下的解决方法

网页刷新一下页面要颤抖闪下，布局颠簸抖动了下的解决方法

• 作者：创新互联 文章来源：网站建设部 点击数： 更新时间：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样式，简单很实用。
  意思是不管网页高度，把右边的滚动条位置始终先留出来。
• 网站内容该不该让他复制 :上一篇
  网站常经被挂马，要怎样处理 :下一篇